article {
  margin-bottom: 40px; }
  @media screen and (max-width: 767px) {
    article {
      margin-bottom: 10%; } }

#showcase {
  width: 100%;
  padding-top: 60%;
  position: relative;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    #showcase {
      padding-top: 70%; } }
  #showcase .veil {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
    transition-delay: 0.5s !important;
    transition-duration: 3s !important; }
  #showcase .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    background-size: cover;
    background-position: 50% 50%;
    transition: all 1200ms cubic-bezier(0.165, 0.84, 0.44, 1);
    /* easeOutQuart */ }
  #showcase .text {
    width: 100%;
    padding-bottom: 5%;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; }
    @media screen and (max-width: 767px) {
      #showcase .text {
        padding-bottom: 12%; } }
    #showcase .text h2 {
      margin-bottom: 1.5%;
      font-size: 3rem; }
      @media screen and (max-width: 767px) {
        #showcase .text h2 {
          margin-bottom: 3%;
          font-size: 1.8rem; } }
    #showcase .text p {
      font-size: 1.125rem;
      line-height: 2; }
      @media screen and (max-width: 767px) {
        #showcase .text p {
          padding-left: 5%;
          padding-right: 5%;
          font-size: 1rem;
          line-height: 1.4; } }
      #showcase .text p span {
        display: inline-block; }
  #showcase .telop {
    display: table;
    width: 63.8%;
    padding-top: 2%;
    padding-bottom: 2%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2; }
    #showcase .telop:after {
      content: "";
      display: table;
      clear: both; }
    @media screen and (max-width: 767px) {
      #showcase .telop {
        width: 70%;
        padding-top: 3%;
        padding-bottom: 3%; } }
    #showcase .telop .base {
      width: 75%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      border-radius: 0 100px 0 0;
      background: linear-gradient(90deg, #ff6600, #ff9900);
      transition: all 1200ms cubic-bezier(0.165, 0.84, 0.44, 1);
      /* easeOutQuart */ }
      #showcase .telop .base.para-in {
        width: 100%; }
      @media screen and (max-width: 767px) {
        #showcase .telop .base {
          border-radius: 0 40px 0 0; } }
    #showcase .telop .icon {
      display: table-cell;
      width: 22%;
      padding-left: 4%;
      padding-right: 4%;
      padding-top: 1%;
      padding-bottom: 1%;
      box-sizing: border-box;
      height: 100%;
      position: relative;
      z-index: 1;
      text-align: center;
      vertical-align: middle; }
      @media screen and (max-width: 767px) {
        #showcase .telop .icon {
          width: 20%; } }
      #showcase .telop .icon img {
        width: 100%;
        height: auto;
        vertical-align: top; }
    #showcase .telop .zone {
      display: table-cell;
      padding-left: 4.5%;
      padding-top: 1%;
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      border-left: 4px solid #fff;
      font-weight: bold;
      color: #fff;
      letter-spacing: 0.1em;
      vertical-align: middle; }
      @media screen and (max-width: 767px) {
        #showcase .telop .zone {
          border-left: 2px solid #fff; } }
      #showcase .telop .zone .num {
        margin-bottom: 1%;
        font-size: 1.125rem;
        text-align: left; }
        @media screen and (max-width: 767px) {
          #showcase .telop .zone .num {
            margin-bottom: 1%;
            font-size: 1.5rem; } }
      @media screen and (max-width: 767px) {
        #showcase .telop .zone p {
          margin-bottom: -5%; } }
      #showcase .telop .zone p .para {
        display: inline-block;
        width: 100%; }
      #showcase .telop .zone p > span.lt-half-sp {
        display: inline-block; }
      #showcase .telop .zone p .jp {
        display: inline-block;
        margin-bottom: 0%;
        font-size: 2.5rem; }
        @media screen and (max-width: 767px) {
          #showcase .telop .zone p .jp {
            margin-bottom: 1.4%;
            font-size: 1.8rem; } }
      #showcase .telop .zone p .en {
        display: inline-block;
        width: 100%;
        font-size: 0.875rem;
        letter-spacing: 0.05em;
        vertical-align: middle; }
        @media screen and (max-width: 767px) {
          #showcase .telop .zone p .en {
            font-size: 1.3rem; }
            #showcase .telop .zone p .en > span {
              display: inline-block; } }

