@charset "utf-8";

/**********************
news 一覧
**********************/
#news{
  background: #FDF5A4;
}
#news .header_pc{
  pointer-events: auto;
  opacity: 1;
}
#news .logo{
  display: none;
}
#news .menu_btn{
  display: none;
}
#news .news{
  overflow: hidden;
  padding: 240px 20px 132px;
}
#news .news::after{
  content: '';
  background: url(../../assets/img/news/news_bg_ico.svg);
  background-repeat: repeat-y;
  background-size: contain;
  top: 270px;
  transform: translate(-49.5%, 0);
  width: 94%;
  height: 100%;
}
#news .news_to-top-btn{
  max-width: 380px;
  margin: 60px auto 0;
  transform: translateX(18px);
}
#news .news_to-top-btn:hover{
  animation: newsToTopBtnHoverPush 0.5s ease-out;
}
#news .footer{
  position: relative;
  padding: 100px 20px 32px;
}
#news .footer::before{
  content: '';
  background: url(../../assets/img/news/news_cloud_ico.svg);
  background-repeat: repeat-x;
  background-size: cover;
  position: absolute;
  top: -18%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 19%;
}

@media screen and (min-width: 1921px){
  #news .news::after{
    background-position: top center;
  }
  #news .footer::before{
    background-size: contain;
  }
}
@media screen and (max-width: 768px){
  #news .logo{
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 38%;
    z-index: 999;
  }
  #news .menu_btn{
    position: fixed;
    top: 1.25%;
    right: 3%;
    display: block;
    width: 17.07%;
    z-index: 1;
  }
  #news .news{
    padding: 24.5% 2.5% 34%;
  }
  #news .news::after{
    background: url(../../assets/img/news/news_bg_ico_sp.svg);
    background-size: contain;
    top: 5.5%;
    transform: translate(-53%, 0);
    width: 124%;
  }
  #news .news_list{
    margin-top: 4%;
  }
  #news .news_to-top-btn{
    max-width: 400px;
    width: 66%;
    margin: 14.5% auto 0;
    transform: translateX(8%);
  }
  #news .news_to-top-btn:hover{
    animation: none;
  }
  #news .footer{
    padding: 12% 8.5% 5.5%;
  }
  #news .footer::before{
    background: url(../../assets/img/news/news_cloud_ico_sp.svg);
    background-repeat: repeat-x;
    background-size: cover;
    top: -9.5%;
    height: 9.8%;
  }
}

/**********************
news 記事詳細
**********************/
.news-content{
  font-family: "M PLUS Rounded 1c", serif;
  background: #fff;
  border-radius: 20px;
  padding: 96px 100px 72px;
  margin-top: 64px;
}
.news-content .tit{
  color: #333;
  font-size: 30px;
  font-weight: 700;
}
.news-content .head{
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.news-content .head .date{
  color: #333;
  font-size: 22px;
  font-weight: 800;
  margin-right: 10px;
}
.news-content .head .tag{
  color: #fff;
  background: #47a5f6;
  font-size: 18px;
  font-weight: 800;
  border-radius: 40px;
  padding: 1px 12px;
}
.news-content .img{
  text-align: center;
  margin-top: 40px;
}
.news-content .txt{
  font-size: 18px;
  line-height: 2;
  margin-top: 40px;
}
.news-detail_to-news{
  max-width: 530px;
  margin: 100px auto 0;
  transform: translateX(10px);
}
.news-detail_to-news:hover{
  animation: toNewsBtnHoverPush 0.5s ease-out;
}

@media screen and (max-width: 768px){
  #news .news.detail{
    padding: 24.5% 4.5% 18%;
  }
  .news-content{
    border-radius: 10px;
    padding: 10% 6% 11%;
    margin-top: 4%;
  }
  .news-content .tit{
    font-size: clamp(26px, 6.933vw, 30px);
  }
  .news-content .head{
    margin-top: 6%;
  }
  .news-content .head .date{
    margin-right: 3%;
  }
  .news-content .img{
    margin-top: 10%;
  }
  .news-content .txt{
    font-size: clamp(16px, 4.266vw, 18px);
    margin-top: 8%;
  }
  .news-detail_to-news{
    max-width: 400px;
    width: 98%;
    margin: 6% auto 0;
    transform: translateX(4%);
  }
  .news-detail_to-news:hover{
    animation: none;
  }
}

@keyframes toNewsBtnHoverPush{
  30% {
    transform: translateX(10px) scale(0.92);
  }
  100% {
    transform: translateX(10px) scale(1);
  }
}