html {
  font-size: 18px;
}

@media (max-width:  768px)  {
  html {
    font-size: 15px;
  }
}

body {
  font-family: 'Noto Sans','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,sans-serif;
  font-size: inherit;
  font-weight: 300;
  line-height: 1rem;
  background-color: #eceff1;
}

p {
  margin: 0;
}

article img {
  max-width: 100%;
}

a {
  color: #4caf50;
}

a:hover {
  text-decoration: none;
  color: #388e3c;
}

a.active {
  color: #AAAAAA;
}

a.active:hover {
  text-decoration: none;
  color: #666666;
}

ul,ol {
  margin: 0;
  padding: 0;
}

li {
  line-height: 180%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
}

h1 { font-size: 1.8rem; line-height: 2rem; margin: 1.5rem 0; }
h2 { font-size: 1.4rem; line-height: 2rem; margin: 1.5rem 0; }
h3 { font-size: 1.2rem; line-height: 1.5rem; margin: 1.5rem 0; }
h4, h5, h6 { font-size: 1rem; line-height: 1.5rem; margin: 1.5rem 0; }

main {
  display: block;
}

.content-inner {
  padding: 1rem 2rem;
}

.content-inner.thin {
  padding: .5rem 1rem;
}

@media (max-width:  768px)  {
  .content-inner {
    padding: 1rem;
  }
}

/* Override */
.container {
  position: relative;
}

/* Parts:layouts */
.l-header {
  background-color: #fff;
  margin-bottom: 1rem;
  padding: 1rem 0;
  text-align: center;
}

.l-footer {
  font-size: .8rem;
  padding: 1.5rem 0;
}

/* Parts:menu */
.p-menu {
  position: absolute;
  right: 15px;
  top: 0;
}

/* Parts:terms */
.p-terms {
  list-style: none;
}

.p-terms .terms-title {
  margin: 0;
}

.p-terms a {
  display: inline-block;
  padding: .25rem 0;
}

