main {
    overflow-wrap:anywhere !important;
}

/* インラインコード（文中に登場するコード） */
code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  background-color: #f1f1ff; /* 目に優しい淡いグレーブルー */
  color: #c0392b !important;            /* 視認性の高い落ち着いた赤・エンジ色 */
  padding: 0.2em 0.4em;
  margin: 0 0.2em;
  font-size: 0.9em;
  border-radius: 4px;
}

.code-block-accordion{
    padding:5px;    
    padding-left:20px;

}


/* コードブロック（複数行のコード） */
pre {
  background-color: #f7f9fa; /* blockquoteと調和する穏やかな背景色 */
  border: 1px solid #e1e8ed; /* 主張しない薄い枠線 */
  border-radius: 6px;
  padding: 1.2em;
  overflow-x: auto !important;          /* 横スクロール対応 */
  margin: 1.5em 0;
}

pre code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  background-color: transparent; /* 背景の重複を防ぐ */
  color: #2c3e50;                /* 読みやすい濃いネイビーグレー */
  padding: 0;
  margin: 0;
  font-size: 0.9em;
  line-height: 1.6;
  display: block;
}

/* コードブロック全体のコンテナ */
.code-block-wrapper {
  position: relative; /* ボタンを右上に固定するための絶対的な基準点 */
  margin-top: 1.5rem; 
  margin-bottom: 1.5rem;
}

/* トグルボタンのスタイル（常に右上に絶対配置） */
.code-toggle-btn {
  position: absolute;
  top: 10px;         /* 枠線の上部からの距離 */
  right: 12px;       /* 枠線の右側からの距離 */
  z-index: 10;       /* コードの背景に隠れないように最前面へ */
  
  /* ボタンのデザイン（自由に変更してください） */
  background: rgba(255, 255, 255, 0.9) !important; 
  border: 1px solid #ccc !important;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: #333;
  cursor: pointer;
}

.code-toggle-btn:hover {
  background: #f5f5f5 !important;
}

/* 既存の pre のスタイル調整 */
pre {
  position: relative !important;
  /* ボタンとコードの1行目が被らないように上部余白を広げる */
  padding-top: 2.8rem !important; 
  transition: min-height 0.1s, padding-bottom 0.1s;
}

/* 💡 コードが閉じている時の枠線のスタイルの崩れを防ぐ */
pre.is-code-closed {
  min-height: 45px !important;    /* ボタンが綺麗に収まる最小の高さ */
  padding-top: 0 !important;      /* 閉じている時は上部余白をリセット */
  padding-bottom: 0 !important;   /* 下部余白もリセットしてスリムに */
  display: flex !important;
  align-items: center;            /* ボタンを上下中央っぽく見せる */
}



/*toc*/


/* 目次全体を囲むコンテナ（ここにボーダーを引く） */
.toc-container {
  position: relative;          /* タイトルの絶対配置の基準にする */
  border: 1px solid #ccc;      
  border-radius: 4px;
  padding: 24px 16px 16px 16px; /* 上側に文字が被るため、上の余白を広めにとる */
  max-width: 400px;
  margin: 24px 0;
}

/* タイトルを囲むブロック */
.toc-title {
  position: absolute;
  top: 0;                      /* 枠線の真上に合わせる */
  left: 16px;                  /* 左側からの位置（お好みで調整） */
  transform: translateY(-50%); /* 文字の高さの半分だけ上にズラして線に重ねる */
  margin: 0;
  padding: 0;
}

/* 「目次」のテキスト自体 */
.toc-title-text {
  background-color: #ffffff;   /* ★重要: 背景色をページの背景（白など）と合わせることで枠線を消す */
  padding: 0 8px;              /* 文字の左右に少し隙間を作って線を隠す */
  font-weight: bold;
  font-size: 0.95rem;
  color: #333;
}

/* --- リスト部分のスタイル --- */
.toc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.toc-list .toc-list {
  padding-left: 16px;
  margin-top: 6px;
}

.toc-item {
  margin-bottom: 6px;
  line-height: 1.4;
}

.toc-link {
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
}

.toc-link:hover {
  color: #0056b3;
  text-decoration: underline;
}

/**tocをつかうと、ヘッダの高さを調整必要**/
/**このscroll-padding-topってのは、なかなかよろしい**/
html {
  scroll-padding-top: 110px !important; /* 固定ヘッダーの高さ（＋少しの余裕）を指定 */
  scroll-behavior: smooth !important;  /* お好みで：スクロールを滑らかにする場合 */
}

/* パンくずリストの各項目をインライン（普通の文字）として強制処理する */
.breadcrumb-item {
  display: inline !important;       /* 塊で落ちるのを防ぎ、文字として扱う */
  float: none !important;           /* 余計な回り込みをリセット */
  padding-left: 0 !important;       /* Bootstrapの余白を一度リセット */
}

/* 区切り文字（/ や ->）の見た目と前後の余白を担保する */
.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* mailform などの長い英単語が画面端にきても、はみ出さずにその場で折る */
.breadcrumb {
  display: block !important;        /* 親要素はブロックとして領域を確保 */
  word-break: break-all;            /* どこでも綺麗に折り返せるようにする */
}

/* Bootstrapの区切り文字の自動挿入を強制的に消滅させる */
.breadcrumb-item::before {
  content: "" !important;//余計なお世話だよね。/を自動挿入するってのは
  display: none !important;
}



article, .content {
  word-break: break-all !important; /* 長い連続文字を画面端で強制的に折り返す */
  overflow-wrap: break-word !important;
}



/* コードブロック全体の枠（Zolaが書き出す標準のタグ構造） */
pre {
  display: block !important;
  width: 100% !important;        /* 親の横幅（画面幅）を超えないようにする */
  overflow-x: auto !important;   /* ★最重要：はみ出た場合、この中だけを横スクロールさせる */
  white-space: pre !important;   /* 改行やスペースの崩れを防ぎ、ソースコードの見た目を維持する */
  word-break: normal !important; /* コードの文字を途中で無理やりバラバラにしない */
}

/* インラインコード（文章中の `aaa` のような短いコード）用 */
code {
  word-break: break-all !important; /* 文章中の中身は端で折れてOK */
}



.ul-normal,.ol-normal {
    border-style:solid;
    margin-left:20px !important;
    margin-bottom:10px !important;    
    padding:15px !important;
    border-width:0.3px;
    border-radius:30px;
}
.ul-normal li,.ol-normal li{
    margin:10px;
}


/**/
.section-list ul {
    list-style:none;
}

.section-list ul li
{
    font-size:18px;
    padding:10px;
    border-style:solid none;
    border-color:#cef;
    margin:5px;

}

div.section-title{
    padding-bottom:5px !important;
    margin:0px !important;
}

.section-title h2{
    border-style:none !important;
    margin:0px !important;
}