#area298 {
  color: #fff;
  background: #222; }

.about-wrap {
  background: url("../img/bg-about.jpg");
  background-size: cover; }
  @media screen and (max-width: 897px) {
    .about-wrap {
      background-size: contain; } }

img.engineer__hero.pc {
  display: none; }

img.engineer__hero.pc-wide {
  display: block; }

@media all and (max-width: 1290px) {
  img.engineer__hero.pc {
    display: block; }

  img.engineer__hero.pc-wide {
    display: none; } }
/* ======================================
feature
====================================== */
#feature {
  padding: 120px 0; }
  @media screen and (max-width: 897px) {
    #feature {
      padding: 40px 0; } }
  #feature .feature__box {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-flow: row-reverse; }
    @media screen and (max-width: 897px) {
      #feature .feature__box {
        display: block;
        padding: 0 20px; } }
    #feature .feature__box .txt {
      width: 73%;
      border-right: 1px solid #707070;
      margin: 0 5% 0 0;
      padding: 0 5% 0 0; }
      @media screen and (max-width: 897px) {
        #feature .feature__box .txt {
          width: 100%;
          margin: 0;
          border-right: none; } }
      #feature .feature__box .txt h2 {
        font-size: 3.0rem; }
        @media screen and (max-width: 897px) {
          #feature .feature__box .txt h2 {
            font-size: 2.0rem;
            padding: 0 0 5px 0; } }
        #feature .feature__box .txt h2 span {
          font-size: 2.0rem; }
          @media screen and (max-width: 897px) {
            #feature .feature__box .txt h2 span {
              font-size: 1.8rem; } }
      #feature .feature__box .txt .name {
        font-family: futura-pt, sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 6.0rem;
        color: #616161;
        line-height: 1;
        padding: 0 0 50px 0; }
        @media screen and (max-width: 897px) {
          #feature .feature__box .txt .name {
            display: none; } }
      #feature .feature__box .txt h3 {
        font-size: 4.0rem;
        font-weight: 900;
        line-height: 1.2;
        padding: 0 0 30px 0; }
        @media screen and (max-width: 897px) {
          #feature .feature__box .txt h3 {
            font-size: 2.5rem;
            padding: 0 0 10px 0; } }
      #feature .feature__box .txt .copy {
        font-size: 1.9rem; }
        @media screen and (max-width: 897px) {
          #feature .feature__box .txt .copy {
            font-size: 1.5rem; } }
    #feature .feature__box .img {
      width: 28%; }
      @media screen and (max-width: 897px) {
        #feature .feature__box .img {
          width: 50%;
          margin: 0 25%;
          padding: 0 0 20px 0; } }

/* ======================================
experience
====================================== */
#experience {
  padding: 0 0 120px 0; }
  @media screen and (max-width: 897px) {
    #experience {
      padding: 0 0 40px 0; } }
  #experience .experience__box {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media screen and (max-width: 897px) {
      #experience .experience__box {
        display: block; } }
    #experience .experience__box .img {
      width: 50%;
      max-width: 800px;
      text-align: right;
      margin-left: -230px;
      position: relative; }
      @media screen and (max-width: 897px) {
        #experience .experience__box .img {
          width: 100%;
          margin-left: 0; } }
      #experience .experience__box .img .number {
        position: absolute;
        top: -100px;
        right: -200px;
        font-size: 20.0rem;
        font-family: futura-pt, sans-serif;
        font-style: normal;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -10px; }
        @media screen and (max-width: 897px) {
          #experience .experience__box .img .number {
            top: -50px;
            right: 20px;
            font-size: 6.0rem;
            letter-spacing: -10px; } }
        #experience .experience__box .img .number span {
          color: transparent;
          -webkit-text-stroke: 3px white; }
          @media screen and (max-width: 897px) {
            #experience .experience__box .img .number span {
              -webkit-text-stroke: 2px white; } }
    #experience .experience__box .txt {
      width: 50%;
      max-width: 510px;
      padding: 0 0 0 60px; }
      @media screen and (max-width: 897px) {
        #experience .experience__box .txt {
          width: 100%;
          padding: 0 5%; } }
      #experience .experience__box .txt .name {
        font-family: futura-pt, sans-serif;
        font-style: italic;
        font-weight: 700;
        font-size: 6.0rem;
        color: #616161; }
        @media screen and (max-width: 897px) {
          #experience .experience__box .txt .name {
            font-size: 4.0rem; } }
      #experience .experience__box .txt h3 {
        font-size: 4.0rem;
        font-weight: 900;
        line-height: 1.2;
        padding: 0 0 30px 0; }
        @media screen and (max-width: 897px) {
          #experience .experience__box .txt h3 {
            font-size: 3.0rem;
            padding: 0 0 10px 0; } }
      #experience .experience__box .txt .copy {
        font-size: 1.9rem; }
        @media screen and (max-width: 897px) {
          #experience .experience__box .txt .copy {
            font-size: 1.5rem; } }

