/* CSS Document */
@charset "UTF-8";




/*TOPICS LINK===============*/
.topicsLinkWrapper{
display: flex;
justify-content: space-between;
width: 524px;
margin: 0 auto 100px;
}

/*TOPICS Article=================*/
.topicsOne{
margin: 0 30px 160px;
}

.topicsArticle{
max-width: 600px;
box-sizing: border-box;
margin: 0 auto; 
}

.topicsImg img{
width: 100%;
height: auto;
margin-bottom: 80px;
}

/*TOPICS DETAILS================*/
.topicsDetails{
margin:80px 50px 100px;
}
.topicsDetaileInner{
display: flex;
margin-bottom: 12px;
}
.topicsPost{
font-family: 'Lato', sans-serif;
font-size: 13px;
text-align: left;
letter-spacing: 1.2px;
color: #8D858C;
margin-right: 10px;
}
.topicsStore{
font-family: 'Lato', sans-serif;
font-size: 10px;
font-weight: 300;
padding: 0 3px;
height: 12px;
line-height: 12px;
letter-spacing: 1.2px;
background-color: #8D858C;
color: #fff;
margin-right: 10px;
}

.topicsTitle{
font-size: 20px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 1.2px;
text-align: left;
margin-bottom: 40px;
}
.topicsCopy,.topicsCopy p{
font-size: 14px;
font-weight: 300;
letter-spacing: 1px;
line-height: 1.6;
text-align: justify;
}
.topicsCopy p{
margin-bottom: 20px;
}
.topicsCopy a{
font-weight: 500;
}

/*TOPICS NAVIGATION-ARROW=================*/
.topicsNavigation{
display: flex;
justify-content: space-between;
font-size: 10px;
font-weight: 200;
margin: 0 50px;
}
.topicsNavigation .arrow-text, .topics-top a{
display: block;
font-size: 10px;
padding: 8px 0px;
letter-spacing: 1.2px;
margin-bottom: 0;
color: #8D858C;
font-family: 'Lato', sans-serif;
}	
.topicsNavigation .arrow{
width: 60px;
background-color: #8D858C;
}
.topicsNavigation .arrow::before{
width: 6px;
background-color: #8D858C;
transform: rotateZ(70deg);
transform-origin: right bottom;
}

.topicsNavigation .prev .arrow{
transform-origin: right bottom;
}
.topicsNavigation .prev .arrow::before{
left: 0;
transform: rotateZ(-70deg);
transform-origin: left bottom;
}

.topicsNavigation .more:hover .arrow{
animation: arrow .5s ease-out forwards;
}
@keyframes arrow{
  0%{transform: scale(0, 1);}
  100%{transform: scale(1, 1);}
}


.topicsNavigation .blind .arrow-text{
opacity: .3;
}
.topicsNavigation .blind .arrow{
display: none;
}

/*下線============================*/
.underScore{
display: block;
height: 1px;
width: 100%;
background-color: #8D858C;
transform: scale(0, 1);
transition: .5s;
}
.topics-top:hover .underScore{
transform: scale(1, 1);
}

/*TOPICS単独ページ slick===============================*/
div.newspostslider{
margin: 0 0; 
width: 100%; 
position: relative;
}
div.newspostslider ul{
display: block; 
width: 100%; 
text-align: center; 
position: relative; 
padding: 0;
}
div.newspostslider ul li{
display: inline-block; 
margin: 0 10px; 
vertical-align: top; 
padding: 0;
}
div.newspostslider ul li img{
height: 160px; 
width: auto;
object-fit: cover;
}
div.newspostslider ul li:not(.slick-current){
cursor: pointer;
}
div.newspostslider div.slick-list{
padding: 0!important;
}
div.newspostslider ul.slick-dots{
clear: both; 
padding: 25px 0 0;
}
div.newspostslider ul.slick-dots li{
float: none; width: 20px; height: 2px; margin: 0 4px; background: #DDD; color:#DDD!important;display: inline-block; text-indent: -999px; overflow: hidden; cursor: pointer;
}
div.newspostslider ul.slick-dots li.slick-active{background: #333;
}
div.newspostslider ul.slick-dots li button{
width: 20px; height: 2px;
}
div.newspostslider ul.slick-dots li button:before{
width: 20px; height: 2px;border-radius:0;
}

@media screen and (max-width: 600px){
div.newspostslider ul li img{height: 200px;}
}
@media print, screen and (min-width:768px){
div.newspostslider ul li img{height: 300px;}
}
@media print, screen and (min-width:769px){
div.newspostslider ul li img{
height: 400px;
}
}
/*
@media screen and (min-width: 1500px){
div.newspostslider ul li img{height: 500px;}
}
*/

.topics-top {
  margin: auto;
}

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

  /*TOPICS Article=================*/
  .topicsOne{
  margin: 0 30px 100px;
  }
  .topicsImg img{
  margin-bottom: 60px;
  }
  .topicsDetails{
  margin: 50px 0 50px;
  }
  .topicsTitle{
  margin-bottom: 24px;
  }
  .topicsNavigation{
  margin: 0;
  }

}/*MQ 601 end*/