@charset "UTF-8";
/*
 * Theme colors config
 */
/*
 * Font config
 */
.u-font {
  font-family: "EB Garamond", "Hiragino Mincho ProN", serif; }

/*
 * Base style
 */
* {
  padding: 0;
  margin: 0; }

body {
  font-family: Helvetica neue, "Open Sans", sans-serif, Arial, serif;
  font-size: 16px; }

.main {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

a {
  text-decoration: none;
  color: #b38d19;
  transition: color .2s ease; }
  a:hover {
    color: #d9c68c; }

article {
  margin: 4vh 0;
  word-wrap: break-word;
  color: #111111; }
  article p {
    font-size: 1rem;
    line-height: 30px;
    font-weight: 340;
    margin-top: 20px;
    word-wrap: break-word;
    letter-spacing: 1px; }
    @media screen and (max-width: 800px) {
      article p {
        line-height: 28px; } }
  article ul, article ol {
    box-sizing: border-box;
    padding-left: 40px;
    font-size: .9rem;
    line-height: 21px;
    font-weight: 400;
    margin-top: 2vh;
    letter-spacing: 1px; }
    article ul li, article ol li {
      padding-left: 3px; }
    @media screen and (max-width: 800px) {
      article ul, article ol {
        padding-left: 30px; } }

blockquote p {
  border-left: #b38d19 3px solid;
  padding: 0 15px; }

p code {
  font-size: .9rem;
  padding: 2px;
  color: #008c7f;
  background-color: #f9f9f9; }

h1, h2, h3, h4 {
  color: #111111; }

/*
 * Header
 */
.site-logo__wrap {
  position: relative;
  width: 100vw;
  padding: 7vmin 0;
  background-color: #ffffff; }
  @media screen and (max-width: 800px) {
    .site-logo__wrap {
      border-bottom: #e6e6e6 1px solid;
      padding: 7px 0; } }

.site-logo {
  position: relative;
  width: 7vmin;
  height: 7vmin;
  margin: 0 auto; }
  .site-logo a {
    display: inline-block;
    width: 100%;
    height: 100%; }
  .site-logo img {
    width: 100%;
    height: 100%; }

.site-logo__index {
  width: 9vmin;
  height: 9vmin; }
  @media screen and (max-width: 800px) {
    .site-logo__index {
      width: 7vmin;
      height: 7vmin; } }

.site-nav {
  position: relative;
  width: 100%;
  padding: 2vh 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #ffffff;
  letter-spacing: 1px;
  z-index: 1000; }
  .site-nav .site-nav__wrap {
    margin: 0 2vw; }
  .site-nav .site-nav__el {
    display: inline-block;
    height: 4vh;
    line-height: 4vh;
    color: #111111;
    font-size: .8rem; }
    .site-nav .site-nav__el:hover {
      opacity: 0.6;
      transition: opacity 0.2s ease; }
  .site-nav .current-page {
    opacity: .6;
    cursor: default;
    pointer-events: none;
    border-bottom: #111111 1px solid; }

.site-nav__index .site-nav__el {
  height: 5vh;
  line-height: 5vh; }

.site-nav-fixed {
  position: fixed;
  top: 0; }

#site-button {
  position: absolute;
  display: none;
  width: 22px;
  height: 22px;
  left: 20px;
  top: calc(50% - 11px);
  text-align: center;
  z-index: 1001;
  cursor: pointer; }
  @media screen and (max-width: 800px) {
    #site-button {
      display: block; } }
  #site-button div {
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: calc(50% - 0.5px);
    background-color: #111111; }
    #site-button div::before, #site-button div::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: #111111;
      transition: all .2s ease; }
    #site-button div::before {
      transform: translateY(7.5px) rotate(0); }
    #site-button div::after {
      transform: translateY(-7.5px) rotate(0); }

#site-button.button-clicked {
  position: fixed;
  left: 20px;
  top: 10px; }
  #site-button.button-clicked div {
    background-color: rgba(255, 255, 255, 0); }
    #site-button.button-clicked div::before {
      transform: translateY(0) rotate(45deg); }
    #site-button.button-clicked div::after {
      transform: translateY(0) rotate(-45deg); }

