@charset "UTF-8";

/*-------------------------------------------------------------------------

-------------------------------------------------------------------------*/

.statement {
    background: linear-gradient(45deg, #3C83D4, #0054AF);
    padding: 107px 30px 132px;
    text-align: center;
}
    .statement__en {
        margin: 0 0 14px;
        font-weight: 300;
        color      : #fff;
    }
    .statement__ttl {
        margin: 0 0 14px;
        font-weight: 700;
        color      : #fff;
        word-break: keep-all;
    }
    .statement__text {
        color: #fff;
        line-height: 2;
        word-break: auto-phrase;
    }

@media screen and (max-width: 768px){
    .statement {
        padding-block: 80px;

    }
}

/*-------------------------------------------------------------------------
2つの使命
-------------------------------------------------------------------------*/

.mission {
    padding: 86px 0 0;
    font-size: 0;
    text-align: center;
}
.mission__headline {
    margin: 0 0 43px;
    letter-spacing: .1em;
}
    .mission__headline span {
        display: block;
    }
.mission__text {
    line-height: 1;
    font-size: 16px;
    margin: 0 0 30px;
}

/* #
--------------------------- */
.mission__contents {
    display        : flex;
    gap            : 70px;
    justify-content: center;
    padding-inline: 30px;
}
    .mission-panel {
        background-color: #fff;
        background: transparent linear-gradient(172deg, #FAFF6A 0%, #02CCC5 62%, #A6C7EB 100%) 0% 0% no-repeat padding-box;
        border-radius: 50%;
        width: 420px;
        height: 420px;
        padding: 10px;
        opacity: 0;
        transform: scale(0.8);
    }
    .mission-panel.is-active {
        animation-name: panel;
        animation-duration: .7s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }
    .mission-panel.is-active[data-mission="1"]{ animation-delay: 0s;}
    .mission-panel.is-active[data-mission="2"]{ animation-delay: .2s;}

        .mission-panel__inner{
            background: #fff;
            border-radius: 50%;
            width: 400px;
            height: 400px;
            display        : flex;
            gap            : 11px;
            flex-direction : column;
            justify-content: center;
        }
.mission-panel__icn {
    margin: 0 0 21px;
}
.mission-panel__hgroup {
    /* margin: 0 0 21px; */
    position: relative;
}
    .mission-panel__num {
        display: block;
        color: #3C83D4;
        line-height: 1;
        margin: 0 0 14px;
        text-transform: capitalize;
    }
        .mission-panel__num span {
            display: block;
            color: inherit;
        }
    .mission-panel__headline {
        font-weight: 700;
        line-height: 1.5;
    }
    .mission-panel__text {
        line-height: 2;
    }
    .mission-panel__text .cloud {
        font-size: 16px;
        letter-spacing: -0.1em;
    }

@media screen and (max-width: 768px){
    .mission__headline {
        text-align: center;
    }
    .mission__contents {
        display: block;
    }
    .mission__contents > * + * {
        margin-top: 30px;
    }
    .mission-panel {
        margin-inline: auto;
    }
    .mission-panel__text {
        text-align: center;
    }
}
@media screen and (max-width: 525px){
    .mission-panel {
        width: 100%;
        height: 85vw;
    }
    .mission-panel__inner {
        width: inherit;
        height: 100%;
    }
}
@media screen and (max-width: 400px){
    .mission-panel,
    .mission-panel__inner {
        border-radius: 20px;
        height: auto;
    }
    .mission-panel__inner {
        padding: 20px;
    }
}

/* #
--------------------------- */
.mission-dis {
    width: 1010px;
    height: 396px;
    margin: 44px auto 0;
    position: relative;
}
.mission-dis__img {
    transform: translateY(50px);
    opacity: 0;
}
      .is-active .mission-dis__img {
        animation: img 1s ease .6s forwards;
    }
    .mission-dis-list li {
      position: absolute;
      opacity: 0;
      transform: translateY(30px);
      transition: 0.5s cubic-bezier(1, -0.47, 0, 2.27) 1.5s;
  }
      .is-active .mission-dis-list li {
        opacity: 1;
        transform: translateY(0);
    }
    .mission-dis span {
      white-space: nowrap;
      min-width: 90px;
      height: 35px;
      line-height: 36px;
      text-align: center;
      background: #EDF500 linear-gradient(130deg, #FAFF6A 0%, #EDF500 20%, #75F2EE 40%, #FAFF6A 60%, #EDF500 80%, #75F2EE 100%) 0% 0% no-repeat padding-box;
      background-size: 300% auto;
      background-position: 1% 50%;
      box-shadow: 0px 2px 4px #3C83D480;
      border-radius: 30px;
      padding: 0 17px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: block;
      transition: all 0.3s ease-out;
      animation-name: shake;
      animation-duration: 31s;
      animation-timing-function: ease;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
  }
  .mission-dis span:hover{
      background-position: 99% 50%;
  }
    .mission-dis li:nth-child(1) span {
      animation-delay: 5s;
  }
    .mission-dis li:nth-child(2) span {
      animation-delay: 8s;
  }
    .mission-dis li:nth-child(3) span {
      animation-delay: 11s;
  }
    .mission-dis li:nth-child(4) span {
      animation-delay: 14s;
  }
    .mission-dis li:nth-child(5) span {
      animation-delay: 17s;
  }
    .mission-dis li:nth-child(6) span {
      animation-delay: 20s;
  }
    .mission-dis li:nth-child(7) span {
      animation-delay: 23s;
  }
    .mission-dis li:nth-child(8) span {
      animation-delay: 26s;
  }
    .mission-dis li:nth-child(9) span {
      animation-delay: 29s;
  }
    .mission-dis li:nth-child(10) span {
      animation-delay: 32s;
  }
    .mission-dis li:nth-child(11) span {
      animation-delay: 35s;
  }
    .mission-dis li:nth-child(12) span {
      animation-delay: 38s;
  }
    .mission-dis li:nth-child(13) span {
      animation-delay: 41s;
  }
    .mission-dis li:nth-child(14) span {
      animation-delay: 44s;
  }
    .mission-dis-icn {
      display: none;
  }

[data-dis="cloud"] {
  top: 150px;
  left: 650px; }

[data-dis="sns"] {
  top: 325px;
  left: 250px; }

[data-dis="marketing"] {
  top: 330px;
  left: 645px; }

[data-dis="media"] {
  top: 380px;
  left: 820px; }

[data-dis="security"] {
  top: 100px;
  left: 124px; }

[data-dis="vr"] {
  top: 270px;
  left: 1026px; }

[data-dis="oem"] {
  top: 110px;
  left: 320px; }

[data-dis="rpa"] {
  top: 188px;
  left: 40px; }

[data-dis="toc"] {
  top: 380px;
  left: 57px; }

[data-dis="sign"] {
  top: 80px;
  left: 800px; }

[data-dis="consule"] {
    top: 385px;
    left: 480px; }

[data-dis="park"] {
    top: 290px;
    left: 5px; }

[data-dis="bpo"] {
    top: 160px;
    left: 930px; }

[data-dis="bb"] {
    top: 60px;
    left: 540px; }

@keyframes panel {
  0% {
    opacity: 0;
    transform: scale(0.9); }
  40% {
    opacity: .4;
    transform: scale(1.05); }
  100% {
    opacity: 1;
    transform: scale(1); } }
@keyframes img {
  0% {
    transform: translateY(20px);
    opacity: 0; }
  40% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0);
    opacity: 1; } }