#articles {
  padding: 8% 6% 3% 6%; }
  @media screen and (max-width: 767px) {
    #articles {
      padding: 10% 6% 3% 6%; } }
  #articles h3 {
    padding-left: 2%;
    margin-bottom: 5%;
    font-size: 1.5rem;
    line-height: 1.6;
    border-left: 6px solid #ff7e00; }
    @media screen and (max-width: 767px) {
      #articles h3 {
        margin-bottom: 6%;
        font-size: 1.3rem; } }
    #articles h3 span {
      display: inline-block; }
  #articles .articles-wrap {
    margin-bottom: 8%; }
    #articles .articles-wrap:after {
      content: "";
      display: table;
      clear: both; }
    #articles .articles-wrap:last-child {
      margin-bottom: 0; }
    @media screen and (max-width: 767px) {
      #articles .articles-wrap {
        margin-bottom: 12%; } }
    #articles .articles-wrap .article {
      width: 47.73%;
      margin-right: 4.54%;
      margin-bottom: 3.5%;
      float: left;
      border: 1px solid #ccc;
      box-sizing: border-box; }
      #articles .articles-wrap .article:nth-child(2n) {
        margin-right: 0; }
      @media screen and (max-width: 767px) {
        #articles .articles-wrap .article:nth-child(2n+1) {
          clear: both; } }
      #articles .articles-wrap .article:hover {
        opacity: 0.8 !important; }
        #articles .articles-wrap .article:hover .img .core {
          transform: scale(1.05); }
      #articles .articles-wrap .article .img {
        width: 100%;
        padding-top: 56.19%;
        position: relative;
        overflow: hidden; }
        #articles .articles-wrap .article .img .core {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 0;
          background-size: cover;
          background-position: 50% 50%;
          transition: all 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
          /* easeOutQuart */ }
        #articles .articles-wrap .article .img img {
          width: 100%;
          height: auto; }
      #articles .articles-wrap .article .text {
        width: 100%;
        padding-top: 38%;
        position: relative; }
        @media screen and (max-width: 767px) {
          #articles .articles-wrap .article .text {
            padding-top: 47%; } }
      #articles .articles-wrap .article p {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        padding: 4% 5% 5%;
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: bold; }
        @media screen and (max-width: 767px) {
          #articles .articles-wrap .article p {
            padding: 5% 5% 5%;
            font-size: 1.2rem;
            line-height: 1.2; } }
        #articles .articles-wrap .article p span {
          display: inline-block;
          margin-bottom: 2%;
          font-size: 1.125rem;
          font-weight: normal;
          vertical-align: top; }
          @media screen and (max-width: 767px) {
            #articles .articles-wrap .article p span {
              font-size: 1rem; } }

@media screen and (max-width: 767px) {
  .android #articles .articles-wrap .article p {
    font-size: 1.05rem; } }

@media screen and (max-width: 767px) {
  .android #articles .articles-wrap .article p span {
    font-size: 0.9rem; } }

