/*--------- sp ---------*/
.inner{
  padding: var(--px85) 0;
  width: min(90%,1740px);
  margin: 0 auto;  
  
  .titles{
    color: #fff;
    
    h3{
      font-size: var(--font-size48);
      font-weight: var(--ExtraBold);
      position: relative;
      padding-bottom: var(--px40);
      
      &:after{
        position: absolute;
        content: '';
        display: inline-block;
        width: 2.1em;
        bottom: 0;
        left: 0;
        border-bottom: solid clamp(1px,0.2vw,2px) #fff;
      }
    }
    p{
      padding-top: var(--px40);
      width: min(100%,1130px);
      font-size: var(--font-size18);
      line-height: 1.7;
      
      a{
        font-size: var(--font-size24);
        font-weight: var(--Bold);
        padding: 8px 12px;
        border: 1px solid #fff;
        display: block;
        width: min(60%,380px);
        position: relative;

        &:after{
          position: absolute;
          content: "";
          right: 21px;
          top: calc(.5em + 8px);
          /*ボーダー矢印*/
          display: inline-block;
          width: 11px;
          height: 11px;
          border-top: 1px solid #ffffff;
          border-right: 1px solid #ffffff;
          transform: rotate(45deg);
        }
      }
    }
   
    .titles_img{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, auto);
      grid-gap: 14px;
      padding-top: var(--px40);
      text-align: center;
      
      img{
        padding-bottom: 5px;
      }
    }
  }

    
  .info_box{
    padding: var(--px80) 0 0;
    width: min(100%,926px);

    a{
        position: relative;
        &:after{
          position: absolute;
          content: "";
          right: 25px;
          bottom: 42%;
          /*ボーダー矢印*/
          display: inline-block;
          width: 11px;
          height: 11px;
          transform: rotate(45deg);
          transition: .3s;
        }  
        &:hover{
          &:after{
            right: 15px;
          }
        }

      }

    li{
      border: 1px solid #fff;
      margin-bottom: var(--px20);
      padding: var(--px20) 0;
    }

    .date{
      color: #fff;
      margin: 2px 0;
      padding: 0 var(--px20);
    }
    .text{
      padding: 0 57px 0 var(--px20);
      color: #fff;
      font-weight: var(--Bold);
      margin: 2px 0;
      /*テキスト・・・*/
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }
  
  
  
  
  
 
}



@media (min-width:768px){
/*---------tab ---------*/
.inner{  
  .titles{
    .titles_img{
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(1, auto);
      grid-gap: 10px;
    }
  }
}

  
  
}
@media (min-width:1024px){
/*--------- pc ---------*/
.inner{ 
  .titles{
    .titles_img{
      grid-gap: 24px;
    }
  }
}


@media (min-width:1280px){
/*----- 1280 -----*/


  
}

@media (min-width:1480px){  


  
}