@keyframes shake {
  0% {
    transform: rotate(0);
    box-shadow: none; }
  .3% {
    transform: rotate(2deg);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); }
  .6% {
    transform: rotate(-2deg);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); }
  .9% {
    transform: rotate(2deg);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); }
  1.2% {
    transform: rotate(-2deg);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); }
  1.5% {
    transform: rotate(2deg);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); }
  1.8% {
    transform: rotate(-2deg);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); }
  2.1% {
    transform: rotate(0);
    box-shadow: none; } }
/* POPUP
--------------------------- */
body.is-fixed, html.is-fixed {
  overflow: hidden;
  touch-action: none; }

.mission-popup__fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  overflow-y: scroll; }

/* 共通 */
.mission-popup__inner, .mission-popup__circle, .mission-popup__contents {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -410px 0 0 -410px;
  width: 840px;
  height: 840px; }
  .is-narrow .mission-popup__inner, .is-narrow .mission-popup__circle, .is-narrow .mission-popup__contents {
    position: absolute;
    margin-top: 0; }

.is-narrow .mission-popup__inner,
.is-narrow .mission-popup__circle {
  top: 20px; }

.is-narrow .mission-popup__contents {
  top: 0; }

.mission-popup {
  opacity: 0;
  visibility: hidden; }
  .mission-popup.is-show {
    opacity: 1;
    visibility: visible; }
  .mission-popup__inner {
    z-index: 102; }

