/* サイドバーのプロフィール等のリンクを上下中央配置し、文字は左寄せ */
.sidebar .card-body a.align-items-center {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  text-align: left;
}


body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  padding-top: 80px;
}

footer {
  width: 100%;
  text-align: center;
  padding: 36px 0;
  background-color: #0f2158;
}

footer p,
.footer-text {
  color: #ffffff;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.03em;
}

li,
p,
a {
  font-size: 14px;
  margin-bottom: 5px;
  word-break: break-all;
}

p {
  line-height: calc(1em + 15px);
}

.yellow-underline {
  background: linear-gradient(transparent 70%, rgba(254, 240, 138, 0.6) 70%);
  font-weight: bold;
}

em {
  background: none;
  font-style: normal;
  font-weight: 600;
  color: #0284c7;
  border-bottom: 1.5px solid #38bdf8;
  padding-bottom: 1px;
}
.red-underline {
  background: linear-gradient(transparent 70%, rgba(254, 202, 202, 0.6) 70%);
}
strong {
  background: none;
  font-weight: 700;
  color: #0f172a;
}
.blue-underline {
  background: linear-gradient(transparent 70%, rgba(191, 219, 254, 0.6) 70%);
}

.gray-font {
  color: #555555;
}

h1 {
  color: #000000;
  font-size: 32px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
}

h2 {
  color: #ffffff;
  position: relative;
  padding: 0.6em;
  background: #0f2158;
  font-size: 24px;
}

h2:after {
  position: absolute;
  content: "\A" ;
  top: 100%;
  left: 30px;
  border: 7px solid transparent;
  border-top: 7px solid #0f2158;
  width: 0;
  height: 0;
}

h2:after::after {
  height: 7px;
  content: '';
}

h3 {
  color: #0f2158;
  padding: 0.2em 0;
  border-top: solid 3px #0f2158;
  border-bottom: solid 3px #0f2158;
  font-size: 20px;
}

h4 {
  color: #000000;
  padding: 0.2em 0;
  font-size: 20px;
  border-bottom: 1px solid #000;
}

h2, h3, h4 {
  margin-top: 40px;
  margin-bottom: 40px;
  word-break: break-all;
}

@media (max-width: 767.98px) {
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 17px;
    line-height: 1.45;
    padding: 0.5em 0.8em;
    margin-top: 32px;
    margin-bottom: 24px;
    word-break: normal;
    overflow-wrap: break-word;
  }
  h3 {
    font-size: 16px;
    line-height: 1.4;
    padding: 0.3em 0;
    margin-top: 26px;
    margin-bottom: 18px;
    word-break: normal;
    overflow-wrap: break-word;
  }
  main {
    padding-bottom: 90px;
  }
}

h4::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23000' d='M469.402,35.492C334.09,110.664,197.114,324.5,197.114,324.5L73.509,184.176L0,254.336l178.732,222.172 l65.15-2.504C327.414,223.414,512,55.539,512,55.539L469.402,35.492z' /></svg>");
  background-size: contain;
  vertical-align: middle;
  margin-right: .5em;
}

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  font-size: 14px;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

/*
  Table
*/
.scroll-table {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #aaa #f1f1f1;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.scroll-table::-webkit-scrollbar {
  height: 5px;
}
.scroll-table::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.scroll-table::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: 3px;
}
.scroll-table::-webkit-scrollbar-thumb:hover {
  background: #777;
}

@media (min-width: 767.98px) {
    .scroll-table {
        overflow: auto;
        white-space: normal;
    }
}

th,
td {
  font-size: 12px;
  border:solid 1px white;
  text-align:left;
  padding: 10px 0;
  padding-left:1em;
  padding-right:1em;
}

th {
font-weight: bold;
position: sticky;
top: 0;
color: #fff;
background: #333;
}

tr:nth-child(even) {
color:rgb(0, 0, 0);
background: #e2e2e2;
}

tr:nth-child(odd) {
color:rgb(0, 0, 0);
background: #f6f6f6;
}

