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

body {
  background-image: url("../img/news_bg02.jpg");
  background-repeat: no-repeat;
  background-position: top 300px right 12%;
  background-size: 350px;
}

header {
  width: 100%;
  margin: auto;
  height: auto;
  background-color: inherit;
}

.firstview {
  width: 1024px;
  margin: auto;
  position: relative;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
}

.circle_inner {
  background-color: #444444;
  border-radius: 100%;
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.circle_inner > div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.circle span {
  color: white;
  letter-spacing: 1px;
}
.ja{
  margin-top: 0.25rem;
}
.eng {
  font-family: anisette-petite, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 3rem;
}

#logo {
  height: 82px;
}

main {
  width: 1024px;
  margin: auto;
}

.news_wrap {
  width: 100%;
  margin: 10% 0;
}

ul {
  list-style: none;
  width: 100%;
}

.news_wrap ul li {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
  transition: .5s;
  display: flex;
  align-items: center;
}

.date_wrap {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #b2b2b2;
  padding-right: 30px;
}

.year {
  font-size: 14px;
  font-family: 'M PLUS 1p', sans-serif;
}

.date {
  font-size: 24px;
  font-family: 'M PLUS 1p', sans-serif;
}

.news_wrap ul li p {
  padding: 16px 0px 16px 30px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
}

.arrow {
  width: 0.75em;
  position: absolute;
  right: 20px;
  transition: .5s;
  display: none;
}

.arrow img {
  width: 100%;
}

footer {
  background-color: transparent;
  width: 100%;
}

.footer_wrap {
  width: auto;
}

@media screen and (max-width:1024px) {
  main, header {
    width: 100%;
  }
  .firstview {
    width: 100%;
  }
  .firstview img {
    width: 100%;
  }
  body {
    background-position: top 100% left;
  }
  .news_wrap ul {
    padding: 0 2%;
    width: 96%;
  }
}