@charset "UTF-8";
/* CSS Document */
/* +++++++++++++++++++++++++++++++++++++

こんな時はニッケ商事！　css

++++++++++++++++++++++++++++++++++++++ */
.nikke_wrap {
  width: 100%;
  min-width: 1000px;
  padding-top: 90px;
  padding-bottom: 10px;
  background-image: url("../img/nikke/bg_u_run.png");
  background-repeat: no-repeat;
  background-size: 55%;
  background-position: bottom right;
  background-color: #b9d8e5;
  backgroundcolor: -moz-linear-gradient(-45deg, #b9d8e5 0%, #eaf5f7 50%, #c8e1e7 100%);
  backgroundcolor: -webkit-linear-gradient(-45deg, #b9d8e5 0%, #eaf5f7 50%, #c8e1e7 100%);
  backgroundcolor: linear-gradient(135deg, #b9d8e5 0%, #eaf5f7 50%, #c8e1e7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9d8e5', endColorstr='#c8e1e7',GradientType=1 ); }
  @media only screen and (max-width: 768px) {
    .nikke_wrap {
      min-width: 100%;
      padding-bottom: 10px;
      background-size: 90%; } }

.wrap_inner {
  width: 1000px;
  margin: 0 auto 100px;
  text-align: center;
  overflow: hidden;
  /*h2*/
  /*.u_run_area*/ }
  @media only screen and (max-width: 768px) {
    .wrap_inner {
      width: 90%; } }
  .wrap_inner h2 {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: #ed0100;
    display: inline-block;
    margin: 0 auto 50px;
    background-color: #fff;
    padding: 20px 30px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.05);
    position: relative; }
    @media only screen and (max-width: 768px) {
      .wrap_inner h2 {
        font-size: 20px;
        padding: 10px 10px;
        letter-spacing: 0.1em;
        margin-bottom: 30px; } }
    .wrap_inner h2:after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 15px 15px 0 0px;
      border-color: #fff transparent transparent transparent; }
  .wrap_inner .u_run_area {
    height: 200px;
    width: 750px;
    margin: 0 auto -50px;
    background: url("../img/nikke/g_bg.png") center bottom no-repeat;
    background-size: contain;
    /*img*/ }
    @media only screen and (max-width: 768px) {
      .wrap_inner .u_run_area {
        width: 100%;
        height: 25vw;
        margin-bottom: 0; } }
    .wrap_inner .u_run_area img {
      float: left;
      margin-right: 35px; }
      @media only screen and (max-width: 768px) {
        .wrap_inner .u_run_area img {
          margin-right: 2vw; } }
      .wrap_inner .u_run_area img:nth-of-type(1) {
        width: 88px;
        height: 105px;
        animation: rotate2 2.0s 0s infinite; }
        @media only screen and (max-width: 768px) {
          .wrap_inner .u_run_area img:nth-of-type(1) {
            width: 13vw;
            height: 14vw; } }
      .wrap_inner .u_run_area img:nth-of-type(2) {
        width: 110px;
        height: 115px;
        animation: rotate2 2.0s 1.0s infinite; }
        @media only screen and (max-width: 768px) {
          .wrap_inner .u_run_area img:nth-of-type(2) {
            width: 15vw;
            height: 15vw; } }
      .wrap_inner .u_run_area img:nth-of-type(3) {
        width: 82px;
        height: 105px;
        animation: rotate2 2.0s 2.0s infinite; }
        @media only screen and (max-width: 768px) {
          .wrap_inner .u_run_area img:nth-of-type(3) {
            width: 12vw;
            height: 14vw; } }
      .wrap_inner .u_run_area img:nth-of-type(4) {
        width: 112px;
        height: 116px;
        animation: rotate2 2.0s 0s infinite; }
        @media only screen and (max-width: 768px) {
          .wrap_inner .u_run_area img:nth-of-type(4) {
            width: 15vw;
            height: 15vw; } }
      .wrap_inner .u_run_area img:nth-of-type(5) {
        width: 82px;
        height: 111px;
        margin-right: 50px;
        animation: rotate2 2.0s 1.0s infinite; }
        @media only screen and (max-width: 768px) {
          .wrap_inner .u_run_area img:nth-of-type(5) {
            width: 12vw;
            height: 14vw;
            margin-right: 2vw; } }
      .wrap_inner .u_run_area img:nth-of-type(6) {
        width: 76px;
        height: 110px;
        margin-right: 0;
        animation: rotate2 2.0s 2.0s infinite; }
        @media only screen and (max-width: 768px) {
          .wrap_inner .u_run_area img:nth-of-type(6) {
            width: 12vw;
            height: 15vw; } }
    .wrap_inner .u_run_area + p {
      font-weight: 400;
      line-height: 2em;
      letter-spacing: 0.1em;
      margin-bottom: 50px; }
      @media only screen and (max-width: 768px) {
        .wrap_inner .u_run_area + p {
          text-align: left;
          line-height: 1.8em;
          margin-bottom: 20px; }
          .wrap_inner .u_run_area + p br {
            display: none; } }

/*.wrap_inner*/
.needs_box, .needs_box_mr {
  width: 235px;
  height: 286px;
  margin-bottom: 50px;
  margin-right: 20px;
  float: left;
  /*.link_area a*/ }
  @media only screen and (max-width: 768px) {
    .needs_box, .needs_box_mr {
      width: 100%;
      float: none;
      margin-right: 0;
      height: auto;
      margin-bottom: 20px; } }
  .needs_box .link_area a, .needs_box_mr .link_area a {
    display: block;
    box-sizing: border-box;
    padding: 30px 30px 0;
    width: 100%;
    height: 200px;
    position: relative;
    background-color: #fff;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: 0.3s;
    /*img*/ }
    @media only screen and (max-width: 768px) {
      .needs_box .link_area a, .needs_box_mr .link_area a {
        padding: 15px 15px 15px;
        height: auto;
        margin-bottom: 10px; } }
    .needs_box .link_area a:after, .needs_box_mr .link_area a:after {
      content: "";
      width: 20px;
      height: 20px;
      background-color: #2b2b2b;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 2; }
    .needs_box .link_area a:before, .needs_box_mr .link_area a:before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 4px 0 4px 6.9px;
      border-color: transparent transparent transparent #ffffff;
      position: absolute;
      bottom: 6px;
      right: 6px;
      z-index: 3; }
    .needs_box .link_area a:hover, .needs_box_mr .link_area a:hover {
      transform: translateY(5px);
      box-shadow: none;
      opacity: 0.8; }
    .needs_box .link_area a img, .needs_box_mr .link_area a img {
      display: block;
      width: 60px;
      height: 60px;
      margin: 0 auto 20px; }
      @media only screen and (max-width: 768px) {
        .needs_box .link_area a img, .needs_box_mr .link_area a img {
          margin-bottom: 10px; } }
    .needs_box .link_area a h3, .needs_box_mr .link_area a h3 {
      font-size: 14px;
      text-align: left;
      font-weight: 500;
      line-height: 1.6em; }
  .needs_box .link_area + p, .needs_box_mr .link_area + p {
    text-align: left;
    font-weight: 400;
    border-left: 1px solid #79949e;
    padding-left: 5px;
    line-height: 1.5em; }

/*.wrap_inner .needs_box*/
.needs_box_mr {
  width: 235px;
  height: 286px;
  margin-bottom: 50px;
  float: left;
  margin-right: 0; }
  @media only screen and (max-width: 768px) {
    .needs_box_mr {
      width: 100%;
      float: none;
      margin-right: 0;
      height: auto;
      margin-bottom: 20px; } }

@keyframes rotate2 {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(5deg); }
  50% {
    transform: rotate(0deg); }
  75% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(0deg); } }