html {
  font-size: 18px;
}

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

body {
  font-family: Lato,'Hiragino Kaku Gothic Pro',メイリオ,Meiryo,sans-serif;
  font-size: inherit;
  margin: 0;
  color: #263238;
  background: linear-gradient(to right, #1B5E20,#4CAF50, rgba(255, 255, 255, 0));
}

html, body {
  margin: 0;
}

a {
  color: #ff9800;
  text-decoration: none;
}

p {
  margin: 0;
}

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

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; }

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

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

.content-inner.thin {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.rotating-header {
  /* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
@media (max-width:  768px)  {
  .content-inner {
    padding: 2rem;
  }
}
.img-thumbnail {
  max-width: 300px;
}
.l-header {
  padding: 2rem;
  padding-bottom: 2rem;
}

.l-footer {
  font-size: .8rem;
  text-align: center;
  color: #fff;
}

.l-footer aside {
  margin-top: 1rem;
  font-size: .7rem;
}

main {
  display: block;
  max-width: 48rem;
  margin: 0 auto;
}

.l-container {
  background-color: #fff;
  border-radius: 5px;
}

@media (max-width:  768px)  {
  .l-container {
    border-radius: 0;
  }
}

.pagination{text-align: center; padding: 30px 0}
.pagination>li{display:inline}
.pagination>li>a,.pagination>li>span{position:relative;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff}
.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}
.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}
.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}
.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}


.p-nav {
  position: absolute;
  top: 2rem;
  right: 2rem;
}

@media (max-width:  768px)  {
  .p-nav {
    position: static;
    text-align: center;
  }
}

.p-nav ul {
  list-style: none;
}

.p-nav li {
  display: inline-block;
  margin-left: .5rem;
}

@media (max-width:  768px)  {
  .p-nav li {
    margin: 0 .5rem;
  }
}

.p-nav a {
  display: inline-block;
  color: #fff;
  line-height: 2rem;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
}

.p-movetop {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  border: 3px solid #263238;
  background-image: url({{ .Site.BaseURL }}images/icon-arrow-up.png);
  background-position: center;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  border-radius: 50%;
  display: block;
}

.p-logo {
  color: #fff;
}

@media (max-width:  768px)  {
  .p-logo {
    margin: 0 auto;
    margin-bottom: 1rem;
    text-align: center;
  }
}

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



.p-share {
  min-width: 100%;
}

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

.p-share a {
  display: table-cell;
  text-align: center;
  font-weight: 700;
  font-size: .8rem;
  padding: .75rem 0;
  color: #fff;
}

.p-share a.ht { background-color: #00a4de; }
.p-share a.fb { background-color: #3b5998; }
.p-share a.tw { background-color: #1da1f2; }
.p-share a.gp { background-color: #dd4b39; }
.p-share a.ln { background-color: #00c300; }

.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'; }

.p-crumb  {
  margin-bottom: 1.5rem;
  font-size: .8rem;
  list-style: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.p-crumb:last-child  {
  margin-bottom: 0;
}

.p-crumb li {
  display: inline;
}

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

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

.p-crumb li i {
  width: 1rem;
  height: 1rem;
}

.p-facts {
  margin-bottom: 1rem;
}

.p-facts:last-child {
  margin-bottom: 0;
}

.p-facts,
.p-facts ul {
  list-style: none;
  text-transform: uppercase;
}

.p-facts li {
  display: inline-block;
  margin-right: 1rem;
  line-height: 1.25rem;
  font-size: .8rem;
  font-weight: 700;
}

.p-facts li li {
  margin-right: .25rem;
}

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

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

.p-facts header {
  margin-bottom: .5rem;
}

.p-facts header a {
  color: #263238;
  text-decoration: underline;
}

.p-terms {
  list-style: none;
}

.p-terms>li {
  border-bottom: 1px solid #eceff1;
}

.p-terms>li:last-child {
  border-bottom: none;
}

.p-terms .terms-title {
  margin: 0;
  text-transform: uppercase;
}

section>header {
  position: relative;
  text-align: center;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  padding: 1rem 0;
  background-color: #263238;
  color: #fff;
  letter-spacing: 3px;
}


.p-articles {
  list-style: none;
}

.p-articles>li {
  border-bottom: 1px solid #eceff1;
}

.p-articles li:last-child { margin-bottom: 0; border-bottom: none; }

article {
  word-break: break-word;
}

article .title {
  position: relative;
  margin: 0;
  margin-bottom: .5rem;
  color: #000;
  font-size: 1.4rem;
  font-weight: 700;
}

article .title a {
  color: #000;
}

article .summary {
  margin-bottom: .5rem;
}

article .readmore {
  text-align: right;
}

article .readmore a {
  display: inline-block;
  color: #263238;
  line-height: 1.5rem;
  font-weight: 700;
  font-size: .8rem;
}

article .readmore a::after {
  content: '';
  display: block;
  float: right;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: .5rem;
  background-image: url({{ .Site.BaseURL }}images/icon-arrow-right.png);
  background-position: center;
  background-size: contain;
}

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

@media (max-width:  768px)  {
  article .thumbnail {
    height: 10rem;
  }
}

article .article-footer {
  background-color: #eceff1;
}

article.li.sm .thumbnail {
  float: right;
  width: 8rem;
  height: 5rem;
  margin-left: 1.5rem;
  margin-bottom: 0;
}

@media (max-width:  768px)  {
  article.li.sm .thumbnail {
    float: none;
    width: auto;
    margin: 0;
    margin-bottom: 1rem;
  }
}

article.li.sm .article-header {
  margin-bottom: 0;
}

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

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

.article-body h3 {
  color: #00acc1;
}

.article-body h4 {
  border-left: solid .25rem #00acc1;
  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;
  background-color: #eceff1;
  font-size: .8rem;
  padding: 0 .5rem;
  line-height: 1.5rem;
}

.article-body pre {
  margin: 1.5rem 0;
  padding: 1.5rem;
  font-size: .8rem;
  background-color: #263238;
  color: #fff;
  overflow: auto;
}

.article-body pre code {
  background-color: transparent;
}

.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 #ffd54f inset;
}

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

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

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

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

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

i {
  width: 1.5em;
  height: 1.5em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  float: left;
}

i.inline {
  margin-right: .5em;
}

i.calendar { background-image: url({{ .Site.BaseURL }}images/icon-calendar.svg); }
i.cursor { background-image: url({{ .Site.BaseURL }}images/icon-cursor.svg); }
i.clip { background-image: url({{ .Site.BaseURL }}images/icon-clip.svg); }
i.home { background-image: url({{ .Site.BaseURL }}images/icon-home.svg); }