@media (max-width: 767.98px) {
  .scroll-table {
    white-space: normal;
  }

  .scroll-table th,
  .scroll-table td {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* 4列テーブル（目的別ガイド表）の最適化 */
  .scroll-table table:not(:has(th:nth-child(5))) th:nth-child(1),
  .scroll-table table:not(:has(th:nth-child(5))) td:nth-child(1) {
    min-width: 140px;
    max-width: 165px;
    white-space: normal;
    font-weight: 600;
  }
  .scroll-table table:not(:has(th:nth-child(5))) th:nth-child(2),
  .scroll-table table:not(:has(th:nth-child(5))) td:nth-child(2),
  .scroll-table table:not(:has(th:nth-child(5))) th:nth-child(3),
  .scroll-table table:not(:has(th:nth-child(5))) td:nth-child(3) {
    min-width: 120px;
    max-width: 140px;
    white-space: normal;
  }
  .scroll-table table:not(:has(th:nth-child(5))) th:nth-child(4),
  .scroll-table table:not(:has(th:nth-child(5))) td:nth-child(4) {
    min-width: 220px;
    white-space: normal;
  }

  /* 8列テーブル（総合ランキング表）の最適化 */
  .scroll-table table:has(th:nth-child(8)) th:nth-child(1),
  .scroll-table table:has(th:nth-child(8)) td:nth-child(1) {
    min-width: 44px;
    text-align: center;
    white-space: nowrap;
    padding-left: 6px;
    padding-right: 6px;
  }
  .scroll-table table:has(th:nth-child(8)) th:nth-child(2),
  .scroll-table table:has(th:nth-child(8)) td:nth-child(2) {
    min-width: 130px;
    max-width: 155px;
    white-space: normal;
    font-weight: 600;
  }
  .scroll-table table:has(th:nth-child(8)) th:nth-child(3),
  .scroll-table table:has(th:nth-child(8)) td:nth-child(3),
  .scroll-table table:has(th:nth-child(8)) th:nth-child(5),
  .scroll-table table:has(th:nth-child(8)) td:nth-child(5),
  .scroll-table table:has(th:nth-child(8)) th:nth-child(6),
  .scroll-table table:has(th:nth-child(8)) td:nth-child(6),
  .scroll-table table:has(th:nth-child(8)) th:nth-child(7),
  .scroll-table table:has(th:nth-child(8)) td:nth-child(7) {
    min-width: 65px;
    white-space: nowrap;
    text-align: center;
  }
  .scroll-table table:has(th:nth-child(8)) th:nth-child(4),
  .scroll-table table:has(th:nth-child(8)) td:nth-child(4) {
    min-width: 200px;
    white-space: normal;
  }
  .scroll-table table:has(th:nth-child(8)) th:nth-child(8),
  .scroll-table table:has(th:nth-child(8)) td:nth-child(8) {
    min-width: 140px;
    white-space: normal;
  }
}

main > table,
main .scroll-table {
  margin-top: 2em;
  margin-bottom: 2em;
}
main details {
  margin-top: 2em;
  margin-bottom: 2em;
}
main p:not(.card p) {
  margin-top: 2em;
  margin-bottom: 2em;
}
main .mermaid {
  margin-top: 2em;
  margin-bottom: 2em;
}
blockquote,
main iframe {
  margin-top: 2em;
  margin-bottom: 2em;
}
blockquote > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
nav > div > p {
  margin-top: 2em !important;
  margin-bottom: 0 !important;
}
li > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
ul > li:not(.dropdown-menu li){
  margin-bottom: 15px;
}
ul > li > ul,
ul > li > ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
ul > li > ul > li,
ul > li > ol > li,
ul > li > ul > li > ul > li {
  margin-bottom: 0 !important;
}

#nav > ul > li > ul > li {
  margin-bottom: 0;
}

/*
  Code
*/
code {
  display: inline-block;
  background: #f0f5f9;
  border: 1px solid #e6edf3;
  padding: .04em .3em;
  margin: 0 .2em;
  border-radius: 3px;
  line-height: 1.4;
  font-size: .85em;
  color: rgba(0, 0, 0, 0.6);
  word-break: break-all;
}

/*
  Blockquote
*/
blockquote {
  padding: 1em 1.5em;
  background: #f8fafc;
  border-left: 4px solid #0284c7;
  border-radius: 0 8px 8px 0;
  margin: 1.5em 0;
  color: #334155;
  word-break: break-all;
}