/* ======================================
training
====================================== */
#training {
  padding: 0 0 120px 0; }
  @media screen and (max-width: 897px) {
    #training {
      padding: 40px 0; } }
  #training .training__box {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row-reverse; }
    @media screen and (max-width: 897px) {
      #training .training__box {
        display: block; } }
    #training .training__box .img {
      width: 50%;
      max-width: 800px;
      text-align: left;
      margin-right: -230px;
      position: relative; }
      @media screen and (max-width: 897px) {
        #training .training__box .img {
          width: 100%;
          margin-right: 0; } }
      #training .training__box .img .number {
        position: absolute;
        top: -100px;
        left: -200px;
        font-size: 20.0rem;
        font-family: futura-pt, sans-serif;
        font-style: normal;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -10px; }
        @media screen and (max-width: 897px) {
          #training .training__box .img .number {
            top: -50px;
            left: 20px;
            font-size: 6.0rem;
            letter-spacing: 0; } }
        #training .training__box .img .number span {
          color: transparent;
          -webkit-text-stroke: 3px white; }
          @media screen and (max-width: 897px) {
            #training .training__box .img .number span {
              -webkit-text-stroke: 2px white; } }
    #training .training__box .txt {
      width: 50%;
      max-width: 510px;
      padding: 0 60px 0 0; }
      @media screen and (max-width: 897px) {
        #training .training__box .txt {
          width: 100%;
          padding: 0 5%; } }
      #training .training__box .txt .name {
        font-family: futura-pt, sans-serif;
        font-style: italic;
        font-weight: 700;
        font-size: 6.0rem;
        color: #616161; }
        @media screen and (max-width: 897px) {
          #training .training__box .txt .name {
            font-size: 4.0rem; } }
      #training .training__box .txt h3 {
        font-size: 4.0rem;
        font-weight: 900;
        line-height: 1.2;
        padding: 0 0 30px 0; }
        @media screen and (max-width: 897px) {
          #training .training__box .txt h3 {
            font-size: 3.0rem;
            padding: 0 0 10px 0; } }
      #training .training__box .txt .copy {
        font-size: 1.9rem; }
        @media screen and (max-width: 897px) {
          #training .training__box .txt .copy {
            font-size: 1.5rem; } }

/* ======================================
games
====================================== */
#games {
  padding: 0 0 120px 0; }
  @media screen and (max-width: 897px) {
    #games {
      padding: 0 0 40px 0; } }
  #games .games__box {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media screen and (max-width: 897px) {
      #games .games__box {
        display: block; } }
    #games .games__box .img {
      width: 50%;
      max-width: 800px;
      text-align: right;
      margin-left: -230px;
      position: relative; }
      @media screen and (max-width: 897px) {
        #games .games__box .img {
          width: 100%;
          margin-left: 0; } }
      #games .games__box .img .number {
        position: absolute;
        top: -100px;
        right: -200px;
        font-size: 20.0rem;
        font-family: futura-pt, sans-serif;
        font-style: normal;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -10px; }
        @media screen and (max-width: 897px) {
          #games .games__box .img .number {
            top: -50px;
            right: 20px;
            font-size: 6.0rem;
            letter-spacing: 0px; } }
        #games .games__box .img .number span {
          color: transparent;
          -webkit-text-stroke: 3px white; }
          @media screen and (max-width: 897px) {
            #games .games__box .img .number span {
              -webkit-text-stroke: 2px white; } }
    #games .games__box .txt {
      width: 50%;
      max-width: 510px;
      padding: 0 0 0 60px; }
      @media screen and (max-width: 897px) {
        #games .games__box .txt {
          width: 100%;
          padding: 0 5%; } }
      #games .games__box .txt .name {
        font-family: futura-pt, sans-serif;
        font-style: italic;
        font-weight: 700;
        font-size: 6.0rem;
        color: #616161; }
        @media screen and (max-width: 897px) {
          #games .games__box .txt .name {
            font-size: 4.0rem; } }
      #games .games__box .txt h3 {
        font-size: 4.0rem;
        font-weight: 900;
        line-height: 1.2;
        padding: 0 0 30px 0; }
        @media screen and (max-width: 897px) {
          #games .games__box .txt h3 {
            font-size: 3.0rem;
            padding: 0 0 10px 0; } }
      #games .games__box .txt .copy {
        font-size: 1.9rem; }
        @media screen and (max-width: 897px) {
          #games .games__box .txt .copy {
            font-size: 1.5rem; } }