li.p-terms  {
  line-height: 100%;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

.p-terms.inline li {
  display: inline-block;
  font-size: .8rem;
}

.p-terms.inline li::after {
  content: ',';
}

.p-terms.inline li:last-child::after {
  content: '';
}

/* Parts:paging */
.p-paging {
  margin-bottom: 1.5rem;
  text-align: center;
}

.p-paging a {
  display: inline-block;
  padding: 1rem 1.5rem;
  margin: 0 .5rem;
  background-color: #cfd8dc;
  color: #263238;
}

/* Parts:section */
section {
  margin-bottom: 1.5rem;
}

section>header {
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .5rem;
  text-transform: uppercase;
}

section>header a {
  color: #333;
  text-decoration: underline;
}

section.article-footer {
  margin-bottom: 1rem;
}

section.article-footer>header {
  margin-bottom: 0;
}

/* Parts:share */
.p-share {
  min-width: 100%;
  margin-bottom: 1.5rem;
}

.p-share .share-inner {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: .25rem;
}

.p-share a {
  display: table-cell;
  text-align: center;
  font-weight: 700;
  font-size: .7rem;
  padding: .5rem 0;
  color: #fff;
  border-radius: 5px;
}

.p-share a.ht { background-color: #00a4de; border-bottom: 2px solid #0083b1; }
.p-share a.fb { background-color: #3b5998; border-bottom: 2px solid #2f4779; }
.p-share a.tw { background-color: #1da1f2; border-bottom: 2px solid #1780c1; }
.p-share a.gp { background-color: #dd4b39; border-bottom: 2px solid #b03c2d; }
.p-share a.ln { background-color: #00c300; border-bottom: 2px solid #009c00; }

.p-share a.ht::before { content: 'Hatena'; }
.p-share a.fb::before { content: 'Facebook'; }
.p-share a.tw::before { content: 'Twitter'; }
.p-share a.gp::before { content: 'Google+'; }
.p-share a.ln::before { content: 'LINE'; }

/* Parts:logo */
.h-logo {
  font-family: 'Montserrat', sans-serif;
}

.p-logo {
  display: inline-block;
  text-transform: uppercase;
}

.p-logo a {
  display: inline-block;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #000;
}

/* Parts:crumb */
.p-crumb ol {
  list-style: none;
  margin-bottom: 1rem;
}

.p-crumb li {
  display: inline;
  margin-right: .25rem;
  font-size: .8rem;
  color: #607d8b;
}

.p-crumb li::after {
  content: '/';
  margin-left: .25rem;
}

.p-crumb li:last-child::after {
  content: '';
}

/* Parts:facts */
.p-facts {
  list-style: none;
  font-size: .8rem;
  margin-bottom: 1rem;
}

.p-facts li {
  display: inline-block;
  margin-right: .5rem;
  color: #90a4ae;
}

.p-facts li i {
  margin-right: .5rem;
  color: #cfd8dc;
}

/* Parts:article */
article {
  background-color: #fff;
}

article .title {
  margin: 0;
  margin-bottom: .5rem;
  font-weight: 700;
}

article .title a {
  color: #000;
}

article .thumb {
  display: block;
  background-image: url({{ .Site.BaseURL }}images/default.jpg);
  background-position: center;
  background-size: cover;
}

article .summary {
  margin-bottom: .5rem;
  max-height: 5rem;
  overflow: hidden;
}

article.single .thumb {
  height: 18rem;
  margin-bottom: 1rem;
}

@media (max-width:  768px)  {
  article.single .thumb {
    height: 12rem;
  }
}

article.li {
  margin-bottom: 1rem;
}

article.li .thumb {
  height: 7.5rem;
  margin-bottom: .5rem;
}

article.li.sm {
  background-color: transparent;
  margin-bottom: .5rem;
}

article.li.sm>header {
  padding: .5rem 0;
}

article.li.sm .title {
  font-size: .8rem;
  line-height: 1rem;
  margin-bottom: .25rem;
}

article.li.sm .p-facts {
  font-size: .6rem;
  margin-bottom: 0;
}

article.li.sm .thumb {
  float: left;
  margin-right: .5rem;
  height: 3rem;
  width: 3rem;
}

.article-body h2 {
  padding: 1rem 0;
  border-bottom: 2px solid #eceff1;
}

.article-body h2:first-child { margin-top: 0; }

.article-body h3 {
  color: #428bca;
}

.article-body h4 {
  border-left: solid .25rem #428bca;
  padding: 0 .5rem;
}

.article-body p {
  margin: 1.5rem 0;
  line-height: 1.5rem;
}

.article-body a {
  text-decoration: underline;
}

.article-body ul,
.article-body ol {
  padding-left: 1.5rem;
}

.article-body code {
  display: inline-block;
  font-family: Menlo, consolas, monospace;
  font-size: .8rem;
  padding: 0 .5rem;
  line-height: 1.5rem;
}

.article-body pre {
  margin: 1.5rem 0;
  padding: 0;
  font-size: .8rem;
  border: none;
  border-radius: 0;
}

.article-body pre code {
  display: block;
  line-height: 1rem;
  padding: 1rem;
}

.article-body blockquote {
  margin: 1.5rem 0;
  padding: .5rem 0;
  font-size: .8rem;
  border-top: 1px solid #eceff1;
  border-bottom: 1px solid #eceff1;
  color: #607d8b;
}

.article-body blockquote p {
  margin: .5rem 0;
  line-height: 1rem;
}

.article-body strong {
  box-shadow: 0 -.5rem 0 0 #90caf9 inset;
}

.article-body em {
  font-style: normal;
  font-weight: 700;
  color: #03a9f4;
}

.article-body figure { margin: 1.5rem 0; }
.article-body figure img { max-width: 100%; }
.article-body figure.left,
.article-body figure.right {
  width: 15rem;
  height: 12rem;
  margin-top: 0;
}
.article-body figure.left { float: left; margin-right: 1rem; }
.article-body figure.right { float: right; margin-left: 1rem; }

@media (max-width: 768px) {
  .article-body figure.left,
  .article-body figure.right {
    float: none;
    margin: 0;
    width: auto;
    height: auto;
  }
}

.article-body figcaption {
  padding: .5rem 0;
  font-size: .8rem;
  text-align: center;
}

.article-body figcaption a {
  color: #263238;
}