blockquote:has(cite) {
  padding-bottom: .5em;
}

blockquote p {
  margin-top: 0;
}

blockquote cite {
  display: block;
  color: #8b8b8b;
  font-size: .8em;
  text-align: right;
}

/*
  Card
*/
.card {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

@media (max-width: 767.98px) {
    .description-text {
        display: none;
    }
}

/*
  Search bar
*/
.gsc-control-cse table.gsc-input {
  margin-bottom: 0;
}

.gsc-control-cse .gsc-table-result {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 125% !important;
}

/*
  Image
*/
main amp-img:not(.card amp-img) {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  max-width: 100%;
  width: auto;
}

.border-img,
main img:not(.card-img):not(.avatar):not(.social-icon) {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

picture.article-responsive-picture {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  text-align: center;
}

picture.article-responsive-picture img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

/*
  SideBar
*/
.sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  padding: 20px 0 0;
  z-index: 880;
  box-sizing: border-box;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
  box-sizing: border-box;
  width: 100%;
  z-index: 2100;
}

.navbar-brand::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("https://storage.googleapis.com/moderniser-repo-images/common/navbar.webp");
  background-size: contain;
  vertical-align: middle;
  margin-right: .5em;
}

@media (min-width: 767.98px) {
  .navbar {
    position: fixed;
    top: 0;
  }
}

.sidebar .nav-link {
  color: #333333;
}

.sidebar .page-button,
.page-button.btn-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  color: #333;
  background-color: transparent;
  border: 0;
  text-decoration: none;
}

.sidebar .page-button {
  display: inline-block; /* 必要に応じて設定 */
  max-width: 100%; /* 親要素の幅に収まるように設定 */
  white-space: nowrap; /* テキストを1行に制限 */
  overflow: hidden; /* 幅を超えた部分を非表示 */
  text-overflow: ellipsis; /* 非表示部分に「...」を表示 */
}

.sidebar .page-button::before {
  flex-shrink: 0; /* アイコンが縮小されないように設定 */
  display: inline-block; /* アイコンを明示的に表示 */
  width: 1em; /* アイコンの幅を固定 */
  height: 1em; /* アイコンの高さを固定 */
  margin-right: 0.5em; /* テキストとの間隔を調整 */
}

.sidebar .page-button:hover,
.sidebar .page-button:focus,
.page-button.btn-toggle:hover,
.page-button.btn-toggle:focus{
  color: #333;
  background-color: rgb(216, 216, 216);
}

.sidebar .page-button::before,
.page-button.btn-toggle::before {
  content: '';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='%23000' d='M163.916,0 92.084,71.822 276.258,255.996 92.084,440.178 163.916,512 419.916,255.996z' /></svg>");
  background-size: 0.8em 0.8em;
  background-repeat:  no-repeat;
  background-position: left center;
  width: 1.0em;
  height: 0.8em;
  margin-right: .5em;
}

.page-button.btn-toggle::before {
  transition: transform .35s ease;
  transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: #333;
}

.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.sidebar .twitter-btn,
.sidebar .instagram-btn,
.sidebar .mail-btn {
  width: 100vh;
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 30px;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  color: #333;
  border: 0;
  text-decoration: none;
  content: '';
  background-size: 1.5em 1.5em;
  background-repeat:  no-repeat;
  background-position: left center;
  background-color: transparent;
}
.sidebar .twitter-btn {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000' d='M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z' /></svg>");
}
.sidebar .instagram-btn {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z'></path><path d='M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z'></path><path d='M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z' /></svg>");
}
.sidebar .mail-btn {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000' d='M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM8 8h16c0.286 0 0.563 0.061 0.817 0.177l-8.817 10.286-8.817-10.287c0.254-0.116 0.531-0.177 0.817-0.177zM6 22v-12c0-0.042 0.002-0.084 0.004-0.125l5.864 6.842-5.8 5.8c-0.045-0.167-0.069-0.34-0.069-0.517zM24 24h-16c-0.177 0-0.35-0.024-0.517-0.069l5.691-5.691 2.826 3.297 2.826-3.297 5.691 5.691c-0.167 0.045-0.34 0.069-0.517 0.069zM26 22c0 0.177-0.024 0.35-0.069 0.517l-5.8-5.8 5.865-6.842c0.003 0.041 0.004 0.083 0.004 0.125v12z' /></svg>");
}