/* ======================================
store
====================================== */
#store {
  padding: 120px 0; }
  @media screen and (max-width: 897px) {
    #store {
      padding: 40px 0; } }
  #store .store__box {
    max-width: 1120px;
    margin: 0 auto;
    border: 10px solid #545454;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 897px) {
      #store .store__box {
        margin: 0 20px;
        border: 5px solid #545454;
        display: block; } }
    #store .store__box .img {
      width: 47%; }
      @media screen and (max-width: 897px) {
        #store .store__box .img {
          width: 100%;
          padding: 0 0 15px 0; } }
    #store .store__box .txt {
      width: 47%;
      padding: 0 3%; }
      @media screen and (max-width: 897px) {
        #store .store__box .txt {
          width: 100%;
          padding: 0 5%; } }
      #store .store__box .txt h3 {
        font-size: 3.3rem;
        font-weight: 900;
        line-height: 1.2; }
        @media screen and (max-width: 897px) {
          #store .store__box .txt h3 {
            font-size: 2.5rem; } }
        #store .store__box .txt h3 span {
          display: block;
          font-size: 2.2rem;
          font-weight: 900; }
          @media screen and (max-width: 897px) {
            #store .store__box .txt h3 span {
              font-size: 1.8rem; } }
      #store .store__box .txt dl {
        padding: 15px 0 0 0; }
        @media screen and (max-width: 897px) {
          #store .store__box .txt dl {
            padding: 8px 0 15px 0; } }
        #store .store__box .txt dl div {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px dotted #DCDCDC;
          padding: 15px 0; }
          @media screen and (max-width: 897px) {
            #store .store__box .txt dl div {
              display: block;
              padding: 8px 0; } }
          #store .store__box .txt dl div:last-of-type {
            border-bottom: none;
            padding: 15px 0 0 0; }
          #store .store__box .txt dl div dt {
            width: 20%; }
          #store .store__box .txt dl div dd {
            width: 80%; }
            #store .store__box .txt dl div dd a {
              color: #fff; }