#links ul {
  list-style: none; }
  #links ul li {
    margin-bottom: 2%;
    position: relative; }
    @media screen and (max-width: 767px) {
      #links ul li {
        margin-bottom: 3%; } }
    #links ul li a {
      display: block;
      position: relative;
      z-index: 1;
      border-radius: 50px 0 50px 0;
      overflow: hidden;
      box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.3); }
      @media screen and (max-width: 767px) {
        #links ul li a {
          border-radius: 25px 0 25px 0; } }
      #links ul li a:hover {
        opacity: 0.8 !important; }
    #links ul li#links1 .base {
      background-image: url(../../imgs/common/footer_links_grad1.png); }
    #links ul li#links1 .img {
      background-image: url(../../imgs/safe-secure/linkimg.jpg); }
    #links ul li#links2 .base {
      background-image: url(../../imgs/common/footer_links_grad2.png); }
    #links ul li#links2 .img {
      background-image: url(../../imgs/disaster/linkimg.jpg); }
    #links ul li#links3 .base {
      background-image: url(../../imgs/common/footer_links_grad3.png); }
    #links ul li#links3 .img {
      background-image: url(../../imgs/ict/linkimg.jpg); }
    #links ul li#links4 .base {
      background-image: url(../../imgs/common/footer_links_grad4.png); }
    #links ul li#links4 .img {
      background-image: url(../../imgs/rensulting/linkimg.jpg); }
    #links ul li .cover {
      width: 100%;
      padding-top: 3.5%;
      padding-bottom: 1.5%;
      position: relative;
      z-index: 2; }
      @media screen and (max-width: 767px) {
        #links ul li .cover {
          padding-top: 4%;
          padding-bottom: 2%; } }
      #links ul li .cover .wrap {
        display: table;
        width: 100%; }
      #links ul li .cover .icon {
        display: table-cell;
        width: 14%;
        padding-left: 4%;
        height: 100%;
        position: relative;
        text-align: center;
        vertical-align: middle; }
        #links ul li .cover .icon img {
          width: 100%;
          height: auto; }
      #links ul li .cover .zone {
        display: table-cell;
        padding-left: 4%;
        box-sizing: border-box;
        font-weight: bold;
        color: #fff;
        letter-spacing: 0.1em;
        vertical-align: middle; }
        @media screen and (max-width: 767px) {
          #links ul li .cover .zone {
            padding-left: 3.5%; } }
        #links ul li .cover .zone .lt-half-sp {
          display: block; }
        #links ul li .cover .zone .num {
          margin-bottom: 0.5%;
          font-size: 1.125rem;
          text-align: left; }
          @media screen and (max-width: 767px) {
            #links ul li .cover .zone .num {
              margin-bottom: 0%;
              font-size: 1.2rem; } }
        #links ul li .cover .zone p .jp {
          display: inline-block;
          margin-bottom: 0.5%;
          font-size: 2.5rem; }
          @media screen and (max-width: 767px) {
            #links ul li .cover .zone p .jp {
              margin-bottom: 0.5%;
              font-size: 1.5rem; } }
          #links ul li .cover .zone p .jp > span {
            display: inline-block; }
        #links ul li .cover .zone p .en {
          display: inline-block;
          font-size: 0.9rem;
          letter-spacing: 0.05em;
          vertical-align: middle; }
          #links ul li .cover .zone p .en > span {
            display: inline-block; }
      #links ul li .cover .arrow {
        width: 55.5%;
        transform: translate(-20%, 0);
        transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
        /* easeOutQuart */ }
        #links ul li .cover .arrow.para-in {
          transform: translate(0, 0); }
        #links ul li .cover .arrow img {
          width: 100%;
          height: auto;
          vertical-align: top; }
    #links ul li .base {
      width: 62%;
      padding-top: 20.5%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      background-size: 100% 100%;
      background-repeat: no-repeat; }
      @media screen and (max-width: 767px) {
        #links ul li .base {
          padding-top: 24%;
          background-size: 100% 100%; } }
      #links ul li .base img {
        width: 100%;
        height: auto; }
    #links ul li .img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
      background-size: cover;
      background-position: 50% 50%; }

article .base-wrap .base-inwrap {
  border: 2px solid #f65a5a; }
  @media screen and (max-width: 767px) {
    article .base-wrap .base-inwrap {
      border: 1px solid #f65a5a; } }

#showcase .bg {
  background-image: url(../../imgs/rensulting/mainimg.jpg); }

#showcase .telop .base {
  background: linear-gradient(90deg, #ca221f, #f65a5a); }

#articles h3 {
  border-left: 6px solid #f65a5a; }
  @media screen and (max-width: 767px) {
    #articles h3 {
      border-left: 2px solid #f65a5a; } }