section:nth-of-type(even) {
    background: #fff;
    clip-path: none;
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0;

}

section:nth-of-type(odd) {
    background-color: #fff;
    backdrop-filter: none;
    padding: 50px 0;
}

.b_inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.blog_main_ttl2{
  top: 116px;
    right: 38%;
    position: absolute;
    color: #353535;
    font-size: 29px;
}

.blog_main_ttl{
    color: #353535;
    font-size: 15rem;
    text-align: left;
    line-height: 1.2;
    border-bottom: 14px solid;
    margin-top: 20px;
}

.pickup{
    position: relative;
    margin: 50px 0;
}

.pickup_icom{
    position: absolute;
    background: #fb7a00;
    top: -7%;
    left: -5%;
    color: #fff;
    font-size: 20px;
    padding: 38px 15px;
    font-weight: bold;
    border-radius: 89px;
}

.pickup_article{
    display: flex;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.pickup :hover{
    background: #ffb54d;
}

.pick_article_img{
    width: 370px;
}
.pick_article_cate{
    margin: 20px;
    color: #000;
    background: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid;
    font-weight: bold;
}
.pick_article_ttl{
    font-size: 19px;
    font-weight: bold;
    margin: 10px 20px;
    color: #000;
}
.pick_blog_date{
    margin: 10px 20px;
    color: #b2b2b2;
}

.blog_date{
    margin: 10px 0px;
    color: #b2b2b2;
}
.mid_ttl{
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid;
    padding: 10px;
    margin-bottom: 50px;
}

.samne{
    text-align: center;
    margin: 0 0 10px;
}
.date{
    padding: 0 15px;
    color: #b4b4b4;
}
.ttl{
    font-size: 24px;
    padding: 15px;
    border-bottom: 2px solid;
    margin-bottom: 30px;
    font-weight: bold;
}
.blog_flex{
    display: flex;
}
.article_box{
    padding: 0 50px 0 0;
}
.article_txt{
    font-size: 17px;
    padding: 15px 10px;
    line-height: 1.8;
}
.article_txt_s{
    font-size: 15px;
    padding: 10px 10px;
    line-height: 1.8;
    color: #495057;
}
.article_txt2{
    font-size: 19px;
    font-weight: bold;
    border-bottom: 1px solid;
    padding: 15px 10px;
    line-height: 1.8;
}
.article_txt3{
    font-size: 17px;
    background: #ffe9cc;
    padding: 5px 5px;
    margin: 4px 0;
}
.s_ttl{
    border-bottom: 2px solid;
    font-size: 25px;
    margin: 50px 10px 10px;
}
.ss_ttl{
    font-size: 20px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 20px 0 10px;
}
.side{
    width: 65%;
}
.kansyu_top{
    display: flex;
}
.kansyu_ttl{
    text-align: center;
    font-size: 15px;
    margin-top: 30px;
    font-weight: bold;
}
.kansyu{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f7f7f7;
    border-radius: 15px;
    padding: 13px;
        margin: 20px 0;
}
.kansyu_img{
    width: 120px;
    filter: grayscale(80%);
}
.kansyu_name{
    font-weight: bold;
    font-size: 16px;
}
.kansyu_txt{
    font-size: 14px;
    line-height: 1.8;
}
.kansyu_ttl2{
    text-align: center;
    font-size: 15px;
    margin-top: 30px;
    font-weight: bold;
}
.kansyu2{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f7f7f7;
    border-radius: 15px;
    padding: 20px;
    margin: 20px 7px;
}
.kansyu_img2{
    width: 320px;
    filter: grayscale(80%);
    padding-right: 20px;
}
.kansyu_name2{
    font-weight: bold;
    font-size: 16px;
}
.kansyu_txt2{
    font-size: 14px;
    line-height: 1.8;
}
/* --- 目次 (Table of Contents) のスタイル --- */

.blog-toc {
    border: 1px solid #e0e0e0; /* 境界線 */
    padding: 15px;
    margin-bottom: 30px; /* 下部にスペース */
    background-color: #f9f9f9; /* 背景色 */
    border-radius: 5px; /* 角を丸く */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 軽い影 */
}

.blog-toc h2 {
    font-size: 1.2em; /* タイトルを少し大きめに */
    color: #333;
    border-bottom: 2px solid #ff912a; /* 青色の下線 */
    padding-bottom: 8px;
    margin-top: 0; /* 上部の余白をリセット */
    margin-bottom: 15px;
}

.blog-toc ul {
    list-style: none; /* リストの黒丸を削除 */
    padding-left: 0; /* 左側のパディングをリセット */
    margin-top: 0;
    margin-bottom: 0;
}

.blog-toc li {
    line-height: 1.6; /* 行の高さを調整して読みやすく */
    margin-bottom: 5px; /* 各項目の下部にスペース */
}

/* リンクのスタイル */
.blog-toc a {
    text-decoration: none; /* リンクの下線を削除 */
    color: #ff912a; /* リンク色を青に */
    display: block; /* クリックしやすいように要素全体をブロック化 */
    padding: 3px 0;
    transition: color 0.2s; /* ホバー時のアニメーション */
}

.blog-toc a:hover {
    color: #ffac5f; /* ホバー時に濃い青に */
    text-decoration: underline; /* ホバー時に下線を出すのもあり */
}

/* 階層構造（ネストされたリスト）の調整 */
.blog-toc ul ul {
    /* サブセクションのリスト */
    padding-left: 20px; /* 左側にインデント */
    margin-top: 5px;
}

.blog-toc ul ul li {
    /* サブセクションのテキストサイズを少し小さく */
    font-size: 0.95em;
}

.blog-toc ul ul a {
    /* サブセクションのリンク色を少し抑える */
    color: #495057;
}

.blog-toc ul ul a:hover {
    color: #0056b3;
}

/* --- パンくずリスト (Breadcrumb) のスタイル --- */

.breadcrumb {
    margin: 170px 0 20px; /* 上下の余白 */
    font-size: 0.9em; /* 文字サイズを少し小さく */
    color: #6c757d; /* テキストの色をグレーに */
}

.breadcrumb ol {
    display: flex; /* リストアイテムを横並びに */
    list-style: none; /* リストの黒丸を削除 */
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    white-space: nowrap; /* 要素が改行されないように */
}

/* リンク要素のスタイル */
.breadcrumb a {
    text-decoration: none; /* リンクの下線を削除 */
    color: #6c757d;
    transition: color 0.2s;
    padding: 0 5px; /* クリックしやすいよう左右にパディング */
}

.breadcrumb a:hover {
    color: #007bff; /* ホバー時にメインカラー(青)に変更 */
    text-decoration: underline;
}

/* 区切り文字 (セパレータ) のスタイル */
.breadcrumb li + li::before {
    content: " > "; /* 区切り文字に「>」を使用 */
    color: #adb5bd; /* 区切り文字の色を少し薄く */
    display: inline-block;
    padding: 0 5px; /* 区切り文字の左右にスペース */
}

/* 最後の要素（現在地）のスタイル */
.breadcrumb li:last-child {
    font-weight: bold; /* 現在地を太字に */
    color: #343a40; /* 色を濃くして目立たせる */
}

/* 最後の要素には区切り文字は不要 */
.breadcrumb li:last-child::before {
    content: " > "; /* 最後の要素の前にだけ区切り文字は表示 */
}

.foloc{
    display: flex;
    border: 1px solid;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    align-items: center;
}
.foloc_img{
    width: 300px;
}
.foloc_box{
    padding: 10px 20px;
}
.foloc_name{
    font-size: 17px;
    font-weight: bold;
}
.foloc_text{
    font-size: 16px;
}
/* ナビゲーションコンテナ */
.article-navigation {
    display: flex; /* 子要素を横並びにする */
    justify-content: space-between; /* 子要素を両端に配置する（重要！） */
    width: 100%; /* 親要素の幅いっぱいに広げる */
    max-width: 850px; /* コンテンツ幅の最大値を設定 (例として) */
    margin: 0 auto; /* 中央配置 */
    padding: 20px 0; /* 上下の余白 */
}

/* ボタンの共通スタイル */
.nav-button {
    /* リンク要素をボタンのように見せるためのスタイル */
    display: block;
    text-decoration: none; /* 下線を消す */
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff; /* 文字色 */
    background-color: #323232; /* 背景色 */
    border: none;
    border-radius: 4px; /* 角を少し丸める */
    text-align: center;
    transition: background-color 0.3s, transform 0.1s; /* ホバー時のアニメーション */
    min-width: 120px; /* 最小幅を設定してボタンの大きさを統一 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影 */
}

/* ホバー時のスタイル */
.nav-button:hover {
    background-color: #646464; /* 濃い青色に変化 */
    transform: translateY(-1px); /* 少し上に浮き上がる */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* 影を濃くする */
}

/* 左ボタン（「記事一覧へ」）のスタイル */
.left-button {
    /* 必要であれば固有のスタイルを追加 */
}

/* 右ボタン（「次の記事へ」）のスタイル */
.right-button {
    /* 必要であれば固有のスタイルを追加 */
}

table {
  width: 100%;
  border-collapse: collapse; /* セルの境界線を重ねる */
  margin: 20px 0; /* 上下の余白 */
  font-family: Arial, sans-serif;
  color: #333;
}

/* テーブルを囲むコンテナのスタイル */
.table-container {
  width: 100%; /* 親要素の幅いっぱいに設定 */
  overflow-x: hidden; /* デスクトップなど広い画面ではスクロールを隠す */
}

/* スマートフォン向けのスタイル (max-width: 768px のメディアクエリ内) */
@media screen and (max-width: 768px) {
    /* ... 既存のモバイル向けスタイル（省略） ... */
    
    /* 横スクロールを有効にするコンテナ */
    .table-container {
        /* 内容がはみ出した場合に横スクロールバーを表示 */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* iOSで滑らかなスクロールを有効にする */
    }

    /* テーブルがコンテナからはみ出すように最小幅を設定 */
    table {
      /* 既存の width: 100%; を上書きし、スクロールが必要な最小幅を設定 */
      min-width: 600px; /* 例: この幅より画面幅が狭いと横スクロールが発生 */
      width: auto; /* min-widthを優先させるため auto に */
      /* ... 既存のスタイル ... */
    }

    /* ... 既存のモバイル向けスタイル（省略） ... */
}

caption {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
}

th, td {
  border: 1px solid #ddd; /* 境界線のスタイル */
  padding: 12px; /* セル内の余白 */
  text-align: left;
  vertical-align: top; /* 内容を上揃え */
}

thead th {
  background-color: #f4f4f4; /* ヘッダーの背景色 */
  color: #333;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
    .b_inner {
        padding: 0 20px;
    }

    .blog_main_ttl{
        font-size: 6rem;
        margin-top: 200px;
    }
    .blog_main_ttl2{
        font-size: 25px;
        top: 80px;
    }
    .pickup_article{
        flex-direction: column;
        margin-top: 100px;
        padding: 0;
    }
    .pick_article_img{
        width: auto;
        padding: 10px;
    }
    .pick_article_ttl{
        font-size: 18px;
        margin: 10px 20px 30px;
    }
    .article{
        width: 100%;
    }
    .blog_flex{
        flex-direction: column;
    }
    .breadcrumb {
        display: none;
    }
    .article_box {
        padding: 100px 0;
    }
    .ttl{
        margin-top: 0px;
    }
    .side{
        width: auto;
    }
    .kansyu_top{
        flex-direction: column;
    }
    .kansyu2 {
        display: flex;
        flex-direction: column;
    }
    .kansyu_img2 {
        width: 150px;
        padding-right: 0px;
    }
    .foloc {
        flex-direction: column;
    }
    .foloc_img {
        width: 120px;
    }
}