/* Responsive: yes */

/*===================================================
    カラー設定
    メインカラー：#222d7c（紺色）
    アクセントカラー：#bea3cc（薄紫・hover用）
===================================================*/

/* --- 文字色：メインカラー --- */
#title a:hover,
.date a:hover,
a:hover,
.hatena-module-profile .id a,
.hatena-urllist .urllist-date-link a,
.hatena-urllist .urllist-category-link a,
ul.navi-top a,
ul.navi-top a:hover,
.leave-comment-title,
#globalheader-container,
#footer, #footer a,
.bottom-menu li a,
ul.menu-second-level li a,
.bottom-menu li a:hover,
h1, h2, h3, h1 a, h2 a, h3 a
{ color: #222d7c; }

/* --- 背景色：メインカラー --- */
.entry-content pre .code:before,
ul.menu-second-level li a:hover
{ background-color: #222d7c; }

/* --- 罫線：メインカラー 1px --- */
.entry-content hr,
.urllist-item,
ul.table-of-contents:before,
.comment-box .entry-comment,
ul.navi-top
{ border-bottom: 1px solid #222d7c; }

/* --- 罫線：メインカラー 2px --- */
.entry-header,
.hatena-module-title
{ border-bottom: 2px solid #222d7c; }

.entry-content h3,
ul.bottom-menu
{
  border-top: 2px solid #222d7c;
  border-bottom: 2px solid #222d7c;
}

.comment-box .entry-comment:first-child,
ul.menu-second-level li a
{ border-top: 1px solid #222d7c; }

.leave-comment-title
{ border: 1px solid #222d7c; }

.entry-content h2,
.entry-content h4
{ border-left: 7px solid #222d7c; }

.entry-content h1
{ border-bottom: 5px solid #222d7c; }

/* --- アイコン --- */
ul.navi-top li a::before,
ul.table-of-contents li:before
{
  font-family: "blogicon";
  content: "\f029";
  color: #222d7c;
}

/* サイドバー各項目タイトルの✓マークを非表示 */
.hatena-module-title::before {
  content: none !important;
}

/* --- 文字色：アクセントカラー（hover等） --- */
a,
.hatena-module-profile .id a:hover,
.hatena-urllist .urllist-date-link a:hover,
.hatena-urllist .urllist-category-link a:hover,
.leave-comment-title:hover,
ul.table-of-contents li a:hover,
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover
{ color: #bea3cc; }

ul.navi-top a:hover {
  color: #ffffff;
  background-color: #bea3cc;
}

/* --- 背景色：白 --- */
.hatena-urllist .urllist-date-link a,
.hatena-urllist .urllist-category-link a,
html,
.entry-content pre.code,
ul.table-of-contents,
ul.navi-top, ul.navi-top a,
ul.bottom-menu, ul.bottom-menu li,
ul.menu-second-level li a,
#footer, #footer a
{ background-color: #ffffff; }

/* --- 細かい調整 --- */
ul.navi-top li a::before { letter-spacing: 0.5em; }
ul.menu-second-level li a:hover { color: white; }


/*===================================================
    全体フォント・行間・文字サイズ
===================================================*/

html, body {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
    "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif !important;
  color: #000000 !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
}

.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-description,
.comment-content {
  font-family: inherit !important;
  color: #000000 !important;
  line-height: 1.85 !important;
  font-size: 1rem !important;
}

.entry-content p {
  margin: 0 0 1.2em 0 !important;
}


/*===================================================
    ヘッダー
===================================================*/

body, #content {
  background-color: #f4f5ff !important;
}

#header-container,
#globalheader-container,
#top-editarea,
#header {
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header-container,
#globalheader-container {
  border-bottom: 2px solid #222d7c !important;
}

#blog-title { display: none !important; }

#title {
  font-size: 0px;
  font-family: Courier;
  margin: 0 auto;
}
#title a { color: transparent; }
#blog-description { display: none; }

.blog-controlls-subscribe-btn {
  display: none !important;
}


/*===================================================
    メニュー
===================================================*/

#menu {
  position: relative;
  width: 100%;
  padding-left: 0px;
  height: 40px;
  background: #222d7c;
}

.menu-inner {
  max-width: 100%;
  width: 90%;
  margin: 0 auto;
  height: 40px;
}

#menu li {
  list-style-type: none;
  float: left;
  height: 40px;
  text-align: left;
}
#menu li a {
  padding-left: 15px;
  padding-right: 15px;
  display: block;
  color: #ffffff;
  font-size: 80%;
  font-weight: bold;
  line-height: 40px;
}
#menu li:hover a {
  color: #00DFFC;
  background: #ffffff;
  transition: all .5s;
}
.menu-toggle {
  display: none;
}

@media screen and (max-width: 968px) {
  .menu-inner {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  #top-editarea {
    height: initial;
    background: #222d7c;
    text-align: right;
    width: 100%;
  }
  .menu-toggle {
    color: #ffffff;
    display: inline-block;
    padding: 5px;
    margin: 3px;
  }
  #menu {
    width: 100%;
    display: none;
    height: initial;
    padding: 0;
    margin: 0;
  }
  .menu-inner {
    width: 100%;
    height: initial;
    position: static;
    margin: 0;
  }
  #menu li {
    float: none;
    height: 35px;
    width: 100%;
    list-style-type: none;
    background: #f6efff;
    margin: 0 auto;
    text-align: left;
  }
  #menu li a {
    height: initial;
    color: #222d7c;
    display: block;
  }
  #menu li:hover a {
    color: initial;
    background: initial;
  }
}


