#service {
  background: url(../images/index/bg_service.png) right bottom no-repeat;
  padding: 0px 0 100px; }
  #service ul {
    display: flex;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between; }
    #service ul li {
      width: 23.4%; }
      #service ul li a {
        display: block;
        position: relative; }
        #service ul li a:before {
          content: "";
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.37);
          position: absolute;
          z-index: 1; }
        #service ul li a h3 {
          color: #fff;
          position: absolute;
          top: 40px;
          left: 15px;
          z-index: 2; }
          #service ul li a h3 span {
            display: block; }
          #service ul li a h3 .en {
            font-size: 14px;
            font-size: 1.4rem;
            letter-spacing: 0.1em;
            line-height: 1;
            padding-top: 0.4em; }
          #service ul li a h3 .jp {
            font-size: 28px;
            font-size: 2.8rem;
            line-height: 1.08; }
        #service ul li a p {
          z-index: 3;
          text-align: right;
          color: #fff;
          font-size: 14px;
          font-size: 1.4rem;
          line-height: 1;
          letter-spacing: 0.1em;
          padding: 10px;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%; }
          #service ul li a p.red {
            background: transparent linear-gradient(90deg, #CB5454 0%, #CC0000 49%, #CB5454 100%) 0% 0% no-repeat padding-box; }
          #service ul li a p.blue {
            background: transparent linear-gradient(90deg, #489AD8 0%, #006FC2 49%, #489AD8 100%) 0% 0% no-repeat padding-box; }
          #service ul li a p.orange {
            background: transparent linear-gradient(90deg, #C86C4A 0%, #DB3C00 49%, #C86C4A 100%) 0% 0% no-repeat padding-box; }
          #service ul li a p.yellow {
            background: transparent linear-gradient(90deg, #DCD67E 0%, #ECDD00 49%, #DCD67E 100%) 0% 0% no-repeat padding-box; }
        #service ul li a img {
          width: 100%; }
      #service ul li p {
        line-height: 1.64;
        font-size: 14px;
        font-size: 1.4rem;
        padding-top: 10px; }

@media screen and (max-width: 768px) {
  #service {
    background: none;
    padding: 0px 15px 15px; }
    #service ul li {
      width: 100%;
      padding-bottom: 35px; }
      #service ul li a h3 {
        top: 15px;
        left: 10px;
        z-index: 2; }
        #service ul li a h3 .en {
          font-size: 10px;
          font-size: 1.0rem; }
        #service ul li a h3 .jp {
          font-size: 17px;
          font-size: 1.7rem; }
      #service ul li a p {
        font-size: 12px;
        font-size: 1.2rem;
        padding: 5px; }
      #service ul li p {
        font-size: 13px;
        font-size: 1.3rem;
        padding-top: 10px; } }