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

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  padding-top: 80px;
  background-color: #ffe6e6; /* 薄い赤 */
  color: #330000; /* 濃い赤 */
}

footer {
  width: 100%;
  height: 25px;
  text-align: center;
  padding: 50px 0;
  background-color: #cc0000; /* 濃い赤 */
  color: #ffffff; /* 白 */
}

.footer-text {
  color: rgb(255, 255, 255);
}

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 50%, #ffce5b 50%);
  font-weight: bold;
}

em {
  background: linear-gradient(transparent 50%, #ffce5b 50%);
  font-style: normal;
  font-weight: bold;
}
.red-underline {
  background: linear-gradient(transparent 50%, #f8a2a2 50%);
}
strong {
  background: linear-gradient(transparent 50%, #f8a2a2 50%);
}
.blue-underline {
  background: linear-gradient(transparent 50%, #a6a2f8 50%);
}

.gray-font {
  color: #a1a1a1;
}

h1 {
  color: #000000;
  font-size: 32px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
}
@media (max-width: 767.98px) {
  h1 {
    font-size: 24px;
  }
}
h2 {
  color: #ffffff;
  position: relative;
  padding: 0.6em;
  background: #cc0000; /* 濃い赤 */
  font-size: 24px;
}

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

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

h3 {
  color: #0f2158;
  padding: 0.2em 0;
  border-top: solid 3px #ac1616;
  border-bottom: solid 3px #ac1616;
  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;
}

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: visible;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.1);
  display: block;
  width: 100%;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #cc0000 #f0f0f0;
}

/* Webkit系ブラウザ用のスクロールバー */
.scroll-table::-webkit-scrollbar {
  height: 8px;
}

.scroll-table::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

.scroll-table::-webkit-scrollbar-thumb {
  background: #cc0000;
  border-radius: 4px;
}

.scroll-table::-webkit-scrollbar-thumb:hover {
  background: #ac1616;
}

@media (max-width: 767.98px) {
  .scroll-table {
    width: 100%; /* モバイル表示時に横幅を最大に設定 */
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .scroll-table {
    width: auto; /* PC表示時に横幅を表に合わせて可変に設定 */
    max-width: none;
  }
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: fit-content;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(204, 0, 0, 0.1);
  background: #fff;
  border: none !important;
  outline: none !important;
  display: table;
  table-layout: auto;
}

th,
td {
  font-size: 14px;
  border: none !important;
  outline: none !important;
  text-align: left;
  padding: 12px 16px;
  vertical-align: top;
  background-clip: padding-box;
  white-space: nowrap;
  /* min-width: 120px; */
}

th {
  font-weight: bold;
  position: sticky;
  top: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #cc0000 0%, #ac1616 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

tr:nth-child(even) td {
  color: #330000;
  background: #fff5f5;
  transition: background-color 0.2s ease;
}

tr:nth-child(odd) td {
  color: #330000;
  background: #ffffff;
  transition: background-color 0.2s ease;
}

tr:hover td {
  background: #ffeeee !important;
  transition: all 0.2s ease;
}

td:first-child {
  font-weight: 600;
  color: #000000;
}

/* テーブル内のリンクスタイル */
table a {
  color: #cc0000;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted #cc0000;
  transition: all 0.2s ease;
}

table a:hover {
  color: #ff6666;
  border-bottom: 1px solid #ff6666;
  background: rgba(204, 0, 0, 0.05);
  padding: 2px 4px;
  border-radius: 3px;
}

main > table,
main .scroll-table {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* レスポンシブテーブルの追加改善 */
@media (max-width: 767.98px) {
  .scroll-table {
    /* モバイルでより明確なスクロール表示 */
    border: 1px solid #e0e0e0;
    position: relative;
    width: auto; /* 横幅を表に合わせて可変にする */
    max-width: none; /* 最大幅の制限を解除 */
  }

  .scroll-table.scrollable::after {
    content: "→ スワイプして右を見る";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(204, 0, 0, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0.8;
    z-index: 10;
  }

  /* テーブルの内容が一部でも見切れている場合のヒント */
  .scroll-table.scrollable:not(:hover):not(.scrolled)::after {
    animation: fadeInOut 3s ease-in-out infinite;
  }

  @keyframes fadeInOut {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
  }

  /* テーブルがスクロールされた時はヒントを非表示 */
  .scroll-table.scrolled::after {
    display: none;
  }

  table th,
  table td {
    min-width: 100px;
    font-size: 13px;
    padding: 10px 12px;
  }
}
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;
  border-left: 4px solid #f2f2f2;
  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: 2em;
  margin-bottom: 2em;
}

/*
  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;
  background-color: #cc0000; /* 濃い赤 */
  color: #ffffff; /* 白 */
}

.navbar-brand::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("https://storage.cloud.google.com/ramen-shop-japan-us/1024x1024_white.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) {
  /* 横スクロールを完全に防ぐ */
  body {
    overflow-x: hidden;
  }

  #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: #fff; /* 白色に変更してナビゲーションバーで見えるように */
  }

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

  /* モバイルサイドバー内の要素調整 */
  .sidebar .card {
    background-color: #fff !important;
    border: 1px solid #dee2e6;
    margin: 10px;
  }

  .sidebar .card-body {
    color: #333 !important;
  }

  /* モバイルサイドバー内のボタンとリンクのスタイリング */
  .sidebar .btn {
    color: #333 !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
  }

  .sidebar .page-button {
    color: #333 !important;
    background-color: transparent !important;
  }

  .sidebar .page-button:hover {
    background-color: #e9ecef !important;
  }

  .is-open .overlay {
    opacity: .5; /* 透明度を下げて背景をより見やすく */
    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: 2 px 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>");
}

/* =============================
  上部のバーの背景色を赤色に変更 */
.navbar {
  background-color: red;
}

.navbar a {
  color: #ffffff; /* 白 */
}

a {
  color: #cc0000; /* 濃い赤 */
  text-decoration: none;
}

a:hover {
  color: #ff6666; /* 明るい赤 */
  text-decoration: underline;
}

/* =============================
  Amazon Product Card
============================= */
.amazon-product-card {
  display: inline-block;
  width: 100%;
  max-width: 280px;
  margin: 1.5em auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  background: #fff;
}

.amazon-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.amazon-product-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.amazon-product-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.amazon-product-image img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: transform 0.2s;
}

.amazon-product-card:hover .amazon-product-image img {
  transform: scale(1.02);
}

.amazon-product-info {
  padding: 16px;
  background: #fff;
}

.amazon-product-price {
  font-size: 18px;
  font-weight: bold;
  color: #cc0000;
  text-align: right;
  margin-bottom: 8px;
}

.amazon-product-name {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.8em;
}

.amazon-product-button {
  background: linear-gradient(135deg, #ff9900 0%, #ffaa19 100%);
  color: white;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  transition: background 0.2s, transform 0.1s;
  position: relative;
  overflow: hidden;
}

.amazon-product-button:hover {
  background: linear-gradient(135deg, #e68900 0%, #ff9900 100%);
  transform: translateY(-1px);
}

.amazon-product-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.amazon-product-card:hover .amazon-product-button::before {
  left: 100%;
}

.amazon-icon {
  display: inline-block;
  position: relative;
}

@media (max-width: 767.98px) {
  .amazon-product-card {
    max-width: 100%;
    margin: 1em 0;
  }

  .amazon-product-image {
    height: 180px;
  }

  .amazon-product-name {
    font-size: 13px;
  }

  .amazon-product-price {
    font-size: 16px;
  }
}

/* ドロップダウンメニューの文字色を調整 */
.dropdown-menu .dropdown-item {
  color: #000000; /* 黒文字 */
  background-color: #ffffff; /* 白背景 */
}

.dropdown-menu .dropdown-item:hover {
  color: #ffffff; /* 白文字 */
  background-color: #cc0000; /* 赤背景 */
}

.sidebar .card gcse\:searchbox-only {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.sidebar .gsc-search-box {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.sidebar .gsc-input-box {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.sidebar .gsc-input {
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}