@charset "UTF-8";

body{
    position: relative;
}

footer{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
}
.main-container{
  position:relative;
  width: 100%;
  padding: 0 40px 100px;
  overflow:hidden;
}

@media screen and (max-width : 640px) {
.main-container{
  position:relative;
  width: 100%;
  padding: 0 20px 50px;
  overflow:hidden;
}
    
}




/************************************
   メインタイトルセクション　ここから　
************************************/    

.main-title{
    width: 100%;
    height: 250px;
    background: linear-gradient(to top,  #02366c, #02428e);
    position: relative;
}

.main-title .position{
  width:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center
}

.main-title h1{
    font-size: 3.3rem;
    color:#fff;
    font-weight: 500;
    display: inline-block;
    border-bottom: 1px solid #fff;
}

.main-title p{
    font-size: 2.6rem;
    font-family: "Barlow Condensed", serif;
    font-weight: 500;
    color: #fff;
}


@media screen and (max-width : 768px) {

.main-title{
    height: 200px;
}

.main-title h1{
    font-size: 2.6rem;

}

.main-title p{
    font-size: 2.1rem;

}





}

@media screen and (max-width : 640px) {



.main-title h1{
    font-size: 2.4rem;
    /* width:100%; */
}
.main-title p{
    font-size: 2rem;

}
 
}




/************************************
   メインタイトルセクション　ここまで　
************************************/    
    

.topics-container{
    width: 100%;
    max-width: 1100px;
    padding: 30px 0 100px;
    margin: 0 auto;
}



.topics-container ul{
    width: 100%;

}

.topics-container ul li{
      border-top: 1px solid #e4e4e4;
}
.topics-container ul li:nth-child(10){
      border-bottom: 1px solid #e4e4e4;
}

.topics-container ul li a{
    display:block;
   padding: 40px 5px;
   display:flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   -webkit-box-align: stretch;
   -webkit-align-items: stretch;
   -ms-flex-align: stretch;
   align-items:stretch;
   flex-wrap: wrap;
    background-color:#fff;
}




.topics-container ul li a:hover{
  opacity: 0.7;
  transition: 0.5s ease-in-out;
    background-color:#f7f7f7;
}

.topics-container ul li .date{
   width: 9%;
   float: left;
    font-family: "Barlow Condensed", serif;
    font-weight: 400;
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
}

.topics-container ul li .category{
    width: 14%;
    float: left;
}

.topics-container ul li .category span{
    display:inline-block;
    font-size: 1.2rem;
    line-height:1;
    font-weight:500;
    width:80%;
    text-align:center;
    padding:3px 10px 5px;
    color: #fff;
}

.topics-container ul li .category .release{
        background-color: #ff8c00;
}

.topics-container ul li .category .release:before{
       content: "プレスリリース"
}

.topics-container ul li .category .news{
    background-color: #00c7cf;
}
.topics-container ul li .category .news:before{
       content: "ニュース"
}
.topics-container ul li .text{
   width: 77%;
    float: left;
    font-size: 1.6rem;
    line-height:2;
}

@media screen and (max-width : 768px) {
.topics-container ul li{
}
    
.topics-container ul li .date{
   width: 12%;
   font-family: "Barlow Condensed", serif;
   font-weight: 400;
   font-size: 1.6rem;
   letter-spacing: 0.1rem;
}
.topics-container ul li .text{
   width: 68%;
    font-size: 1.4rem;
    line-height:2.5;
}
.topics-container ul li .category{
    width: 20%;
    float: left;
}

.topics-container ul li .category span{
    font-size: 1.2rem;
}
}



@media screen and (max-width : 640px) {
.topics-container ul li{
   /* padding: 20px 5px; */
}
.topics-container ul li .date{
   width: 24%;
   font-size: 1.4rem;
   padding:5px 0 0 ;
}
.topics-container ul li .category{
    width: 60%;
    float: left;
    margin:0 0 10px;
}
.topics-container ul li .category span{
    font-size: 1.2rem;
    width:65%;

}
.topics-container ul li .text{
   width: 100%;
    float: left;
    font-size: 1.6rem;
    line-height:1.6;
}

}