/*===================
*
===================*/
/*===================
* Post style (Common)
===================*/
.post-list {
  border-bottom: 1px solid #ccc;
  padding: 2em 0; }
  .post-list:first-of-type {
    border-top: 1px solid #ccc; }

.post-list__title {
  border-left: 0.3em solid #0d2538;
  padding-left: .4em;
  line-height: 1.5;
  margin-bottom: 1em;
  font-size: 1.8rem; }
  @media screen and (min-width: 768px) {
    .post-list__title {
      font-size: 2.4rem; } }

.post-list__date {
  color: #666;
  font-size: 1.2rem;
  margin-bottom: .5em; }

.post-list__content {
  margin-bottom: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; }
  @media screen and (min-width: 768px) {
    .post-list__content {
      margin-bottom: 4em; } }

.post-list__link {
  text-align: right; }
  .post-list__link a {
    background-color: #00a672;
    color: #fff;
    font-weight: bold;
    padding: .5em 1em; }

.post-list__icon {
  margin-left: 1em;
  margin-right: 0; }

/*===================
* Single post style (Common)
===================*/
.single-post__title {
  border-left: #00a672 0.2em solid;
  padding-left: .5em;
  font-size: 2.4rem;
  background-color: #eee;
  margin-bottom: 1em;
  line-height: 2; }

.single-post__date {
  color: #666;
  font-size: 1.2rem;
  margin-bottom: .5em; }

.single-post__content {
  padding-top: 1em;
  line-height: 1.8; }
  .single-post__content p {
    margin-bottom: 1em; }
  .single-post__content ul {
    padding-left: 1em;
    margin-top: 0; }
  .single-post__content h3 {
    border-bottom: 2px solid #008350;
    padding-bottom: .2em;
    margin-bottom: .5em; }
  .single-post__content pre {
    background-color: #eee;
    color: #000;
    padding: 1em;
    overflow-x: auto;
    border-radius: .5em;
    font-size: 1.2rem; }
  .single-post__content a {
    color: #008350;
    text-decoration: underline; }

.single-post-nav {
  margin-bottom: 3em; }

.single-post-pager {
  list-style: none; }
  .single-post-pager__lists {
    border: 2px solid #0d2538;
    color: #0d2538;
    margin-bottom: 1em;
    padding: .5em; }
    .single-post-pager__lists:nth-of-type(2n) {
      text-align: right; }
    .single-post-pager__lists:only-of-type {
      text-align: center; }
  .single-post-pager__link {
    display: block; }

/*===================
* Works.vue
===================*/
/*===================
* Fontawesomecheetsheet.vue
===================*/
.fa-table {
  width: 100%;
  margin-bottom: 5em;
  border-collapse: collapse;
  font-size: 1.2rem; }
  .fa-table td, .fa-table th {
    border: 1px solid #bbb;
    padding: .2em; }
    @media screen and (min-width: 768px) {
      .fa-table td, .fa-table th {
        padding: .5em; } }
  .fa-table__row--heading {
    background-color: #00a672;
    color: #fff; }
  .fa-table__row--detail:nth-of-type(2n) {
    background-color: #eee; }
  .fa-table__cell--icon {
    text-align: center; }
    .fa-table__cell--icon svg {
      margin: 0; }
  .fa-table__cell--prefix {
    text-align: center; }
  .fa-table__cell--code {
    white-space: nowrap;
    max-width: 10em;
    overflow-x: auto; }
    @media screen and (min-width: 768px) {
      .fa-table__cell--code {
        max-width: 20em; } }
    .fa-table__cell--code code {
      border: 1px solid #ddd;
      background-color: #eee;
      color: #c00; }

.fa-table__row--heading th:nth-of-type(2),
.fa-table__row--heading th:nth-of-type(3),
.fa-table__cell--prefix,
.fa-table__cell--name {
  display: none; }

/*===================
* Contact.vue
===================*/
.contact-form__row {
  padding-bottom: 1em; }

.contact-form__row label {
  display: flex;
  flex-wrap: wrap; }

.contact-form input, .contact-form select, .contact-form option, .contact-form textarea, .contact-form button {
  border: 1px solid #aaa;
  width: 100%;
  border-radius: 0;
  display: block;
  height: 2em;
  margin-top: .2em; }

.contact-form textarea {
  height: 5em; }