﻿
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9999;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値 : 透過状態 */
  -webkit-transition: opacity .5s ease;  /* アニメーション時間は 0.8秒 */
  transition: opacity .5s ease;
}
body.fadeout::after {
  opacity: 1;
}
body.fadeout article{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}
#news h2 {
    margin: 0;
    padding: 0;
    font-size: 3.2rem;
    font-weight: 800;
}
#news h3 {
  font-size: 1.4rem;
  margin: 3% 0;
}
#news .contents {
  margin-left: 3%;
}
#news > .news-inner {
  width: 90vw;
  margin: 0 auto;
}
#news > .news-inner ul > li {
  display: flex;
  justify-content: left;
  border-bottom: 1px solid #a1a1a1;
  align-items: center;
  padding: 5% 3% 3%;
}
#news > .news-inner ul > li time {
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.1em;
  padding-right: 3%;
}
#news > .news-inner ul > li time .dd {
  font-size: 2.8rem;
  font-weight: 400;
}
#news > .news-inner ul > li time .mm-yy {
  font-size: 1.2rem;
  font-weight: 500;
}
#news > .news-inner ul > li span {
  font-size: 1.2rem;
  font-weight: 400;
  padding: 3px 15px;
  letter-spacing: 0.1em;
  border-radius: 40px;
}
#news > .news-inner ul > li span.award {
  color: #c35656;
  border: solid 1px #c35656;
}
#news > .news-inner ul > li span.release {
  color: #b19445;
  border: solid 1px #b19445;
}
#news > .news-inner ul > li span.notice {
  color: #5082ad;
  border: solid 1px #5082ad;
}

@media screen and (min-width: 481px) {
}
@media screen and (min-width: 960px) {

  /*--------------- news area start ---------------*/
  #news h3 {
    font-size: 1.4rem;
    margin: 10px 0;
  }
  #news .contents {
    margin-left: 0;
  }
  #news .news-contents {
    width: 100%;
  }
  #news > .news-inner {
    max-width: 1200px;
    width: 80vw;
    margin: 0 auto;
  }
  #news > .news-inner ul > li {
    border-bottom: 1px solid #a1a1a1;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 20px 20px 10px;
  }
  #news > .news-inner ul > li time {
    padding-right: 30px;
  }
  #news > .news-inner ul > li span {
    padding: 3px 15px;
  }
}
