@charset "UTF-8";

.hiOctane {
        margin-top: 6px;
        position: relative;
        background: url(../img/top/bg_hioctane01.jpg) center top / 100% 376px no-repeat;
        z-index: 0;
        margin-bottom: 100px;
    }
    
    .hiOctane::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 0;
        width: 100%;
        height: 6px;
        background-image: linear-gradient(90deg, #6c6c6c 0%,#e1e1e1 50%, #6c6c6c 100%);
    }
    
    .hiOctane .newArticle {
        position: absolute;
        top: 360px;
        left: 0;
        right: 0;
        width: 100%;
        height: 392px;
        max-width: 1200px;
        margin: 0 auto;
        background: url(../img/top/bg_hioctane02.jpg) center top / cover;
        z-index: 1;   
    }
    
    .hiOctane .contTitHead {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        height: 118px;
    }
    
    .hiOctane .contTit {
        position: relative;
        padding: 0;
        color: #fff;
        font-size: 3.0rem;
        line-height: 1;
        letter-spacing: .1em;
    }
    
    .hiOctane .contTit::before {
        content: none;
    }
    
    .hiOctane .contTit::after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        width: 44px;
        height: 7px;
        margin: 0 auto;
        background: #c30901;
    }
    
    .hiOctane .newArticle .newArticleTitHead {
        font-family: 'Times','Times New Roman',sans-serif;
        position: absolute;
        top: 40px;
        padding-left: 30px;
        font-size: 2.4rem;
        font-weight: 200;
        font-style: italic;
        line-height: 1;
        letter-spacing: .05em;
    }
    
    .hiOctane .newArticle .newArticleTitHead::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 0;
        width: 14px;
        height: 6px;
        background: #000;
    }
    
    .hiOctane .newArticle .naContBtn {
        font-family: 'Times','Times New Roman',sans-serif;
        position: absolute;
        bottom: 27px;
        left: 0;
        right: 0;
        width: 74.561%;
        margin: 0 auto;
    }
    
    .hiOctane .newArticle .naContBtn a {
        display: block;
        position: relative;
        height: 40px;
        color: #fff;
        font-size: 1.5rem;
        text-align: center;
        line-height: 40px;
        letter-spacing: .1em;
        text-decoration: none;
        background: #000;
        transition: all .3s ease;
    }
    
    .naContBtn a::before {
        content: url(../img/common/arrow_current.png);
        position: absolute;
        top: -3px;
        right: 15px;
        line-height: 40px;
    }
    
   .hiOctane .articlesList {
       position: relative;
       z-index: 2;
   }
   
   .hiOctane .articlesList ul {
       width: 100%;
       max-width: 1140px;
       margin: 0 auto;
   }
   
   .hiOctane .articlesList ul li {
       clear: none;
       margin-bottom: 0;
   }

  .hiOctane .articlesList ul li:first-of-type a:hover {
    opacity: 1;
  }
   
   .hiOctane .articlesList li:nth-of-type(2n) {
        margin-left: 0;
    }
   
   .hiOctane .articlesList ul li:first-of-type {
       float: none;
       width: 100%;
       max-width: 1200px;
       margin: 0 auto 55px;
       padding: 0;
       overflow: hidden;
   }
   
   .hiOctane .articlesList ul li:first-of-type a {
       display: block;
       overflow: hidden;
   }
   
   .hiOctane .articlesList ul li:first-of-type a .img {
        float: right;
        width: 46.666%;
        height: 274px;
        padding-top: 0;
        border: 1px solid #fff;
        box-sizing: border-box;
   }
   
   .hiOctane .articlesList ul li:first-of-type a .txtBox {
       float: left;
       width: 44.5%;
       padding-top: 30px;
   }
   
   .hiOctane .articlesList ul li:first-of-type a .txtBox .cate {
      min-width: 133px;
      display: inline-block;
      vertical-align: top;
      position: relative;
      margin: 0 15px 15px 0;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      letter-spacing: .1em;
      color: #fff;
      background: rgba(195,9,1,.8);
      position: static;
   }
   
   .hiOctane .articlesList ul li:first-of-type a .txtBox .data {
       display: inline-block;
       margin: 0;
       padding: 7px 0 6px;
       color: #fff;
       font-size: 1.4rem;
       line-height: 1;
   }
   
   .hiOctane .articlesList ul li:first-of-type a .txtBox .tit {
       margin-bottom: 12px;
       padding-left: 15px;
       color: #fff;
       font-size: 2.0rem;
       line-height: 1.2;
   }
   
   .hiOctane .articlesList ul li:first-of-type a .txtBox .txt {
       padding-left: 15px;
       color: #fff;
   }
   
   .hiOctane .articlesList ul li:not(:first-of-type) {
       width: 23.508%;
   }
   
   .hiOctane .articlesList ul li:not(:first-of-type) a {
        width: 100%;
   }
   
   .hiOctane .articlesList ul li:not(:first-of-type) a .img {
        padding-top: 44.444%;
   }
   
   .hiOctane .articlesList ul li:not(:first-of-type) a .txtBox {
       position: relative;
       max-height: 105px;
   }
   
   .hiOctane .articlesList ul li:not(:first-of-type) a .txtBox .cate {
      min-width: 133px;
      display: inline-block;
      vertical-align: top;
      position: relative;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      letter-spacing: .1em;
      color: #fff;
      background: rgba(195,9,1,.8);
      position: absolute;
      top: -30px;
   }
   
   .hiOctane .articlesList ul li:not(:first-of-type) a .txtBox .tit {
       font-size: 1.4rem;
   }
   
   .hiOctane .articlesList ul li:not(:first-of-type) a .txtBox .txt {
       display: none;
   }
   
   .hiOctane .articlesList ul li:nth-of-type(n+3) {
       margin-left: 1.675%;
   }