/*
 * バスキュール技術ブログの見た目。
 * 見た目の仕様書から自前で書いた。はてなのテーマの CSS は含まない。
 * Hugo の仕組みに依存しない素の CSS (別の静的サイトジェネレータへ移しても使える)。
 * 画面幅の区切り: 狭い (767px 以下) / 中間 (768〜1019px) / 広い (1020px 以上)。
 * 先に狭い画面の値を書き、768px と 1020px で上書きする。
 * 末尾に、自社がはてなブログで使っていた上書きをそのまま置く。
 */

/* ---- 全体 ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #ffffff;
  color: #3d3f44;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Droid Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a { color: #5684d7; }
a:hover { color: #3067cb; }

#container {
  margin: 0 auto;
  padding: 0 10px;
}

#container-inner { padding: 0; }

@media (min-width: 768px) {
  body { padding-top: 24px; }
  #container {
    width: 720px;
    max-width: 100%;
    margin-top: 24px;
    padding: 24px;
  }
}

@media (min-width: 1020px) {
  #container { width: 960px; }
}

/* ---- ヘッダー (ブログ名はロゴ画像だけで見せる) ---- */
#blog-title {
  margin: 0 -10px;
  padding-bottom: 24px;
}

#blog-title-inner {
  height: min(50vw, 82px);
  background-image: url("../images/header.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto;
  overflow: hidden;
  position: relative;
}

.blog-title-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* 文字は画面に出さず、読み上げ用に残す */
.blog-title-text,
.blog-description {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  #blog-title { margin: 0; }
  #blog-title-inner { height: 82px; }
}

#main { margin-top: 32px; }
#main:has(> .page-entry) { margin-top: 16px; }

