@charset 'UTF-8';

#wrapper>header nav{
  position: static;
}
article{
  padding: 6.8rem calc(36 / 1200 * 100%);
}
article h2{
  margin: 0 0 3.6rem 0;
  font-size: 2.6rem;
  font-weight: bolder;
  line-height: 1.75;
  letter-spacing: calc(0.78 / 26 * 1em);
}
html[lang='ja'] article h2{
  font-size: 2.3rem;
}

/*  archive (information/) */
#archive{
  padding: 5.4rem 0;
  position: relative;
  color: rgb(0, 0, 0);
  background: rgb(255, 255, 255);
}
#archive::before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -10;
  margin: auto;
  width: 100vw;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  background: rgb(255, 255, 255);
}
#archive article{
  padding: 6.0rem 0;
  -webkit-box-align: start;
  align-items: flex-start;
}
#archive article:not(:first-child){
  border-top: 1px solid rgb(35, 24, 21);
}
#archive article header{
  padding-bottom: 2.4em;
}
#archive article time{
  padding: 0 .5em;
  margin-right: 1em;
  background-color: rgb(239, 239, 239);
}
#archive article h3{
  margin: 0;
  display: inline-block;
  font-size: 2.0rem;
  font-weight: bolder;
  letter-spacing: calc(0.6 / 20 * 1em);
  margin: 0;
}
#archive article h3 a{
  border-bottom: 1px transparent;
  border-bottom-style: dotted;
  transition: border-bottom .3s;
}
#archive article h3 a:hover{
  border-bottom: 1px rgb(35, 24, 21);
  border-bottom-style: dashed;
}
#archive article .text{
  padding-bottom: 2.4em;
}
#archive article .text p{
  text-align: start;
}
#archive article .text .more{
  padding: 1em .5em 0 .5em;
  text-align: right;
}
#archive article .more a{
  padding: 0 .5em;
  letter-spacing: .05em;
  border-bottom: 1px dashed rgb(35, 24, 21);
}
#archive article .image{
  padding: .4rem 1.6rem;
  text-align: center;
}
#archive article .image span{
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  max-width: 35.8rem;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
#archive article .image span:not([style*='background-image:']){
  display: none;
}
#archive article .image span::before{
  content: '';
  display: block;
  padding-top: 100%;
}

/*  post (information/post.html) */
#post{
  padding: 5.4rem 0;
  position: relative;
  color: rgb(0, 0, 0);
  background: rgb(255, 255, 255);
}
#post::before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -10;
  margin: auto;
  width: 100vw;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  background: rgb(255, 255, 255);
}
#post article{
  padding: 6.0rem 0;
}
#post article header{
  padding-bottom: 2.4em;
}
#post article time{
  padding: 0 .5em;
  margin-right: 1em;
  background-color: rgb(239, 239, 239);
}
#post article h3{
  margin: 0;
  display: inline-block;
  font-size: 2.0rem;
  font-weight: bolder;
  letter-spacing: calc(0.6 / 20 * 1em);
  margin: 0;
}
#post article .text{
  padding-bottom: 2.4em;
}
#post article .text p{
  text-align: start;
}

/*  pager  */
#pager{
  text-align: center;
}
#pager li{
  display: inline-block;
  min-width: 8.8rem;
}
#pager li:first-of-type{
  margin-right: 4.0rem;
}
#pager li:last-of-type{
  margin-left: 4.0rem;
}
#pager li a{
  padding: .5rem 1rem;
  display: block;
  background: rgb(62, 58, 57);
  color: rgb(255, 255, 255);
}
#pager li:first-of-type a::before{
  content: '';
  display: inline-block;
  margin: 0 .75em 0 -.75em;
  width: .75em;
  height: .75em;
  box-sizing: border-box;
  border-top: .375em solid transparent;
  border-bottom: .375em solid transparent;
  border-right: .75em solid rgb(255, 255, 255);
}
#pager li:last-of-type a::after{
  content: '';
  display: inline-block;
  margin: 0 -.75em 0 .75em;
  width: .75em;
  height: .75em;
  box-sizing: border-box;
  border-top: .375em solid transparent;
  border-bottom: .375em solid transparent;
  border-left: .75em solid rgb(255, 255, 255);
}