.page-header {
  position: sticky; 
  top: 0; 
  height:11rem!important; 
  z-index: 100; 
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 0.2);
}

/***** weblog-monthly *****/
.weblog-monthly {
  padding: 0 5rem 0 5rem;
  display: flex;
}

.weblog-monthly > .weblog-header {
  font-size: 1.5rem;
  padding: 10px;
  background-color: rgb(32, 124, 32);
  color: white;
  font-weight: bold;
}

.weblog-monthly > .weblog-monthly-links {
  padding:10px;
  width:70%;
  margin:0 auto;
}

.weblog-monthly > .weblog-monthly-links > .weblog-monthly-row {
  text-align: center;
  padding: 0.8rem;
  border-bottom: 1px solid #CBCBCB;
}

.weblog-monthly > .weblog-monthly-links > .weblog-monthly-row > a {
  margin-top: 0.5rem;
  padding:5px 0px;
  font-size: 1.7rem;
  display:block;
  color:#327d64;
}

.weblog-monthly > .weblog-monthly-links > .weblog-monthly-row > a:hover {
  color: white;
  background: #327d64;
}


/***** weblog-container *****/
.weblog-container {
  padding: 0 5rem 0 5rem;
  display: flex;
}

.weblog-container > .weblog-content-fields {
  width: 100%;
}

.weblog-container > .weblog-content-fields > .weblog-contents{
  background-color: white;
  padding: 10px;
  /* border: 1px solid #CBCBCB; */
  border-radius: 7px;
  margin-bottom: 15px;
}

.weblog-container > .weblog-content-fields > .weblog-contents > .weblog-header{
  font-size: 1.7rem;
  padding: 15px;
  display: flex;
  border-bottom: 1px solid #dcdcdc;
}

.weblog-container > .weblog-content-fields > .weblog-contents > .weblog-header > .weblog-header-timestamp{
  width: 15rem;
  margin-right: 10px;
  color: #327d64;
  display:block;
}

.weblog-container > .weblog-content-fields > .weblog-contents > .weblog-header > .weblog-header-subject{
  width: 60rem;
  display:block;
}

@media only screen and (max-width:820px) {
  .weblog-container > .weblog-content-fields > .weblog-contents > .weblog-header{
    flex-direction: column;
  }
  .weblog-container > .weblog-content-fields > .weblog-contents > .weblog-header > .weblog-header-timestamp{
    margin-bottom:0.5em;
  }
  .weblog-container > .weblog-content-fields > .weblog-contents > .weblog-header > .weblog-header-subject{
    width: 100%!important;
  }
}

.weblog-contents {
  font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.weblog-body {
  line-height: 1.6;
}

.weblog-container > .weblog-content-fields > .weblog-contents > .weblog-body{
  padding: 20px 15px;
  font-size: 1.55rem;
}

.weblog-container > .weblog-content-fields > .weblog-contents > .weblog-attachment{
  padding: 20px 15px;
}