/* 
 This CSS file is used to override the existing styles of the theme.
 You can change the article headings, fonts, colors, etc.
*/
/* Web Font */
@font-face {
  font-family: "MyFont";
  src:
    url("/fonts/MPLUS1-Light.woff") format("woff"),
    url("/fonts/MPLUS1-Regular.woff") format("woff"),
    url("/fonts/MPLUS1-Medium.woff") format("woff"),
    url("/fonts/MPLUS1-SemiBold.woff") format("woff"),
    url("/fonts/MPLUS1-Bold.woff") format("woff");  
  font-display: swap;

}

.myfont_l {
  font-family: "MyFont";
  font-weight: 400;
  font-display: swap;

}

.myfont_r {
  font-family: "MyFont";
  font-weight: 400;
  font-display: swap;
}

.myfont_m {
  font-family: "MyFont";
  font-weight: 500;
  font-display: swap;

}

.myfont_sb {
  font-family: "MyFont";
  font-weight: 600;
  font-display: swap;
}

.myfont_b {
  font-family: "MyFont";
  font-weight: 700;
  font-display: swap;
}

 /* 目次 */
  .toc_title {
    background-color:#f3f4f6;
    border: 1px solid #cbd5e1;
    padding:1em;
  }

  /* チェックボックスを非表示 */
  .toc-check {
    display: none;
  }
  /* ラベル部分の修飾 */
  .toc-label {
    background: #d1d5db;
    color: #000;
    display:block;
    border-bottom:1px solid #cbd5e1;
    width:auto;

  }

  /* チェックボックスにチェックが入っていない（メニュー非表示）状態の修飾 */
  .toc-chapter {
    height: 0;
    opacity: 0;
    border:1px solid #cbd5e1; 
    visibility: hidden;
  }

  /* チェックボックスにチェックが入った（メニュー表示）状態の修飾 */
  .toc-check:checked ~ .toc-chapter {
    height: auto;
    opacity: 1;
    transition: 0.5s;
    border:1px solid #cbd5e1; 
    visibility: visible;
  }

  #TableOfContents > ul > li a {
    text-decoration: none !important;
    
  }
  #TableOfContents > ul > li > ul > li  a { 
    text-decoration: none !important;
  }

  #TableOfContents > ul > li {
    list-style:decimal !important;
  }

  /* メニューの修飾 */
  #TableOfContents > ul > li > ul{
    text-align: left !important;
    list-style-type: disc !important;
  }

  #TableOfContents > ul > li > ul > li > ul{
    padding-left: 0.75em !important;
    list-style-type: circle !important;
  }

  /* 関連記事表示 */

  .related-posts {
    display: grid ;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
  }

  .related-post {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .related-post img {
    max-width: 100%;
  }

  /* Share Button */
  .sns-share-btn-fb {
    background-color: #3b5998;
    width:2rem;
    padding:0.25em;
    text-align:center;
    display:inline-block;
  }

  .sns-share-btn-tw {
    background-color: #000;
    width:2rem;
    padding:0.25em;
    text-align:center;
    display:inline-block;
  }

  .sns-share-btn-hb {
    background-color: #00a4de;
    width:2rem;
    padding:0.25em;
    text-align:center;
    display:inline-block;
  }

  .sns-share-btn-po {
    background-color: #ef4156;
    width:2rem;
    padding:0.25em;
    text-align:center;
    display:inline-block;
  }

  /* Copy ボタン */
  .highlight {
    position: relative;
  }

  .copy-code-button {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    line-height: 14px;
    letter-spacing: 0.5px;
    color: #fff;
    background-color: rgb(248 250 252);
    border: 1px solid  rgb(226 232 240);
    border-top-left-radius: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 5px;
    white-space: nowrap;
    padding: 4px 4px 5px 4px;
    margin: 0 0 0 1px;
    cursor: pointer;
    opacity: 0.5;
  }

  .copy-code-button:hover,
  .copy-code-button:focus,
  .copy-code-button:active,
  .copy-code-button:active:hover {
    opacity: 0.8;
  }
  .copyable-text-area {
    position: absolute;
    height: 0;
    z-index: -1;
    opacity: .01;
  }
  .highlight .copy-code-button {
    visibility: visible;
  }
  .highlight:hover .copy-code-button {
    visibility: visible;
  }

  /* Alert */
  .info  {
    border-color: #349ef3;
    background-color: rgb(239 246 255);
  }
  .mark_info {
    color: #349ef3;
  }

  .success {
    border-color: #4dc657;
    background-color: rgb(240 253 244);
  }
  .mark_success {
    color:#4dc657;
  }
  .warning {
    border-color: #f5aa0a;
    background-color: rgb(255 247 237);
  }
  .mark_warning {
    color:#f5aa0a;
  }
  .danger  {
    border-color: #f5311d;
    background-color:rgb(254 226 226);
  }

  .mark_danger {
    color: #f5311d;
  }

  .note  {
    border-color: rgb(253 224 71);;
    background-color:rgb(254 252 232);
  }
  .mark_note {
    color:rgb(253 224 71);;
  }

  .web-card img {
    margin:0 !important;
  }

  .pagefind-ui__drawer {
    background-color:white;
    padding:1em;
    
  }

 /* リストデザイン　丸数字 */
  ol.circle_d {
    counter-reset: li;
    list-style: none;
  }
  ol.circle_d li {
    position: relative;
    padding-left: 1.2em;
    margin-left: -1.2em;
  }

  ol.circle_d li::before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    color: white;
    line-height: 2;
    text-align: center;
    margin-left: -1.0rem;
    font-size:1.0rem;
    min-width:2rem;
    background: darkgray;
    border-radius: 50%;
    counter-increment: li;
    content: counter(li);
  }

  #div-gpt-ad-1727780005081-0 {
    margin:0 !important;
    padding:0 !important;
  }
/* ダークモード：検索 */
.dark {
  --pagefind-ui-primary: #eeeeee;
  --pagefind-ui-text: #eeeeee;
  --pagefind-ui-background: #152028;
  --pagefind-ui-border: #152028;
  --pagefind-ui-tag: #152028;
}

/* 検索：Pagefind CSS */
:root {
  --pagefind-ui-font: "MyFont","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif,ui-sans-serif,system-ui,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  
}