/* contents */
.mission-popup__contents {
    padding: 157px 0 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.2);
}
.mission-popup__contents.is-show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: .2s linear 1.1s;
}
.mission-popup__contents.is-hide {
    opacity: 0;
    visivility: hide;
    transform: scale(1.1);
    transition: .4s ease;
}
.mission-popup__contents__icn {
    margin: 0 0 21px;
}
.mission-popup__contents__icn img {
    /*width: 219px;*/
}
.mission-popup__contents__headline {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    margin: 0 0 54px;
}
.mission-popup__contents__text {
    font-size: 16px;
    line-height: 1.7;
}

/* 閉じるボタン */
.mission-popup__close {
  position: absolute;
  left: 50%;
  bottom: 66px;
  margin: 0 0 0 -24px;
  cursor: pointer;
  transform: scale(0); }
  .is-show .mission-popup__close {
    animation: close .5s ease 1.6s;
    animation-fill-mode: forwards; }
  .is-hide .mission-popup__close {
    animation: closeHide .4s ease; }

@keyframes close {
  0% {
    transform: scale(0); }
  40% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }
@keyframes closeHide {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.1);
    opacity: 0; } }
/* circle */
.mission-popup__circle {
  z-index: 101;
  background-color: #fff;
  border-radius: 50%;
  transform: scale(0);
}
  .is-show .mission-popup__circle {
    animation: circle .8s ease .5s;
    animation-fill-mode: forwards;
}
  .is-hide .mission-popup__circle {
    animation: circleHide .4s ease 0s;
}

@keyframes circle {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    40% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes circleHide {
    0% {
        opacity: 1;
        transform: scale(1);
        visibility: visible;
    }
    50% {
        opacity: 1;
        visibility: visivle;
    }
    100% {
        opacity: 0;
        transform: scale(1.1);
        visibility: hide;
    }
}
/* overlay */
.mission-popup__overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 0%) linear-gradient(170deg, rgb(250 255 106 / 60%) 0%, rgb(2 204 197 / 60%) 62%, rgb(166 199 235 / 60%) 100%) 0% 0% no-repeat padding-box;
  opacity: 0;
  visibility: hidden;
  transition: .4s ease;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  overflow-x: hidden;
}
  .is-show .mission-popup__overlay {
    opacity: 1;
    visibility: visible;
}
  .is-hide .mission-popup__overlay {
    opacity: 0;
    visivility: hidden;
    transition-delay: .6s;
}

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






    .mission-dis {
        width: 100%;
        height: 107vw;
    }
    .mission-dis__img{
        display: none;
    }
    .mission-dis-list {
        background: url(/images/newgrad/img_businessimage_sp.png) no-repeat center;
        background-size: contain;
    }
    .mission-dis-list {
        height: 112vw;
    }
    .mission-dis-list li {
        transition-delay: .5s;
        z-index: 1;
    }
    .mission-dis-list span {
        height: 8vw;
        line-height: 8vw;
        font-size: 2.933vw;
        z-index: 1;
    }

  [data-dis="security"] {
    top: 10%;
    left: 12%; }

  [data-dis="sign"] {
    top: 10%;
    left: 66%; }

  [data-dis="oem"] {
    top: 22%;
    left: 33%; }

  [data-dis="cloud"] {
    top: 39%;
    left: 48%; }

  [data-dis="consule"] {
    top: 72%;
    left: 54%; }

  [data-dis="marketing"] {
    top: 58%;
    left: 66%; }

  [data-dis="media"] {
    top: 90%;
    left: 66%; }

  [data-dis="toc"] {
    top: 58%;
    left: 4%; }

  [data-dis="rpa"] {
    top: 31%;
    left: 4%; }

  [data-dis="vr"] {
    top: 90%;
    left: 4%; }

  [data-dis="bpo"] {
    top: 27%;
    left: 73%; }

  [data-dis="bb"] {
    top: 5%;
    left: 40%; }

  [data-dis="park"] {
    top: 43%;
    left: 20%; }

  [data-dis="sns"] {
    top: 75%;
    left: 15%; }

  .mission-dis-icn {
    display: block; }
    .mission-dis-icn li {
      position: absolute;
      z-index: 0;
      cursor: pointer;
      opacity: 0;
      transform: translateY(10px);
      transition: 0.3s cubic-bezier(0.3, 0.13, 0.07, 1.9) 2s; }
      .is-active .mission-dis-icn li {
        opacity: 1;
        transform: translateY(0); }
    .mission-dis-icn img {
      width: 100%; }

  [data-icn="person"] {
    top: 12.5%;
    left: 5%;
    width: 25%; }

  [data-icn="cloud"] {
    top: 8%;
    left: 69%;
    width: 26%; }

  [data-icn="consule"] {
    top: 20.7%;
    left: 36%;
    width: 26%; }

  [data-icn="marketing"] {
    top: 37%;
    left: 69%;
    width: 26.9%; }

  [data-icn="media"] {
    top: 47%;
    left: 4%;
    width: 27.7%; }

  [data-icn="security"] {
    top: 73%;
    left: 15%;
    width: 36%; }

  [data-icn="toc"] {
    top: 64.7%;
    left: 55%;
    width: 33%; }

  .mission-popup__inner,
  .mission-popup__contents,
  .mission-popup__circle {
    top: 1%;
    margin: 13.8vw 0 0 -70%;
    width: 140%;
    height: 128vw; }

  .mission-popup__contents {
    padding-top: 9%; }
    .mission-popup__contents__icn {
      margin-bottom: 2%; }
      .mission-popup__contents__icn img {
        width: 40%; }
    .mission-popup__contents__headline {
      margin: 0 0 1%;
      font-size: 5.3vw; }
    .mission-popup__contents__text {
      font-size: 3.733vw;
      text-align: justify;
      padding: 1% 18% 0; }
      .mission-popup__contents__text br {
        display: none; }

  .mission-popup__close {
    width: 6%;
    margin-left: -3%;
    bottom: 5%; }
    .mission-popup__close img {
      width: 100%; }
  }