/* =============================
  Related Articles Button
============================= */
#related-articles-btn {
  position: fixed;
}
.related-articles-container {
  position: relative;
  text-align: center;
  margin-top: 24px;
}
#related-articles-btn #related-articles-badge {
  position: absolute;
  top: -5px;
  right: 0px;
  width: 20px;
  height: 20px;
  padding: 0;
  background: #e53935;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  pointer-events: none;
}
#related-articles-btn {
  position: fixed;
  right: 24px;
  bottom: 182px;
  z-index: 110;
  background: #575757;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  transition: background 0.2s;
  padding: 0;
  opacity: 0.7;
}
#related-articles-btn:hover {
  background: #2e2e2e;
}
#related-articles-btn svg {
  display: block;
  width: 28px;
  height: 28px;
}
.related-articles-label {
  position: fixed;
  right: 24px;
  bottom: 158px;
  font-size: 13px;
  color: #222;
  text-align: center;
  background: none;
  z-index: 111;
  pointer-events: none;
  width: 56px;
  opacity: 0.7;
}
#related-articles-collapse {
  position: fixed;
  right: 24px;
  bottom: 260px;
  max-width: 480px;
  background: rgba(87, 87, 87, 0.85);
  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
  padding: 16px 12px;
  text-align: left;
  z-index: 3120;
  border-radius: 16px;
  max-height: 600px;
  overflow-y: auto;
  backdrop-filter: blur(4px);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge */
}
#related-articles-collapse::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.related-articles-fade {
  position: sticky;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 100px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(87,87,87,0) 40%, rgba(87,87,87,1) 100%);
  z-index: 10;
  margin-top: -100px;
}
@media (max-width: 767.98px) {
  #related-articles-btn {
    right: 92px;
    bottom: 94px;
  }
  .related-articles-label {
    right: 92px;
    bottom: 70px;
  }
  #related-articles-collapse {
    right: 8px;
    left: 8px;
    bottom: 160px;
    top: 24px;
    max-width: none;
    min-width: 0;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 18px;
    padding: 18px 10px 10px 10px;
    margin: 0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    overflow-y: auto;
    z-index: 3120;
  }
}

#related-articles-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.related-article-card {
  margin-bottom: 16px;
  background: none;
  border-radius: 10px;
  box-shadow: none;
  overflow: visible;
  transition: none;
  padding-bottom: 0;
  border: none;
}
.related-article-card:last-child {
  margin-bottom: 0;
}
.related-article-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #222;
  padding: 8px;
  transition: background 0.2s;
  width: 100%;
  min-height: 64px;
  border: none;
  box-shadow: none;
}
.related-article-link:hover {
  background: #393939;
}
.related-article-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 64px;
  margin-right: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.related-article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  box-shadow: none;
}
#related-articles-list li {
  border: none !important;
  box-shadow: none !important;
}
.related-article-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.related-article-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #ffffff;
  line-height: 1.3;
  word-break: break-all;
  display: flex;
  align-items: center;
  text-align: left;
  height: 100%;
  min-height: 48px;
}
.related-article-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  word-break: break-all;
  max-height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
}
#related-articles-collapse::-webkit-scrollbar {
  width: 8px;
  background: rgba(87, 87, 87, 0.85);
}
#related-articles-collapse::-webkit-scrollbar-thumb {
  background: #393939;
  border-radius: 6px;
}
#related-articles-collapse::-webkit-scrollbar-thumb:hover {
  background: #575757;
}
#related-articles-collapse::-webkit-scrollbar-corner {
  background: rgba(87, 87, 87, 0.85);
}

/* =============================
  Related Articles Badge
============================= */
#related-articles-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #e53935;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  pointer-events: none;
}