/*===================================================
    記事本文（共通・画像）
===================================================*/

.entry-content img {
  max-width: 100% !important;
  max-height: 80vh !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}


/*===================================================
    記事一覧カード・レイアウト（トップページ・記事ページ共通）
===================================================*/

#content-inner {
  width: 90% !important;
  max-width: none !important;
  margin: 20px auto !important;
  padding: 0 !important;
}
#content-inner::after {
  content: "";
  display: block;
  clear: both;
}

#main {
  width: calc(100% - 430px) !important;
  max-width: 1000px !important;
  float: left !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.archive-entries {
  background: #ffffff !important;
  border-radius: 12px !important;
}

#box2 {
  width: 400px !important;
  float: right !important;
  margin: 0 !important;
  padding: 0 !important;
}

.archive-entry {
  position: relative !important;
  background: #ffffff !important;
  padding: 35px 0 35px 280px !important;
  margin: 0 25px !important;
  width: calc(100% - 50px) !important;
  border-bottom: 1px solid #222d7c !important;
  box-sizing: border-box !important;
}
.archive-entry:last-child {
  border-bottom: none !important;
}

.entry-thumb-link {
  position: absolute !important;
  top: 35px !important;
  bottom: 35px !important;
  left: 0 !important;
  width: 260px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
}
.entry-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 4px;
}