@media screen and (max-width: 800px) {
  #nav-bar {
    display: none; }

  .site-nav {
    position: fixed;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    margin-top: 0;
    transform: translateX(-100%);
    animation: nav-in .5s ease forwards; }
    .site-nav .site-nav__wrap {
      width: 100%;
      text-align: center;
      margin: 12px 0; }
      .site-nav .site-nav__wrap a {
        height: 4vh;
        line-height: 4vh;
        font-size: 1.5rem;
        letter-spacing: 2px; } }
/*
 * Index page
 */
.index-displayImg {
  position: relative;
  width: 100vw;
  height: 85vh;
  margin: 0 auto;
  background-position: center;
  background-size: cover; }
  @media screen and (max-width: 800px) {
    .index-displayImg {
      height: 28vh; } }

.index-line {
  position: relative;
  margin: 0 auto;
  margin-top: 8vmin;
  text-align: center;
  width: 50vw;
  height: 5vh;
  border-top: #e6e6e6 1px solid;
  line-height: 5vh; }
  @media screen and (max-width: 800px) {
    .index-line {
      width: 90vw; } }
  .index-line span {
    display: inline-block;
    color: #111111;
    border-top: #b38d19 3px solid;
    margin-top: -1px;
    opacity: .9;
    font-size: 1rem; }