/* =============================
  Web Share Button
============================= */
.web-share-container {
  text-align: center;
  margin-top: 24px;
}
#web-share-btn {
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 110;
  background: #575757;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  transition: background 0.2s;
  padding: 0;
  opacity: 0.7;
}
#web-share-btn:hover {
  background: #2e2e2e;
}
#web-share-btn svg {
  display: block;
  width: 28px;
  height: 28px;
}
.web-share-label {
  position: fixed;
  right: 24px;
  bottom: 70px;
  font-size: 13px;
  color: #222;
  text-align: center;
  background: none;
  z-index: 111;
  pointer-events: none;
  width: 56px;
  opacity: 0.7;
}

@media (max-width: 767.98px) {
  #toggle {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 2200;
  }

  #toggle-box {
    position: relative;
    width: 36px;
    height: 32px;
    cursor: pointer;
    z-index: 2300;
  }

  #toggle-box > span {
    width: 100%;
    height: 1px;
    left: 0;
    display: block;
    background: rgb(255, 255, 255);
    position: absolute;
    transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;
  }

  #toggle-box > span:nth-child(1) {
    top: 0;
  }

  #toggle-box > span:nth-child(2) {
    top: 50%;
    transform: translatey(-50%);
  }

  #toggle-box > span:nth-child(3) {
    bottom: 0;
  }

  .sidebar {
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden; /* 横スクロールを防ぐ */
    width: 90%; /* 幅を100%に設定 */
    height: 100%;
    background: #000;
    color: #fff;
    position: fixed;
    top: 0;
    right: 0;
    text-align: center;
    transform: translateX(121%); /* 初期状態で画面外に配置 */
    transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    box-sizing: border-box; /* ボックスサイズを調整 */
  }

  .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1090;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }

  .is-open {
    overflow: visible;
  }

  .is-open .navbar {
    z-index: 2100;
  }

  .is-open #toggle {
    z-index: 2200;
  }

  .is-open #toggle-box {
    z-index: 2300;
  }

  .is-open #toggle-box > span {
    background: #000;
  }

  .is-open #toggle-box > span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg) translatey(-50%);
  }

  .is-open #toggle-box > span:nth-child(2) {
    width: 0;
  }

  .is-open #toggle-box > span:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg) translatey(-50%);
  }

  .is-open .sidebar {
    transform: translateX(11%);
    z-index: 1100;
    padding-top: 100px;
  }

  .is-open .overlay {
    opacity: .8;
    z-index: 1090;
    visibility: visible;
  }
}

*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.menu {
  display: block;
  overflow: visible;
  width: 60px;
  height: 60px;
  margin: 30px auto;
  cursor: pointer;
  -webkit-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
  border: 3px solid transparent;
  border-radius: 50%;
  background-color: #1b2538;
  position: fixed;
  bottom: 8px;
  right: 8px;
}

.menu div.menubar {
  width: 30px;
  margin: 17px auto;
}

.menu div.menubar .bar {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 3px;
  border-radius: 2px;
  background-color: rgb(255, 255, 255);
}

.menu ul {
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
  text-align: center;
  opacity: 0;
}

.menu ul li {
  display: inline-block;
  width: 100%;
}

.menu ul li a {
  display: inline-block;
  padding: 0.7em 0.5em;
  -webkit-transition: all 0.3s ease-in;
          transition: all 0.3s ease-in;
  text-decoration: none;
  color: #1b2538;
  width: 100%;
}

.menu ul li a:hover {
  color: #ffffff;
  background-color: #1b2538;
}

.menu ul li a:target {
  border-bottom-color: #1b2538;
}

#cp_navimenuid {
  display: none;
}

#cp_navimenuid:checked ~ .menu {
  height: auto;
  width: auto;
  border: 3px solid #1b2538;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
}

#cp_navimenuid:checked ~ .menu > ul {
  display: block;
  opacity: 1;
}

#cp_navimenuid:checked ~ .menu > .menubar {
  display: none;
}

.sidebar .language-dropdown {
  display: none;
}

@media (max-width: 767.98px) {
  .sidebar .language-dropdown {
    display: block;
  }

  .navbar .language-dropdown {
    display: none;
  }

}

/*
 TOC
*/
.toc {
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}

.toc_title {
    font-size: 110%;
    font-weight:bold;
    color:#000;
}

.toc:before, .toc:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}