/*-------------------------------------------------------------------------
question
-------------------------------------------------------------------------*/

.question{
    margin: 150px 0 0;
}
    .question__hgroup {
        background: #1959D9 linear-gradient(138deg, #3C83D4 0%, #1959D9 100%) 0% 0% no-repeat padding-box;
        display        : flex;
        gap            : 36px;
        align-items    : baseline;
        justify-content: center;
        padding-block: 85px 94px;
    }
        .question__en {
            font-weight: 300;
            color      : #fff;
        }
        .question__en:first-letter {
            font-size: 90px;
            font-weight: 400;
        }
        .question__ttl {
            font-weight: 700;
            color      : #fff;
            line-height: 1.73;
        }
.answer__ttl {
    margin: 0 0 60px;
    font-weight: 700;
    color      : var(--main-color);
    text-align: center;
    line-height: 1.5;
    word-break: break-all;
}
.answer__head {
    margin: 0 0 124px;
}
.answer__middle {
    margin-block: 100px;
    position: relative;
    text-align: center;
}
.answer__middle > * + * {
  margin: 150px 0 0;
}
  .answer__section {
    position: relative;
  }
  .answer__section:nth-child(2):before {
      content: "";
      width: 168px;
      height: 67px;
      background-color: #FAFF6A;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      position: absolute;
      top: -101px;
      left: 0;
      right: 0;
      margin: auto;
  }
  .answer__description {
      margin: 0 0 30px;
      line-height: 2;
      text-align: center;
  }
      .answer__description span {
          display: block;
          font-weight: 700;
          word-break: auto-phrase;
      }
.case {
    display        : flex;
    gap            : 55px;
    justify-content: center;
}
    .case__items {
        width: 230px;
    }
        .case__ttl {
            margin: 0 0 23px;
            font-weight: 500;
            text-align: center;
        }
        .case__img {
            text-align: center;
        }
        .case__text {
            margin: -67px 15px 0;
        }
.case__foot {
    margin: 60px 0 30px;
    font-weight: 700;
    text-align: center;
}


@media screen and (max-width: 768px){
    .case {
        display: grid;
        gap    : 50px 20px;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
    .case__items {
        width: auto;
    }
}
@media screen and (max-width: 480px){
    .answer__head {
        margin: 0 0 54px;
    }
    .answer__middle {
        margin-block: 100px 40px;
    }
    .answer__middle:before {
        width: 78px;
        height: 34px;
        top: -43px;
    }    
    .answer__description {
        text-align: left;
    }
}