@charset "UTF-8";

html {
  font-size: 100%;
}
img {
  max-width: 100%;/*画像が画面の横幅からはみ出るのを防ぐ*/
}
.wrapper {
  max-width: 1200px;/*最大幅を決めることで縮小しても同じサイズにできる*/
  padding: 0 16px;
  margin: 0 auto;/*中央に配置*/
}
li {
  list-style: none;
}

/*header*/
.site-title {
  font-family: sans-serif;
  font-weight: normal;
  font-size: 25px;
  margin-bottom: 20px;
  margin-left: 100px;
}
.header ul {
  display: flex;
  justify-content: flex-start;
}
.header li {
  text-decoration: none;
  color: #ffffff;
  padding: 10px 60px 10px 0;
  font-size: 0.875rem;
}
.header a {
  text-decoration: none;
  color: #ffffff;
}
.header nav{
  background-color: #333333;
  margin-bottom: 40px;
}
.popular-posts {
  position: sticky;
  top:0rem;
  background-color: #ffffff;
}
@media(max-width:700px){
 .wrapper {
   overflow: hidden;
 }
 .site-title {
   margin-left: 20px;
 }
}
/* topic*/
.topic {
  display: flex;
  justify-content: space-between;
}
.topic article {
  width: 32%;
}
.center {
  text-align: center;
  font-size: 14px;
  font-weight: lighter;
}

.topic p {
  font-weight: bold;
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 15px;
}
a {
  color: #000000;
}
@media(max-width:700px){
.topic {
  flex-direction: column;
}
.topic article{
  width: 100%;
}
}

/*article*/
.container {
  display: flex;
  justify-content: space-between;/*この場合子要素が両端に揃えられるので自動的に2つのボックスの間に余白がうまれる*/
  margin-top: 60px;
}
article {
  width:75%;/*単位を％にすることで画面幅が変わっても伸縮するようになる*/
}
h2{
  font-size: 23px;
  margin-bottom: 15px;
}
h2:not(:first-child){
  margin-top: 70px;
}
.text {
  padding: 10px 40px 30px 40px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.img-4,.img-5 {
 max-width: 100%;
 object-fit: cover;
 height: 400px;
 width: 780px;
}
.img-6 {
  max-height: 100%;
  object-fit: cover;
  height: 400px;
  width: 780px;
}
@media(max-width:700px){
 .container{
  flex-direction: column;
  }
 article{
  width: 100%;
 }
 .img-4,.img-5,.img-6{
  max-width: 100%;
  object-fit: cover;
  width: 450px;
  height: 200px;
 }
 .text{
   text-align: justify;
   width: 100%;
   margin: 0 auto;
 }
}

/*aside*/
aside {
  width: 30%;
}
.aside-title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 40px;
}
.profile {
  text-align: center;
}
.img-7{
  border-radius: 50%;
  height:120px;
  width:120px;
}
.img-8,.img-9,.img-10 {
  max-width: 100%;
  object-fit: cover;
  height:200px;
  width: 380px;
  margin-top: 20px;
}
aside a {
  text-decoration: none;
}

.archive li{
  border-bottom: solid 1px #c8c8c8;
  padding: 20px;
}
.archive li:first-child{
    border-top:solid 1px #c8c8c8;
}
aside p {
  font-size: 14px;
}
@media(max-width:700px){
aside {
  width: 100%;
}
.profile {
  margin-top: 80px;
}
}

/*infomation*/
.infomation {
  display: flex;
  justify-content: space-between;
  background: #dddddd;
  margin-top: 150px;
  padding:  4% 0;
}
h4 {
  margin-bottom: 20px;
}
.about {
  width:30%;
}
.about p {
  font-size: 12px;
  font-family: sans-serif;
  font-weight: normal;
  margin-bottom: 20px;
}
.about a {
  font-size: 12px;
  text-decoration: none;
}
.menu li {
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
  font-size: 14px;
}
.menu li:first-child {
  border-top:solid 1px #c8c8c8;
}
.menu {
 width:30%;
}
.menu a {
  text-decoration: none;
}
.twitter {
  width: 30%;
}
@media(max-width:700px) {
  .infomation {
    flex-direction: column;
  }
 .about {
   width:100%;
 }
 .about p{
   text-align: justify;
 }
  .menu {
    width: 100%;
    margin-top: 50px;
  }
  .twitter {
    width: 100%;
    margin-top: 30px;
  }
}
/*footer*/
.footer{
  background: #dddddd;
}
.copyright{
  text-align: center;
}