.toc:before {left: 10px;}
.toc:after {right: 10px;}
.toc p {
    margin: 0;
    padding: 0;
}

.toc ol {
    counter-reset:num;
    list-style-type: none!important;
    padding:0;
    margin:0;
}

.toc ol li {
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 0.5em 0.5em 0.5em 30px;
}

.toc ol li:before {
    position: absolute;
    counter-increment: num;
    content: counter(num);
    display:inline-block;
    background: #555;
    color: #FFF;
    font-weight:bold;
    font-size: 14px;
    border-radius: 50%;
    left: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    top: 10px;
}

.ad_overlay {
  position: fixed;
  left: 0;
  bottom: 0px;
  z-index: 9999;
  width: 100%;
  height: 100px;
  text-align: center;
  pointer-events: auto;
}

.ad_overlay__inner {
  margin: 0 auto;
}

#sidebar-resizer {
  width: 2px;
  cursor: ew-resize;
  background-color: #ccc;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
}

#sidebar-collapse {
  min-width: 235px;
  max-width: 425px;
}

@media (max-width: 767.98px) {
  .sidebar .page-button {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
  }
}


/* ===== article.title カスタム ===== */
article.title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  min-height: 40vh; /* 上下中央寄せのため高さを確保 */
  width: 90vw;
  margin: 0 auto;
  font-size: 2.2rem;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.2;
  background: none; /* 必要に応じて背景色を追加 */
}

/* =============================
  Load More Articles Button
============================= */
.load-more-articles-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto 0 auto;
  padding: 0.8em 2.2em;
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, #0f2158 0%, #3a7bd5 100%);
  border: none;
  border-radius: 32px;
  box-shadow: 0 4px 16px rgba(58,123,213,0.15);
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s, transform 0.15s;
  position: relative;
  overflow: hidden;
}