/* ======================================
flow
====================================== */
#flow {
  padding: 120px 0;
  background: url("../img/bg-flow.jpg");
  background-size: cover; }
  @media screen and (max-width: 897px) {
    #flow {
      padding: 40px 0;
      background-size: cover; } }
  #flow .flow__headline {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 0 60px 0; }
    @media screen and (max-width: 897px) {
      #flow .flow__headline {
        padding: 0 20px 20px 20px;
        text-align: center; } }
    #flow .flow__headline h2 {
      font-family: futura-pt, sans-serif;
      font-style: italic;
      font-weight: 700;
      font-family: futura-pt, sans-serif;
      line-height: 1; }
      @media screen and (max-width: 897px) {
        #flow .flow__headline h2 {
          font-size: 4.0rem; } }
    #flow .flow__headline p {
      font-size: 3.0rem;
      font-weight: 900; }
      @media screen and (max-width: 897px) {
        #flow .flow__headline p {
          font-size: 1.8rem; } }
  #flow .flow__box {
    max-width: 1140px;
    margin: 0 auto; }
    @media screen and (max-width: 897px) {
      #flow .flow__box {
        padding: 0 20px; } }
    #flow .flow__box .inbox {
      display: flex;
      justify-content: space-between;
      position: relative; }
      @media screen and (max-width: 897px) {
        #flow .flow__box .inbox {
          display: block; } }
      #flow .flow__box .inbox::before {
        content: "";
        width: 95%;
        height: 10px;
        background: #fff;
        position: absolute;
        top: 120px;
        left: 2.5%;
        z-index: 1; }
        @media screen and (max-width: 897px) {
          #flow .flow__box .inbox::before {
            display: none; } }
      #flow .flow__box .inbox .flow__box__item {
        width: 20%;
        z-index: 2; }
        @media screen and (max-width: 897px) {
          #flow .flow__box .inbox .flow__box__item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin: 0 0 15px 0;
            padding: 0 0 15px 0;
            border-bottom: 1px dotted #fff; } }
        #flow .flow__box .inbox .flow__box__item h3 {
          text-align: center;
          padding: 30px 0 15px 0;
          font-size: 2.0rem;
          font-weight: 900; }
          @media screen and (max-width: 897px) {
            #flow .flow__box .inbox .flow__box__item h3 {
              text-align: left;
              padding: 0;
              font-size: 1.8rem; } }
          #flow .flow__box .inbox .flow__box__item h3 span {
            display: block;
            background: #201F24;
            margin: 0 30%;
            font-family: futura-pt, sans-serif;
            font-style: normal;
            font-weight: 700;
            font-size: 1.5rem; }
            @media screen and (max-width: 897px) {
              #flow .flow__box .inbox .flow__box__item h3 span {
                margin: 0 0 5px 0;
                padding: 0;
                background: inherit; } }
        @media screen and (max-width: 897px) {
          #flow .flow__box .inbox .flow__box__item .img {
            width: 35%; } }
        #flow .flow__box .inbox .flow__box__item .txt {
          width: 100%; }
          @media screen and (max-width: 897px) {
            #flow .flow__box .inbox .flow__box__item .txt {
              width: 60%; } }
        @media screen and (max-width: 897px) {
          #flow .flow__box .inbox .flow__box__item:last-of-type {
            padding: 0;
            margin: 0;
            border-bottom: none; } }
  #flow .line__box {
    max-width: 870px;
    margin: 60px auto 0 auto; }
    @media screen and (max-width: 897px) {
      #flow .line__box {
        margin: 20px 20px 0 20px; } }

/* ======================================
kiyaku
====================================== */
#kiyaku {
  padding: 90px 0; }
  @media screen and (max-width: 897px) {
    #kiyaku {
      padding: 40px 0; } }
  #kiyaku .kiyaku__headline {
    padding: 0 0 40px 0;
    max-width: 1140px;
    margin: 0 auto; }
    @media screen and (max-width: 897px) {
      #kiyaku .kiyaku__headline {
        padding: 0 20px 20px 20px; } }
    #kiyaku .kiyaku__headline h2 {
      font-size: 2.5rem;
      line-height: 1;
      font-weight: 900; }
      @media screen and (max-width: 897px) {
        #kiyaku .kiyaku__headline h2 {
          font-size: 2.0rem; } }
  #kiyaku .kiyaku__box {
    max-width: 1140px;
    margin: 0 auto; }
    @media screen and (max-width: 897px) {
      #kiyaku .kiyaku__box {
        padding: 0 20px; } }
    #kiyaku .kiyaku__box ul {
      margin: 0 0 0 30px; }
      #kiyaku .kiyaku__box ul li {
        list-style-type: disc;
        padding: 0 0 8px 0; }

/* ======================================
banner
====================================== */
#banner {
  padding: 90px 0;
  background: #18171C; }
  @media screen and (max-width: 897px) {
    #banner {
      padding: 20px 0 40px 0; } }
  #banner .banner__box {
    display: flex;
    justify-content: space-between;
    max-width: 780px;
    margin: 0 auto; }
    @media screen and (max-width: 897px) {
      #banner .banner__box {
        display: block;
        margin: 0 20px; } }
    @media screen and (max-width: 897px) {
      #banner .banner__box .banner__box__item {
        width: 100%;
        padding: 20px 0 0 0; } }