.archive-entry-body {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.archive-entry-header {
  position: relative !important;
  padding-right: 100px !important;
  margin-bottom: 8px !important;
}

.entry-title {
  font-size: 1.35rem !important;
  font-weight: bold !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.entry-title a {
  color: #222222 !important;
  text-decoration: none !important;
}
.entry-title a:hover {
  color: #bea3cc !important;
}

.archive-entry .date {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  float: none !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
.archive-entry .date a {
  color: #bea3cc !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

.categories,
.archive-entries .categories,
.first-archive-entry .categories {
  display: block !important;
  margin-top: 6px !important;
  margin-bottom: 10px !important;
  clear: both !important;
}

.categories a,
.archive-entry .categories a,
.first-archive-entry .categories a {
  display: inline-block !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.6 !important;
  padding: 2px 12px !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  margin-left: 0 !important;
  margin-right: 6px !important;
  font-size: 0.78rem !important;
  font-weight: normal !important;
  text-align: center !important;
  vertical-align: middle !important;
  color: #222d7c !important;
  background-color: #ffffff !important;
  border: 1px solid #222d7c !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.categories a:hover,
.archive-entry .categories a:hover,
.first-archive-entry .categories a:hover {
  background-color: #bea3cc !important;
  color: #ffffff !important;
  border-color: #bea3cc !important;
}

.entry-description {
  clear: both !important;
  font-size: 0.85rem !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.archive-entry .bookmark-widget-counter {
  display: none !important;
}

.archive-entry .social-buttons {
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 4px !important;
}

.archive-entry .star-container {
  display: inline-flex !important;
  align-items: center !important;
  transform: scale(0.9) !important;
  transform-origin: left center !important;
  margin-top: 0 !important;
}

.hatena-star-container {
  transform: scale(0.9) !important;
  transform-origin: left center !important;
  margin-top: 0 !important;
}


/*===================================================
    記事ページ（個別記事）
===================================================*/

.entry {
  padding: 30px 40px !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
}
@media screen and (max-width: 600px) {
  .entry {
    padding: 20px 18px !important;
  }
}

.entry-header {
  display: block !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}

.entry-header .date.entry-date {
  display: block !important;
  font-size: 0.85rem !important;
  color: #bea3cc !important;
  margin: 0 0 6px 0 !important;
}
.entry-header .date.entry-date a {
  color: #bea3cc !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

.entry-header .entry-title {
  margin: 0 0 10px 0 !important;
}
.entry-header .entry-title a {
  font-size: 1.9rem !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
  color: #111111 !important;
}
.entry-header .entry-title a:hover {
  color: #bea3cc !important;
}

.entry-header .entry-categories.categories {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 0 !important;
}
.entry-header .entry-categories.categories a {
  display: inline-block !important;
  background-color: #ffffff !important;
  color: #222d7c !important;
  border: 1px solid #222d7c !important;
  border-radius: 4px !important;
  padding: 2px 12px !important;
  font-size: 0.78rem !important;
  font-weight: normal !important;
  height: auto !important;
  line-height: 1.6 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.entry-header .entry-categories.categories a:hover {
  background-color: #bea3cc !important;
  color: #ffffff !important;
  border-color: #bea3cc !important;
}

/* --- 本文内の見出し --- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin: 1.4em 0 0.8em 0 !important;
  line-height: 1.5 !important;
  background: none !important;
}
.entry-content h1 {
  padding: 0.5em !important;
  font-size: 1.6rem !important;
}
.entry-content h2 {
  padding: 0.5em !important;
  font-size: 1.4rem !important;
}
.entry-content h3 {
  padding: 0.5em !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
}
.entry-content h4 {
  padding: 0.2em 0.5em !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
}
.entry-content h5 {
  font-size: 1.15rem !important;
  font-weight: bold !important;
}
.entry-content h6 {
  font-size: 1.05rem !important;
  font-weight: bold !important;
}

/* --- 引用ブロック：明朝体（セリフ） --- */
.entry-content blockquote {
  position: relative !important;
  margin: 1.2em 0 !important;
  padding: 14px 20px 14px 18px !important;
  border-left: 26px solid #f2f2f2 !important;
}
.entry-content blockquote p {
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
    "MS PMincho", serif !important;
  color: #555555 !important;
}
.entry-content blockquote cite {
  position: relative !important;
  padding: 8px 0 0 !important;
  display: block !important;
  text-align: right !important;
  font-size: 0.85em !important;
  color: #aaaaaa !important;
}

/* --- コードブロック --- */
.entry-content pre,
.entry-content code {
  font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif !important;
  position: relative !important;
  margin: 1em 0 !important;
  padding: 12px 12px 12px 50px !important;
  white-space: pre-wrap !important;
  line-height: 1.4 !important;
  font-size: 0.9rem !important;
  color: #000000 !important;
}

/* --- 区切り線 --- */
.entry-content hr {
  width: 50%;
  margin: 2em auto !important;
}

/* --- テーブル：ヘッダー行を薄いグレーに --- */
.entry-content table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 1em 0 !important;
  width: 100% !important;
  overflow: auto !important;
  display: block !important;
  font-size: 0.9rem !important;
}
.entry-content table th,
.entry-content table td {
  border: 1px solid #cccccc !important;
  padding: 6px 12px !important;
}
.entry-content table th {
  background: #f2f2f2 !important;
  color: #000000 !important;
}

/* --- 目次（もくじ） --- */
ul.table-of-contents {
  position: relative !important;
  font-size: 0.9rem !important;
  padding: 1em 2em 1.5em 2em !important;
  margin: 1.5em 0 !important;
  color: #000000 !important;
  display: inline-block !important;
}
ul.table-of-contents:before {
  content: "[ もくじ ]";
  display: inline-block !important;
  margin: 0.2em 0 1em !important;
  padding: 0.2em 1em !important;
  font-weight: bold !important;
  border-bottom: 1px dashed #222d7c !important;
}
ul.table-of-contents li {
  margin: 0 !important;
  line-height: 1.8 !important;
  padding: 0 !important;
  list-style-type: none !important;
}
ul.table-of-contents li a {
  color: #000000 !important;
  text-decoration: none !important;
  border-bottom: 1px dotted #999999 !important;
}
ul.table-of-contents li a:hover {
  color: #bea3cc !important;
}

/* --- 記事フッター（投稿者・日時など） --- */
.entry-footer-section {
  color: #777777 !important;
  font-size: 0.9rem !important;
}
.entry-footer-section a {
  color: #777777 !important;
}

/* --- コメント欄：左の余白と「・」を削除 --- */
.comment-box .comment {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 15px 0 !important;
}
.comment-box .comment li::before,
.comment-box .comment li::marker {
  content: none !important;
}
.comment-box .entry-comment {
  padding: 10px 0 !important;
  position: relative !important;
}
.comment-user-name {
  font-weight: bold !important;
  margin: 0 0 0.4em 0 !important;
}
.comment-content {
  font-size: 0.95rem !important;
}
.comment-metadata {
  color: #999999 !important;
  font-size: 0.8rem !important;
}

/* --- 「コメントを書く」ボタン --- */
.leave-comment-title {
  display: inline-block !important;
  padding: 0.6em 1.2em !important;
  border-radius: 6px !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
}

/* --- 前・次の記事ボタン：左＝古い記事、中央＝TOP（常に中央固定）、右＝新しい記事 --- */
.permalink.pager {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
}

.permalink .pager-next {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}
.permalink .pager-top {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}
.permalink .pager-prev {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

.pager-next a,
.pager-prev a {
  display: inline-block !important;
  border: none !important;
  background: none !important;
  color: #222d7c !important;
  text-decoration: none !important;
  padding: 0 !important;
  font-weight: bold !important;
}
.pager-next a:hover,
.pager-prev a:hover {
  color: #bea3cc !important;
  background: none !important;
}

.permalink .pager-arrow {
  display: none !important;
}
.permalink .pager-next a::before {
  content: "\00AB ";
}
.permalink .pager-prev a::after {
  content: " \00BB";
}


/*===================================================
    ページネーション（トップページ「次のページ」）
===================================================*/

.pager {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  border: none !important;
  background: none !important;
  margin: 24px 0 4px !important;
  padding: 0 25px !important;
}

.pager-next {
  border: none !important;
  background: none !important;
}

:not(.permalink) > .pager-next a::after {
  content: " >";
}


/*===================================================
    サイドバー
===================================================*/

.hatena-module {
  margin-bottom: 20px !important;
  background: #ffffff !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}

.hatena-module-title {
  font-size: 1.1rem !important;
  font-weight: bold !important;
  padding-bottom: 5px !important;
  margin-bottom: 15px !important;
}

/* --- リンク集（自己紹介欄に貼り付けたHTML）：アイコン・サービス名・説明文を列として揃える --- */

.original-linklist br {
  display: none !important;
}

.original-linklist {
  display: grid !important;
  grid-template-columns: auto auto 1fr !important;
  column-gap: 8px !important;
  row-gap: 12px !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.original-linklist li,
.original-linklist li a,
.original-linklist-text {
  display: contents !important;
}

.original-linklist-icon {
  width: 16px !important;
  height: 16px !important;
}
.original-linklist-title {
  font-weight: bold !important;
  color: #333333 !important;
  white-space: nowrap !important;
}
.original-linklist-desc {
  font-size: 0.82rem !important;
  color: #888888 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.original-linklist li a:hover .original-linklist-title {
  color: #bea3cc !important;
}

.hatena-module-profile:has(.original-linklist) .profile-about {
  display: none !important;
}

.hatena-module-custom-popular ul.entries-access-ranking {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.hatena-module-custom-popular li.urllist-item {
  list-style: none !important;
  margin: 0 0 14px 0 !important;
  padding-left: 0 !important;
  border-bottom: none !important;
}
.hatena-module-custom-popular li.urllist-item:last-child {
  margin-bottom: 0 !important;
}

.hatena-module-custom-popular .urllist-item-inner {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.hatena-module-custom-popular .urllist-title-link {
  color: #333333 !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  font-weight: normal !important;
  line-height: 1.4 !important;
}
.hatena-module-custom-popular .urllist-title-link:hover {
  color: #bea3cc !important;
}

.hatena-module-custom-category ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.hatena-module-custom-category li {
  display: inline !important;
  list-style: none !important;
  white-space: nowrap !important;
}
.hatena-module-custom-category li::before {
  content: none !important;
}
.hatena-module-custom-category li::marker {
  content: "" !important;
}

.hatena-module-custom-category li:not(:last-child)::after {
  content: " / ";
  color: #999999;
}

.hatena-module-custom-category a {
  color: #333333 !important;
  text-decoration: none !important;
}
.hatena-module-custom-category a:hover {
  color: #bea3cc !important;
}

.hatena-module-custom-profile .hatena-module-body {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 12px !important;
  row-gap: 6px !important;
  align-items: start !important;
}

.hatena-module-custom-profile .profile-icon-link {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
}

.hatena-module-custom-profile .id {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
}

.hatena-module-custom-profile .hatena-follow-button-box {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  margin: 0 !important;
}

.hatena-module-custom-profile .profile-about {
  grid-column: 1 / 3 !important;
  grid-row: 3 !important;
  margin-top: 8px !important;
}

.hatena-module-custom-ads {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}


/*===================================================
    フッター：ブログトップへ戻るボタン（PC表示）
===================================================*/

.footer-blogtop {
  width: calc(90% - 430px) !important;
  max-width: 1000px !important;
  margin: 8px 0 10px 5% !important;
  text-align: center !important;
}
.footer-blogtop-btn {
  display: inline-block !important;
  padding: 4px 20px !important;
  border: 1px solid #222d7c !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  background-color: #222d7c !important;
  font-weight: bold !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}
.footer-blogtop-btn:hover {
  background-color: #bea3cc !important;
  border-color: #bea3cc !important;
  color: #ffffff !important;
}


/*===================================================
    スマホ表示対応（★必ずこのファイルの一番最後に置く★）
===================================================*/

@media screen and (max-width: 900px) {
  #content-inner {
    width: 95% !important;
  }
  #main, #box2 {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
  }

  #box2 {
    margin-top: 25px !important;
  }

  .archive-entry {
    margin: 0 15px !important;
    width: calc(100% - 30px) !important;
    padding: 20px 0 !important;
    min-height: auto !important;
  }
  .entry-thumb-link {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    margin-bottom: 15px !important;
  }
  .archive-entry-header {
    padding-right: 0 !important;
  }
  .date {
    position: static !important;
    display: block !important;
    margin-bottom: 5px !important;
  }

  .footer-blogtop {
    width: 95% !important;
    max-width: none !important;
    margin: 8px auto 10px !important;
  }
}