.load-more-articles-btn:hover, .load-more-articles-btn:focus {
  background: linear-gradient(90deg, #3a7bd5 0%, #0f2158 100%);
  box-shadow: 0 8px 24px rgba(58,123,213,0.25);
  transform: translateY(-2px) scale(1.03);
  outline: none;
}

.load-more-articles-btn .icon {
  margin-left: 0.7em;
  display: inline-block;
  vertical-align: middle;
  width: 1.2em;
  height: 1.2em;
}

@media (max-width: 767.98px) {
  .load-more-articles-btn {
    width: 90%;
    font-size: 1em;
    padding: 0.7em 0;
  }
}

/* タップターゲットのアクセシビリティ向上 */
.page-button, .btn-toggle {
  min-width: 48px;
  min-height: 32px;
  margin: 1px 0 !important;
  line-height: 1.5 !important;
  font-size: 16px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767.98px) {
  .page-button, .btn-toggle {
    font-size: 18px;
    min-width: 48px;
    min-height: 32px;
    margin: 2px 0 !important;
  }
}

/* =============================
  GitHub風 callout ブロック
============================= */
.markdown-alert {
  border-left: 0.25em solid #6cb6ff;
  background: #f1f8ff;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  border-radius: 6px;
  position: relative;
}
.markdown-alert-title {
  font-weight: bold;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  font-size: 1em;
}
.markdown-alert-note    { border-color: #6cb6ff; background: #f1f8ff; }
.markdown-alert-tip     { border-color: #54aeff; background: #f0f6fc; }
.markdown-alert-important { border-color: #d876e3; background: #fbefff; }
.markdown-alert-warning { border-color: #ffd33d; background: #fffdef; }
.markdown-alert-caution { border-color: #f85149; background: #ffebe9; }

.markdown-alert-note .markdown-alert-title      { color: #0969da; }
.markdown-alert-tip .markdown-alert-title       { color: #1b7c83; }
.markdown-alert-important .markdown-alert-title { color: #8250df; }
.markdown-alert-warning .markdown-alert-title   { color: #9a6700; }
.markdown-alert-caution .markdown-alert-title   { color: #cf222e; }

.markdown-alert-title::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  min-width: 16px;
  min-height: 16px;
  margin-right: 0.5em;
  background-size: contain;
  background-repeat: no-repeat;
}

.markdown-alert-note .markdown-alert-title::before {
  /* info: iマーク */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%230969da' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' stroke='%230969da' stroke-width='2' fill='none'/><rect x='9' y='8' width='2' height='6' rx='1'/><rect x='9' y='5' width='2' height='2' rx='1'/></svg>");
}
.markdown-alert-tip .markdown-alert-title::before {
  /* tip: 電球 */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%231b7c83' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a6 6 0 0 0-3 11.3V16a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2.7A6 6 0 0 0 10 2zm1 14a1 1 0 0 1-2 0v-1h2v1zm2-3H7v-1.17A4 4 0 1 1 13 12.83V13z'/></svg>");
}
.markdown-alert-important .markdown-alert-title::before {
  /* important: 星 */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%238250df' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><polygon points='10,2 12.59,7.36 18.51,8.09 14,12.26 15.18,18.09 10,15.27 4.82,18.09 6,12.26 1.49,8.09 7.41,7.36'/></svg>");
}
.markdown-alert-warning .markdown-alert-title::before {
  /* warning: 三角の警告 */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%239a6700' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><polygon points='10,2 19,18 1,18'/><rect x='9' y='8' width='2' height='4'/><rect x='9' y='14' width='2' height='2'/></svg>");
}
.markdown-alert-caution .markdown-alert-title::before {
  /* caution: バツ・エラー */
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23cf222e' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' stroke='%23cf222e' stroke-width='2' fill='none'/><line x1='6' y1='6' x2='14' y2='14' stroke='%23cf222e' stroke-width='2'/><line x1='14' y1='6' x2='6' y2='14' stroke='%23cf222e' stroke-width='2'/></svg>");
}

/*
  Image Lightbox Modal
*/
.zoomable-image,
main img:not(.avatar):not(.card-img):not(.social-icon),
main amp-img:not(.card amp-img) {
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.zoomable-image:hover,
main img:not(.avatar):not(.card-img):not(.social-icon):hover,
main amp-img:not(.card amp-img):hover {
  opacity: 0.95;
}

#image-lightbox-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: zoom-out;
  padding: 20px;
  box-sizing: border-box;
}

#image-lightbox-modal.active {
  display: flex;
  opacity: 1;
}

#image-lightbox-content {
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  background-color: #ffffff;
}

#image-lightbox-modal.active #image-lightbox-content {
  transform: scale(1);
}

#image-lightbox-caption {
  margin-top: 14px;
  color: #f1f5f9;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  max-width: 80vw;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

#image-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s;
  z-index: 100000;
}

#image-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}

/* =============================
  SNS Share Buttons & Toast
============================= */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  transition: all 0.18s ease;
  user-select: none;
}
.share-btn-x {
  background-color: #0f1419;
  color: #ffffff;
}
.share-btn-x:hover {
  background-color: #272c30;
  color: #ffffff;
  transform: translateY(-1px);
}
.share-btn-hatebu {
  background-color: #00a4de;
  color: #ffffff;
}
.share-btn-hatebu:hover {
  background-color: #008ec0;
  color: #ffffff;
  transform: translateY(-1px);
}
.share-btn-copy {
  background-color: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.share-btn-copy:hover {
  background-color: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.copy-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background-color: #0f172a;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 99999;
  pointer-events: none;
}
.copy-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/*
  Reading Progress Bar
*/
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #0284c7, #2563eb);
  z-index: 999999;
  transition: width 0.1s ease-out;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.4);
}

/*
  Code Block Copy Button
*/
.code-block-wrapper {
  position: relative;
  margin: 1.5em 0;
}
.code-block-wrapper pre {
  margin: 0 !important;
}
.copy-code-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  z-index: 5;
}
.code-block-wrapper:hover .copy-code-btn {
  opacity: 1;
}
.copy-code-btn:hover {
  color: #f8fafc;
  background: rgba(51, 65, 85, 0.95);
  border-color: rgba(148, 163, 184, 0.45);
}
.copy-code-btn.copied {
  opacity: 1;
  background: rgba(22, 101, 52, 0.35);
  border-color: rgba(34, 197, 94, 0.5);
}
@media (max-width: 767.98px) {
  .copy-code-btn {
    opacity: 0.85;
  }
}