/* ---- 日付・カテゴリの札 (一覧と記事で共通) ---- */
.date {
  display: block;
  color: #959c9e;
  font-size: 0.8em;
  text-decoration: none;
}
.date:hover { color: #3067cb; }

.categories {
  margin: 6px 0;
  text-align: center;
}

.categories a {
  display: inline-block;
  margin: 0 1.5px;
  padding: 2px 6px;
  border: 1px solid rgba(210, 215, 229, 0.3);
  border-radius: 0;
  color: #3d3f44;
  font-size: 12px;
  text-decoration: none;
}

.categories a:hover {
  background: #f7f8f9;
  border-color: #b2bad2;
}

.entry-title a { color: inherit; text-decoration: none; }
.entry-title a:hover { color: #3067cb; }

/* ---- トップの記事一覧 ---- */
.page-archive {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.3;
}

.archive-entry {
  display: flow-root; /* サムネイルの回り込みを 1 件の中で終わらせる */
  margin-bottom: 96px;
}

.archive-entry .entry-title {
  margin: 0.4em 0 0.6em;
  color: #2e3034;
  font-size: 2em;
  font-weight: normal;
  line-height: 1.15;
  text-align: left;
}

.archive-entry .date { text-align: left; }

.entry-thumb {
  float: left;
  width: 80px;
  height: 80px;
  margin-right: 26px;
  border-radius: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.entry-description {
  margin: 0;
  color: #3d3f44;
  font-size: 13.6px;
  line-height: 1.6;
}

/* タグの札 (記事にタグがあるときに使う) */
.archive-tags { margin: 8px 0; }
.archive-tags a {
  display: inline-block;
  margin: 0 3.5px 3.5px 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: #ffffff;
  color: #3d4245;
  font-size: 14px;
  text-decoration: none;
}
.archive-tags a:hover { background: #eeeeee; }

/* 次のページのボタン */
.pager-more {
  margin: 48px 0;
  text-align: center;
}
.pager-more a {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid #d2d7e5;
  border-radius: 0;
  color: #3d3f44;
  font-size: 12.8px;
  text-decoration: none;
}
.pager-more a:hover { background: #f7f8f9; border-color: #b2bad2; }

.page-heading,
.term-list { max-width: 720px; margin-left: auto; margin-right: auto; }
.page-heading { font-size: 1.5em; font-weight: normal; color: #2e3034; margin-top: 0; }

@media (min-width: 768px) {
  .entry-thumb { width: 120px; height: 120px; }
  .entry-description { font-size: 14.4px; }
}

/* ---- 記事ページ ---- */
.page-entry { margin-bottom: 48px; }

.entry-header {
  text-align: center;
  margin-bottom: 45px;
}

.page-entry .entry-title {
  margin: 0.4em 0;
  color: #2e3034;
  font-size: 25.6px;
  font-weight: normal;
  line-height: 1.3;
}

.page-entry .categories { margin: 13px 0; }

.entry-content {
  max-width: 720px;
  margin: 0 auto;
  font-size: 14.4px;
  line-height: 1.7;
}

.entry-content p { margin: 1em 0; }
.entry-content a { color: #5684d7; text-decoration: underline; }
.entry-content a:hover { color: #3067cb; }

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  clear: both;
  margin: 1em 0 0.8em;
  color: #2e3034;
  font-weight: bold;
  line-height: 1.3;
}
.entry-content h1 { font-size: 1.4em; padding-bottom: 0.1em; border-bottom: 1px solid #d2d7e5; }
.entry-content h2 { font-size: 1.3em; padding-bottom: 0.1em; border-bottom: 1px solid #d2d7e5; }
.entry-content h3 { font-size: 1.2em; }
.entry-content h4 { font-size: 1.1em; }

.entry-content blockquote {
  margin: 1em 0;
  padding: 5px 5px 5px 15px;
  border-left: 2px solid #959c9e;
}
.entry-content blockquote > :first-child { margin-top: 0; }
.entry-content blockquote > :last-child { margin-bottom: 0; }

.entry-content ul,
.entry-content ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.entry-content li > ul,
.entry-content li > ol { margin-bottom: 0; }

.entry-content table {
  display: block;
  width: 100%;
  margin: 0 0 1em;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 12.8px;
}
.entry-content th,
.entry-content td {
  padding: 5px 10px;
  border: 1px solid #d2d7e5;
}
.entry-content th { background: #f7f8f9; }
.entry-content td p,
.entry-content th p { margin: 0; }

.entry-content code,
.entry-content pre {
  font-family: Monaco, Consolas, "Courier New", monospace;
}
.entry-content code {
  margin: 0 2px;
  padding: 0 5px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  background: #f7f8f9;
  font-size: 0.9em;
}
.entry-content pre {
  margin: 1em 0;
  padding: 10px;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: #f7f8f9;
  font-size: 12.8px;
  line-height: 1.3;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}
.entry-content pre code {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
}

.entry-content img,
.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object {
  max-width: 100%;
}
.entry-content img { height: auto; }

/* 埋め込みの下の出典 */
.entry-content cite {
  display: block;
  font-size: 0.9em;
  font-style: normal;
  opacity: 0.75;
}

.entry-content hr {
  width: 50%;
  margin: 2em auto;
  border: 0;
  border-top: 1px solid #d2d7e5;
}

.entry-content .table-of-contents {
  margin: 1em 0;
  padding: 1em 1em 1em 2em;
  border: 1px solid #d2d7e5;
}

/* 記事の末尾 */
.entry-footer {
  max-width: 720px;
  margin: 0 auto;
}
.entry-footer-info {
  margin: 1em 0;
  color: #959c9e;
  font-size: 12.8px;
}
.entry-footer-info a { color: #959c9e; }
.entry-footer-info a:hover { color: #3067cb; }

.pager {
  display: flex;
  width: 100%;
  margin: 48px auto;
  font-size: 14.4px;
}
.pager a {
  flex: 1 1 50%;
  min-width: 0;
  color: #3d3f44;
  font-weight: normal;
  text-decoration: none;
  border: 0;
}
.pager a:hover { color: #3067cb; }
.pager-prev { text-align: left; }
.pager-next { text-align: right; }
.pager-prev + .pager-next {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid #d2d7e5;
}
.pager-prev:only-child { padding-right: 50%; }
.pager-next:only-child { margin-left: 50%; }

@media (min-width: 768px) {
  .page-entry { margin-bottom: 96px; }
  .page-entry .entry-title { font-size: 28.8px; }
  .entry-content { font-size: 16px; }
  .entry-content table { font-size: 14.4px; }
  .pager { width: 70%; font-size: 17.6px; }
  .pager-prev + .pager-next { margin-left: 24px; padding-left: 24px; }
}

@media (min-width: 1020px) {
  .page-entry .entry-title { font-size: 32px; }
  .entry-content h1 { font-size: 1.6em; }
  .entry-content h2 { font-size: 1.5em; }
  .entry-content h3 { font-size: 1.3em; }
  .entry-content h4 { font-size: 1.2em; }
  .entry-content blockquote { margin: 1.5em 3em; padding: 5px 20px; }
  .entry-content pre { padding: 15px; font-size: 13.6px; }
}

/* ---- フッター ---- */
#footer {
  margin: 32px auto;
  padding: 0 10px;
  color: #959c9e;
  font-size: 12.8px;
  text-align: center;
}
#footer a { color: #959c9e; }
#footer p { margin: 0.5em 0; }

@media (min-width: 768px) {
  #footer { width: 720px; max-width: 100%; padding: 0 24px; }
}
@media (min-width: 1020px) {
  #footer { width: 960px; }
}

/* ---- 自社がはてなブログで使っていた上書き ---- */
body {
        font-family: "游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"Droid Sans",sans-serif;


}

.entry-title {
    font-size: 2.0rem;
}

.entry-header {
    margin-bottom: 2.8em; 
}

.categories a {
    border: 1px solid rgba(210,215,229, 0.3);
}

.header-image-enable #blog-title #blog-title-inner, .header-image-only #blog-title #blog-title-inner {
    max-height: 82px;
    margin: 100px 0 80px;
}

/**
* top page list
*/
.page-archive .date {
  text-align: left;
}

.page-archive .entry-title {
  margin: 0.4em 0 .6em 0;
  text-align: left;
  line-height: 1.15;
}

.page-archive .entry-thumb {
  border-radius: 4px;
  margin-right: 26px;
}

.page-archive .entry-description {
  line-height: 1.6;
}

.page-archive .archive-entry {
  margin-bottom: 6em;
}