@charset "UTF-8";
/*
news
hugging-nature.jp
*/

main .news{
   
}
.sec-category{
   margin-bottom: 5%;
}
.news .sec-category .category-list {
  display: flex;
   gap:5rem;
}
.news .sec-category .category-item {
  display: flex;
   list-style: none;
}
.news .sec-category .category-item a {
  display: block;
   padding-bottom: 5px;
   font-weight: bold;
}
.news .sec-category .category-item a.is-active{
   border-bottom: 2px solid #3F6B73;
}
@media screen and ( max-width:959px) {
   main .news{
      width: 90%;
   }
}
@media screen and ( max-width:639px) {
   main .news{
   }

   .news .sec-category .category-list {
      justify-content: center;
   }
}

/*================================
newsList
================================*/
 .newsList{
    max-width: 100%;
   /*padding: 1em 2% 1em;*/
} 
.newsBoxFlex{
   margin: 0 auto 3em;
   /*width: 90%;  */
   display: flex;
   flex-flow: wrap;
   justify-content:space-between;
   /*align-items: center;*/
}
.newsBoxCont{
   width: calc(100% / 2 - 10px);
   padding: 0 0 5rem;
   text-align: left;
   border-bottom: none;
}
.newsBoxCont a{
   display: flex;
   /*color: #fff;*/
}
.newsBoxCont a:hover{
   opacity: .6;
}
.newsBoxCont .image{
   width: 50%;
}
.newsBoxCont .txt{
   width: 50%;
   /*padding-left: 20px;*/
   display: flex;
   justify-content: center;
   flex-direction: column;
   
}.newsBoxCont .image img{
   width: 100%;
   /*border: 10px solid #fff;*/
}

.newsBoxCont p.day{
   text-align: left;
   padding: 0 0 5px;
   font-size: 1.4rem;
   line-height: 1.4em;
   font-weight: bold;
}
.newsBoxCont .news-category{
   padding-left: 24px;
}
.newsBoxCont p.ttl{
   text-align: left;
   padding: 0 0 0;
   font-size: 1.4rem;
   line-height: 1.5em;
}

.newsLink{
   text-align: right;
}


@media screen and ( max-width:959px) {
 .newsList{
   padding: 1em 0 0em;
} 
.newsBoxCont {
  width: 100%;
   }
.newsBoxCont .image{
   width: 20%;
}
.newsBoxCont .txt{
   width: 80%;
   }
}

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

   h1.contTtl{
   /*font-size: 6.5rem;*/
   }
   .news{
   padding: 5% 4% 10%;
   }
    .newsBoxFlex{
        /*flex-direction: column;*/
        width: 100%;
     }
     .newsBoxCont{
        width: 100%;
        padding: 20px 2%;
        text-align: left;
     }
.newsBoxCont .image{
   width: 30%;
}
.newsBoxCont .txt{
   width: 70%;
   }
}
   


/*================================
newsArticle
================================*/
.newsArticle{
   text-align: center;
   margin: 0 auto 30px;
}
/*.newsArticle .breadcrumbs{
   margin: 0 0 3em -5.5%;
   border: 1px #3F6B73 solid;
   border-left: none;
   border-top-right-radius: 30px;
   border-bottom-right-radius: 30px;
   text-align: left;
   line-height: 1.4em;
  padding: 1.5em 3em 1.5em 5.5%;
   width: fit-content;
}*/
.newsArticle .breadcrumbs a{
   border-bottom: 1px #3F6B73 solid;
}
.newsArticle .newsHeader{
	margin:20px auto 4.5em;
}
.newsArticle .newsHeader .newsTtl{
   /*display: inline-block;*/
	font-size:2.6rem;
	letter-spacing:0.10em;
	line-height:1.2em;
   text-align: left;
}
.newsArticle .newsHeader .newsDate{
   color: #020202;
	font-size:1.5rem;
	letter-spacing:0.10em;
	line-height:1.5em;
	/*padding:12px;*/
   text-align: left;
   margin-bottom: 3rem;
}
.newsArticle .newsHeader .newsDate span{
   margin-right: 3rem;
}
.newsArticle .newsDetail{
	font-size:1.3rem;
	line-height:2em;
   margin: 0 auto 60px;
   padding: 0 0 3em;
   max-width: 1000px;
   border-bottom: 1px #fff solid;
}
.newsArticle .newsDetail .newsEnd{
   background:#fff;
   font-size:1.3rem;
   letter-spacing: 0.1em;
   margin: 0 auto 20px;
   padding: 20px 0;
   text-align: center;
   width: 100%;
}
.newsArticle .newsDetail .newsComment{
}
.newsArticle .newsDetail img{
	height:auto;
}


.btnBoxC{
   text-align: center;
}
.btn {
  display: inline-block;
  border: 1px #3B4733 solid;
  border-radius: 30px;
  margin: 1em auto;
  padding: .7em 1.5em;
}

@media (max-width: 1599px) {
}
@media (max-width: 1279px) {
}
@media (max-width: 959px) {
    
}
@media (max-width: 639px) {
   .newsArticle .newsHeader .newsTtl{
	font-size:2.6rem;
   }
.newsArticle .newsDetail{
	text-align:left;
}
}