.index-sns {
  position: relative;
  margin: 0 auto;
  margin-top: 3vmin;
  text-align: center;
  display: flex;
  flex-direction: column; }
  .index-sns a {
    margin: 2vmin auto;
    padding: 1.3vh 0.2vw;
    width: 18%;
    color: #aaaaaa;
    font-size: .8rem;
    letter-spacing: 1px;
    border: #aaaaaa 1px solid;
    transition: all .2s ease; }
    @media screen and (max-width: 800px) {
      .index-sns a {
        width: 55%;
        padding: 1.7vh 3vw;
        margin: 3vmin auto;
        font-size: .7rem; } }
    .index-sns a:hover {
      color: #ffffff;
      background-color: #d9c68c; }

.index-posts {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 4vmin;
  width: 50vw; }
  @media screen and (max-width: 800px) {
    .index-posts {
      width: 90vw; } }
  .index-posts .index-posts__list {
    display: flex;
    width: 100%;
    text-align: left;
    margin: 4vh 0;
    font-size: .8rem; }
    @media screen and (max-width: 800px) {
      .index-posts .index-posts__list {
        flex-direction: column;
        margin: 2.8vh 0; } }
  .index-posts a {
    transition: all .3s ease;
    letter-spacing: 0.5px; }
    .index-posts a:hover {
      opacity: 0.6; }
  .index-posts .l-time {
    width: 8rem;
    height: auto; }
    .index-posts .l-time a {
      color: rgba(17, 17, 17, 0.5); }
  .index-posts .l-title {
    width: calc(100% - 8rem); }
    .index-posts .l-title a {
      color: #111111; }
    @media screen and (max-width: 800px) {
      .index-posts .l-title {
        width: 100%; } }
  @media screen and (max-width: 800px) {
    .index-posts .l-time, .index-posts .l-title {
      width: 100%;
      margin: 1vh 0; } }

.index-paginate {
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-top: 2vh;
  display: inline-block;
  text-align: center;
  font-size: .8rem; }
  .index-paginate nav {
    position: relative;
    margin: 0 auto; }
  .index-paginate ul {
    list-style-type: none; }
  .index-paginate li {
    display: inline-block; }
  .index-paginate a {
    display: inline-block;
    color: rgba(17, 17, 17, 0.5);
    padding: 1vmin;
    transition: opacity .2s ease; }
    @media screen and (max-width: 800px) {
      .index-paginate a {
        padding: 2vmin; } }
    .index-paginate a:hover {
      opacity: 0.4; }
  .index-paginate .active a {
    color: #111111;
    cursor: none;
    pointer-events: none; }

/*
 * Post page
 */
.main-content {
  position: relative;
  margin: 0 auto;
  margin-top: 6vmin;
  width: 56vw;
  text-align: left; }
  @media screen and (max-width: 800px) {
    .main-content {
      width: 90vw; } }
  .main-content img {
    display: block;
    max-width: 56vw;
    height: auto; }
    @media screen and (max-width: 800px) {
      .main-content img {
        max-width: 90vw; } }
  .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
    font-weight: bold; }
    .main-content h1::before, .main-content h2::before, .main-content h3::before, .main-content h4::before, .main-content h5::before, .main-content h6::before {
      position: absolute;
      content: "#";
      color: #b38d19;
      font-weight: normal;
      transform: translateX(-25px); }
      @media screen and (max-width: 800px) {
        .main-content h1::before, .main-content h2::before, .main-content h3::before, .main-content h4::before, .main-content h5::before, .main-content h6::before {
          display: none; } }
  .main-content h1 {
    font-size: 1.8rem;
    margin: 2vh 0; }
  .main-content h2 {
    font-size: 1.7rem;
    margin: 1.8vh 0; }
  .main-content h3 {
    font-size: 1.6rem;
    margin: 1.6vh 0; }
  .main-content h4 {
    font-size: 1.5rem;
    margin: 1.4vh 0; }
  .main-content h5 {
    font-size: 1.4rem;
    margin: 1.22vh 0; }
  .main-content h6 {
    font-size: 1.3rem;
    margin: 1.0vh 0; }
  .main-content hr {
    margin: 5vh auto; }
  .main-content dl {
    margin: 1vh 1vh;
    box-sizing: border-box; }
    .main-content dl dt, .main-content dl dd {
      padding: 10px 30px; }

.main-content__date {
  position: relative;
  margin: 1vmin 0; }
  .main-content__date h4 {
    font-size: 1rem;
    font-weight: 300;
    color: #9b9b9b;
    margin-left: 2.1px; }
    .main-content__date h4::before {
      content: none; }

.main-content__title {
  position: relative;
  margin: 2vmin 0; }
  .main-content__title h1 {
    font-size: 2rem;
    font-weight: bolder; }
    .main-content__title h1::before {
      content: none; }

.title-type__custom {
  text-align: center;
  margin-top: 6vmin; }
  .title-type__custom h1 {
    display: inline-block;
    width: auto;
    height: auto;
    font-weight: 400;
    font-size: 1.8rem;
    padding: 3vmin 0;
    letter-spacing: 2px; }

.main-content__tags {
  position: relative;
  margin: 2vh 0;
  font-size: .9rem;
  font-weight: 300; }
  .main-content__tags a {
    display: inline-block;
    padding: 3px 10px;
    padding-left: 1.2rem;
    margin-right: 10px;
    margin-bottom: 1.4vh;
    color: rgba(17, 17, 17, 0.9);
    background-color: #f9f9f9;
    transition: all .2s ease;
    border-radius: 2px; }
    .main-content__tags a:hover {
      color: #ffffff;
      background-color: rgba(17, 17, 17, 0.9); }
  .main-content__tags a::before {
    position: absolute;
    content: "#";
    transform: translateX(-0.9rem); }

.main-content__article {
  position: relative; }

.main-profile {
  position: relative;
  margin: 10vh auto;
  width: 56vw;
  height: 15vmin;
  border-radius: 2px;
  border: #e6e6e6 1px solid; }
  @media screen and (max-width: 800px) {
    .main-profile {
      width: 90vw;
      height: 24vmin; } }
  .main-profile .main-profile__avatar {
    position: absolute;
    width: 10vmin;
    height: 10vmin;
    margin: 2.5vmin;
    overflow: hidden;
    border-radius: 4px;
    background-color: #e6e6e6; }
    @media screen and (max-width: 800px) {
      .main-profile .main-profile__avatar {
        width: 19vmin;
        height: 19vmin;
        margin: 2.5vmin; } }
    .main-profile .main-profile__avatar img {
      width: 100%;
      height: 100%; }
  .main-profile .main-profile__body {
    position: absolute;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 2.5vmin 5vmin 2.5vmin 16vmin;
    text-align: left;
    color: #111111; }
    @media screen and (max-width: 800px) {
      .main-profile .main-profile__body {
        padding: 2.5vmin 3vmin 2.5vmin 26vmin; } }
  .main-profile .main-profile__author {
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.1rem; }
  .main-profile .main-profile__description {
    width: 100%;
    height: 1.1rem;
    opacity: .6;
    font-size: .8rem;
    margin: 1vh 0;
    line-height: 1.4; }
    .main-profile .main-profile__description p {
      height: inherit;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }

.main-line {
  position: relative;
  margin: 10vh auto 4vh auto;
  width: 56vw;
  height: 1px;
  background-color: #e6e6e6; }
  @media screen and (max-width: 800px) {
    .main-line {
      width: 90vw;
      margin: 6vh auto 4vh auto; } }

.main-pn {
  position: relative;
  width: 56vw;
  height: 13vh;
  margin: 0 auto; }
  @media screen and (max-width: 800px) {
    .main-pn {
      width: 90vw; } }
  .main-pn .previous, .main-pn .next {
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    width: 49%;
    height: 100%;
    margin: auto 0;
    text-align: left;
    border: #e6e6e6 1px solid; }
    .main-pn .previous::after, .main-pn .next::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: #ffffff;
      opacity: 0;
      transition: all .2s ease; }
    .main-pn .previous:hover::after, .main-pn .next:hover::after {
      opacity: .4; }
  .main-pn .previous {
    left: 0;
    padding: 3vmin 2vmin 3vmin 6vmin; }
    @media screen and (max-width: 800px) {
      .main-pn .previous {
        padding: 5vmin 3vmin 5vmin 8vmin; } }
    .main-pn .previous .pn-dec {
      left: 2vmin; }
      .main-pn .previous .pn-dec::before {
        content: "◄"; }
  .main-pn .next {
    right: 0;
    padding: 3vmin 7vmin 3vmin 5vmin; }
    @media screen and (max-width: 800px) {
      .main-pn .next {
        padding: 5vmin 7vmin 5vmin 5vmin; } }
    .main-pn .next .pn-dec {
      right: 2vmin; }
      .main-pn .next .pn-dec::before {
        content: "►"; }
  .main-pn .pn-dec {
    position: absolute;
    box-sizing: border-box;
    width: .8rem;
    height: 100%;
    top: 0; }
    .main-pn .pn-dec::before {
      position: relative;
      left: 0;
      top: calc(50% - .6rem);
      color: #111111;
      font-size: .8rem; }
  .main-pn .pn-els {
    width: 100%;
    position: relative;
    color: #111111; }
    .main-pn .pn-els:hover {
      color: #111111; }
    .main-pn .pn-els .pn-el__1 {
      font-size: .7rem;
      letter-spacing: .5px;
      margin: 1vmin 0; }
    .main-pn .pn-els .pn-el__2 {
      display: block;
      font-size: .8rem;
      height: 1rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }

/*
 * Tag list
 */
.mpl-t-wrap {
  display: block;
  float: left;
  margin-bottom: 1.5vmin;
  margin-right: 2vmin; }
  .mpl-t-wrap a span {
    color: rgba(17, 17, 17, 0.8); }

/*
 * Footer
*/
.footer {
  position: relative;
  width: 100%;
  left: 0;
  bottom: 0;
  margin-top: 8vh; }

.copyright-wrap {
  text-align: center;
  border-top: #e6e6e6 1px solid; }

.copyright {
  padding: 2.5vh 0;
  font-size: .6rem;
  color: #bbbbbb; }
  .copyright a {
    color: #bbbbbb; }

/*
 * Keyframes
 */
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes nav-in {
  0% {
    transform: translateX(-100%); }
  50% {
    transform: translateX(4%); }
  70% {
    transform: translateX(-2.5%); }
  100% {
    transform: translateX(0%); } }

/*# sourceMappingURL=style.css.map */