html {
    scroll-behavior: smooth;
    height: 100%;
    margin: 0;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

h2,
h3 {
    scroll-margin-top: 45px;
}

body {
    font-family: sans-serif;
    margin: 0;
    /* 子要素にデフォルトで設定されているマージンが飛び出ないよう、親要素で縦幅をリセット */
    padding: 0;
    /* 子要素にデフォルトで設定されているマージンが飛び出ないよう、親要素で横幅をリセット */
    background-color: #faefeb;
    color: #333333;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

ul,
ol {
    padding: 0;
    margin: 0;
}

header {
    background-color: #a0522d;
    color: white;
    padding: 20px 0;
    text-align: center;
    /* ヘッダ要素を中央揃え */
}

header a,
.global-nav a {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    border-bottom: 1.5px dotted transparent;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

footer {
    text-align: center;
    background-color: #a0522d;
    color: white;
    padding: 30px 0;
    margin-top: 0px;
}

.footer-links {
    list-style: none;
    display: flex;
    /* 横並びにする */
    justify-content: center;
    /* 中央に寄せる */
    gap: 20px;
    /* リンクが増えた時の間隔 */
    margin-bottom: 15px;
    /* コピーライトとの隙間 */
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    /* 本文より少し小さくして控えめに */
    border-bottom: 1.5px dotted transparent;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

header h1 a:hover {
    color: #ffdab9;
    transform: translateY(-1px);
}

.global-nav a:hover,
.footer-links a:hover {
    color: #ffdab9;
    border-bottom-color: #ffdab9;
}

.global-nav ul {
    list-style: none;
    /* リスト要素のマーカー(ポチマーク)を非表示に */
    padding-left: 0;
    /* ブラウザが自動設定する左側のパディングをリセット */
    margin: 0;
    /* ブラウザが自動設定するマージン(外側の余白)をリセット */

    display: flex;
    /* ナビ要素を横並びに */
    justify-content: center;
    /* ナビ要素を中央揃えに */
}

.global-nav ul li {
    padding: 0 15px;
    /* ナビ要素間の上下方向(内側)スペースを0px、左右方向のスペースを15pxに指定 */
}


/* ↑ヘッダーに適用するCSSはここまで↑ */
/* ↓ホームのページに適用するCSSはここから↓ */

a {
    text-decoration: none;
    /* リンクが設定されている文字列の下線を非表示に */
    color: inherit;
    /* 親要素の文字色を継承 */
}


/* =====================================
   パンくずリストに適用するCSSはここから
===================================== */

.breadcrumb {
    display: flex;
    /* 横並びにする */
    flex-wrap: wrap;
    /* 画面が狭い時に折り返せるようにする */
    padding: 0 15px;
    margin: 0 auto 5px auto;
    /* 上下に少し余白、左右は中央寄せ（必要に応じて） */
    max-width: 770px;
    /* width: 100%; */
    /* 記事一覧の幅と合わせると綺麗です */
    box-sizing: border-box;
    font-size: 0.9em;
    align-self: end;
    animation: fadeIn 0.35s ease-out;
}

.breadcrumb .breadcrumb_list {
    display: flex;
    align-items: center;
    /* 矢印と文字の上下中央を揃える */
    list-style: none;
    padding: 0;
}

.breadcrumb .breadcrumb_list a {
    text-decoration: none;
    border-bottom: dotted 2px transparent;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.breadcrumb .breadcrumb_list a:hover {
    color: #a0522d;
    border-bottom-color: #a0522d;
}

.breadcrumb li:not(:last-child)::after {
    content: ">";
    /* ここで「>」を表示 */
    margin: 0 10px;
    /* 矢印の左右に少し隙間を作る */
    color: #bda8a1;
    /* 矢印は少し薄い色にすると見やすい */
    font-size: 0.8em;
    /* 矢印を少し小さくしてバランス調整 */
    font-weight: bold;
}



.single-article .breadcrumb li:last-child::after {
    content: ">";
    margin: 0 10px;
    color: #bda8a1;
    font-size: 0.8em;
    font-weight: bold;
}

/* =====================================
   パンくずリストに適用するCSSはここまで
===================================== */

/* =====================================
   記事一覧スペースに適用するCSSはここから
===================================== */

/*アドブロック機能がついたブラウザで表示した際、フッターがページ最下部にぴったり張り付くための処理*/
.container {
    flex-grow: 1;
}

main {
    padding: 0 0 0px 0;
    animation: fadeIn 0.35s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0);
        /* 5px〜10pxが一番綺麗に見えます */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*↓「最新記事」の文言に適用するcss↓*/
main h2 {
    font-size: 1.8em;
    color: #a0522d;
    border-bottom: 3px solid #d2b48c;
    padding-bottom: 5px;
    margin: 0 0 20px 0;
    max-width: none;
}

/*↓1つ1つの個別記事スペースの装飾↓*/
main .post-list {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    max-width: 800px;
}

/*記事一覧の各記事カードに適用する装飾*/
main .post-list li {

    margin-bottom: 20px;
    padding: 0;

    display: block;
    flex-direction: column;
}

.post-card {
    list-style: none;
    vertical-align: top;
}

/*記事カードにマウスオーバーさせたときのアニメーション設定*/
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    will-change: transform;
    background-color: #fffdf6;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.card-link:hover h3 {
    color: #a0522d;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}

/*記事一覧のサムネイル画像に適用する装飾*/
main .post-list li img {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ホバー時に透過率を85%にする */
.card-link:hover img {
    opacity: 0.75;
}

/*記事カード_テキストエリアの装飾*/
.post-content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/*個別記事タイトル部の装飾*/
main .post-list li h3 {
    display: inline-block;
    font-size: 1.2em;
    line-height: 1.4;
    margin: 0 0 10px 0;
    margin-bottom: 10px;
    color: #a0522d;
    text-align: left;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
    text-decoration-color: transparent;
    transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        text-decoration-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}

/* 🕒アイコンの擬似要素 */
main .post-list li time::before {
    content: "🕒";
    margin-right: 6px;
    /* アイコンと日付の距離 */
    font-size: 1.1em;
    /* 文字と同じサイズに */
    filter: saturate(0.8);
}

main .post-list li time {
    font-size: 0.8em;
    color: #666;
    margin: 0;
    display: flex;
    align-items: center;
}

main .post-list li .category,
main .post-list li .title-category {
    display: inline-block;
    background-color: #a0522d;
    padding: 2px 10px;
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.75em;
    font-weight: bold;
    letter-spacing: 0.05em;
    margin-right: 10px;
    vertical-align: middle;
}

/* ↓広告スペースの装飾*/
.ad-box-wide,
.ad-box-large {
    background: #eee;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #ccc;
}

/*広告枠のスタイル(仮)*/
.ad-box-wide {
    height: 100px;
}

.ad-box-large {
    height: 250px;
}

main .post-list li.ad-wide p,
main .post-list li.ad-in-feed p {
    padding: 0 0 5px 10px;
    font-size: 0.8em;
    color: #666;

}

/*スマホ・タブレット環境向け装飾(デフォルト)*/
.ad-in-feed {
    display: none;
}

/* =====================================
   記事一覧スペースに適用するCSSはここまで
===================================== */



/* ==================================
   サイドバーに適用するCSSはここから
================================== */

.sidebar {
    animation: fadeIn 0.35s ease-out;
}

/*記事間の広告を表示*/
.ad-sidebar {
    display: block;
}


/* サイドバーの各項目をカードに加工 */
.sidebar-item {
    background-color: #fffdf6;
    /* 記事カードと同じ色 */
    border-radius: 8px;
    /* 角の丸みも統一 */
    padding: 20px;
    /* 内側に余白を作る */
    margin-bottom: 4px;
    /* 項目同士の隙間 */
    box-shadow: 0 3px 10px rgba(160, 82, 45, 0.08);
}

/* サイドバーの工事中アイテムを少し薄くする装飾 */
.sidebar-item h3 {
    font-size: 1.1em;
    color: #a0522d;
    border-bottom: 2px solid #d2b48c;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 5px;
}

/* プロフィール内の配置を整える */
.profile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 中身をすべて中央に寄せる */
    padding: 5px 0;
}

/* アイコン画像を丸く、そしてオシャレに */
.profile-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* 正円にする */
    object-fit: cover;
    /* 縦横比を維持して切り抜く */

    /* 質感のこだわり：少し厚めの白い縁取りをつけて、カードから浮き立たせる */
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* ここは少しだけ影を強くして存在感を出します */

    /* margin-bottom: 5px; */
}

/* 名前のスタイル */
.profile-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #a0522d;
    /* サイトのメインカラー */
    margin-bottom: 8px;
}

/* 紹介文のスタイル */
.profile-text {
    overflow-wrap: anywhere;
    word-break: auto-phrase;
    line-height: 1.8;

    font-size: 0.85rem;
    color: #666;
    line-height: 1.8;
    text-align: center;
    /* 紹介文は左寄せの方が見やすいです */
    width: 100%;
    /* 幅を揃える */
}

/*サイドバーの内、記事検索の装飾*/
.search-form {
    display: flex;
    align-items: stretch;
    max-width: 100%;
    gap: 0;
    /* 入力欄とボタンの隙間 */
}

.search-form input[type="text"] {
    flex-grow: 1;
    /* 横幅を可能な限り広げる */
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid #d2b48c;
    /* サイトカラーの薄い茶色 */
    border-right: none;
    border-radius: 5px 0 0 5px;
    /* 丸みをつけて柔らかい印象に */
    outline: none;
    /* クリック時の青い枠線を消す */
    font-size: 0.9em;
    background-color: #fff;
}

/* 検索ボタンの装飾 */
.search-form button {
    background-color: #a0522d;
    /* サイトのテーマカラー */
    color: white;
    border: 1px solid #a0522d;
    padding: 6px 16px;
    /* 横幅をしっかり確保して縦書きを防ぐ */
    border-radius: 0 5px 5px 0;
    /* 右側だけ角を丸める */
    cursor: pointer;
    font-weight: bold;
    font-size: 0.85em;
    /* 文字を少し小さくして上品に */
    white-space: nowrap;
    /* ★絶対に改行（縦書き）させない設定 */
    transition: background-color 0.4s;
}

/* ボタンにマウスを乗せた時 */
.search-form button:hover {
    background-color: #8b4513;
    /* 少し暗くして「押せる」感じを出す */
}

/* ボタンを押した瞬間（カチッとした感触） */
.search-form button:active {
    transform: scale(0.95);
    /* わずかに小さくして凹ませる */
}

/*サイドバーの内、項目「カテゴリ」余白をリセット+リストマーカーを除去*/
.sidebar-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*サイドバーの項目「カテゴリ」の内側スペースをリセット+リストのスペースを調整*/
.sidebar-item ul li {
    padding-left: 0;
    margin-bottom: 12px;
}

.sidebar-item ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 8px 0;
    /* 押しやすくするために少し上下余白 */
    font-size: 0.95em;
}

.sidebar-item ul a:hover {
    color: #a0522d;
}

/*各カテゴリーの頭につける、リストアイコン用の表記*/
.sidebar-item ul li a::before {
    content: "＞";
    display: inline-flex;
    /* inline-flexにすると文字との並びが安定します */
    align-items: center;
    justify-content: center;

    width: 16px;
    /* 少し小さめに調整 */
    height: 16px;
    margin-right: 10px;

    border: 1px solid #d2b48c;
    border-radius: 50%;

    color: #a0522d;
    font-size: 10px;
    font-weight: bold;
    flex-shrink: 0;
    /* アイコンが潰れるのを防ぐ */
}

.sidebar-item ul li a span {
    border-bottom: 2px dotted transparent;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.sidebar-item ul li a:hover span {
    border-bottom: 2px dotted #a0522d;
}

.sidebar-item:first-child {
    margin-top: 0;
}

.sidebar-item:first-child h3 {
    margin-top: 0;
}



/* --- 準備中のアイテムだけに適用するスタイル --- */
.preparing {
    opacity: 0.7;
}

.preparing h3::after {
    content: " (準備中)";
    /* クラスがある時だけ文字を追加 */
    font-size: 0.7em;
    color: #999;
    font-weight: normal;
    margin-left: 5px;
}

/* ==================================
   サイドバーに適用するCSSはここまで
================================== */



/* ==================================
   個別記事に適用するCSSはここから
================================== */

.single-article main {
    background-color: #fffdf6;
    /* 記事部分全体に適用するスタイル：薄いベージュ */
    width: 100%;
    margin: 0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* 記事の文字幅とパディング設定 */
main .article-body,
main .article-title,
main .meta-info {
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
}

main .article-title {
    /* 記事タイトルの装飾 */
    font-size: 2em;
    font-weight: bold;
    color: #a0522d;
}

/* ==================================
   ここからプライバシーポリシーページ向けCSS
================================== */

.privacy-page .container {
    display: block;
    /* グリッドレイアウトを解除 */
    max-width: 770px;
    /* 1カラムとして読みやすい幅に制限 */
    margin: 0 auto;
    /* 中央寄せ */
}

.privacy-page .article-title {
    display: block;
    /* 横幅を100%ではなく「文字の長さ」にする */
    width: fit-content;
    text-align: center;
    border-bottom: 3px solid #d2b48c;
    /* 文字の長さ分だけ線が出る */
    padding-bottom: 10px;
    margin: 10px auto 10px;
    /* 左右autoで中央に寄せる */
}

.privacy-page .meta-info {
    justify-content: center;
}

.privacy-page .toc-list li {
    counter-increment: privacy-counter;
    /* 項目ごとにカウントアップ */
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

/* ==================================
   ここまでプライバシーポリシーページ向けCSS
================================== */

/* 記事ヘッダーのメタ情報エリア */
main .meta-info {
    margin: 15px auto 30px auto;
    /* 下に余白を作って本文と引き離す */
    font-size: 0.9em;
    /* 本文より一回り小さく */
    color: #666;
    /* 少し薄い色にして「添え物」感を出す */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* スマホで入り切らない時に折り返す */
    gap: 15px;
    /* カテゴリと日付の間隔 */
}

/* カテゴリタグの装飾（サイドバーの「＞」アイコンの色と合わせる） */
main .meta-info .category {
    background-color: #a0522d;
    /* サイドバーのアクセントカラー */
    color: #ffffff;
    /* 文字は白抜きでパキッと */
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8em;
}

/* 公開日時の装飾 */
main .meta-info time {
    display: flex;
    align-items: center;
}

/* 時計アイコン（時計の絵文字など）を前に添えるのもオシャレです */
main .meta-info time::before {
    content: "🕒";
    /* カレンダーの絵文字を隠し味に */
    margin-right: 5px;
    font-size: 1.1em;
    filter: saturate(0.8);
}

main aside h3 {
    /* 目次タイトルの装飾 */
    max-width: 740px;
    width: 100%;
    display: flex;
    font-size: 1.2em;
    /*h3タグのデフォルトサイズは1.17em。タイポグラフィ的観点では1.2が見やすい*/
    margin: 0 auto;
    color: #8b4513;
    border-left: 5px solid #d2b48c;
    /*h3要素の左側にラインを引いて、目次タイトルであることを際立たせる*/
    padding: 10px 0 15px 10px;
    /*上／下／左の余白を確保*/
    height: 100%;
}

.toc-container {
    /* 目次全体を囲むコンテナのスタイル */
    padding: 20px 0;
    border-radius: 5px;
}

main aside ol.toc-list {
    /* 目次表の装飾 */
    border: 2px solid;
    padding: 20px;
    list-style: none;
    max-width: 550px;
    width: 85%;
    margin: 10px auto 0;
    border-radius: 5px;
    background-color: #f7eede;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

main aside ol li {
    /* 目次表のスペース設定 */
    max-width: 500px;
    margin: 0 auto 12px;
}

main aside ol li a {
    display: flex;
    align-items: flex-start;
    width: 100%;
    text-decoration: none;
    color: #333333;
}

/* 個別記事ページだけの特別ルール */
.single-article:not(.privacy-page) main aside ol li a .chapter-num {
    width: 2.5em;
    /* 01. 用に少し狭くする */
}

main aside ol li a .chapter-num {
    color: #a0522d;
    font-weight: bold;
    flex-shrink: 0;
    /* 幅を維持する設定 */
    width: 4.5em;
    /* 個別記事用（01.）に幅を狭めたい場合は、個別に上書きも可能です（後述） */
}

main aside ol li a .chapter-text {
    border-bottom: 2px dotted transparent;
    /* 最初から「透明な」2pxの線を引いて場所を確保しておく */
    transition: color 0.4s ease, border-color 0.4s ease;
}

main aside ol li a:hover .chapter-text {
    /* 目次にカーソルを合わせたときのアニメーション */
    color: #a0522d;
    border-bottom-color: #a0522d;
}

.article-body>h3::before {
    /* 項タイトルの上部に設置する区切り線のデザイン */
    content: "";
    display: block;
    position: absolute;
    top: -35px;
    width: 95%;
    height: 5px;
    margin: 0 auto 10px auto;

    background: repeating-linear-gradient(45deg,
            /* 45度に傾ける */
            #f8f8f8,
            /* ベースカラー */
            #f8f8f8 5px,
            /* ベースカラーを5px持続 */
            #d2b48c 5px,
            /* アクセントカラーを開始 */
            #d2b48c 6px
            /* アクセントカラーを1pxだけ表示 */
        );
}

.article-body>h3 {
    /* 目次で設定した各項番タイトルの装飾 */
    color: #a0522d;
    font-weight: 600;
    border-left: 4px solid #d2b48c;
    margin: 100px 0 32px 0;
    padding: 10px 0 15px 10px;
    /*上／下／左の余白を確保*/

    position: relative;
}

.article-body p {
    line-height: 1.7;
    /* qiita等のサイトに近い行間 */
    margin-bottom: 1.5em;

    word-break: break-word;
    overflow-wrap: break-word;
    text-align: justify;
}

.article-body {
    line-height: 1.5;
    /* qiita等のサイトに近い行間 */
    margin-bottom: 1.2em;

    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

/* 記事内の文字列に設定するリンクのスタイル */
.link-style{
    color: #4a6741;
    font-weight: bold;

    border-bottom: 2px dotted transparent;
    transition: all 0.4s;
}

.link-style:hover {
    border-bottom-color: #4a6741; /* 透明だった点線に色をつける */
    opacity: 0.8;
    /* 必要なら、hover時に色を少し明るくするなどの変化をつけてもOK */
}


/* =========================================================
   ここから記事およびプライバシーポリシーページ向け項リストのCSS
========================================================= */

.clause-list {
    list-style: none;
    padding: 0 0 0 1.5em;
}

.clause-list li {
    display: flex;
    align-items: flex-start;
    margin: 0 0 8px 0;
    line-height: 1.6;
}

.clause-list li .clause-num {
    width: 1.5em;
    flex-shrink: 0;
}

.clause-list.is-numeric {
    counter-reset: clause-counter;
    /* カウントをリセット */
}

.clause-list.is-numeric li::before {
    counter-increment: clause-counter;
    /* 番号を1つ増やす */
    content: counter(clause-counter) ".";
    /* 増えた数字にピリオドをつけて表示 */
    width: 1.5em;
    flex-shrink: 0;
}

.clause-list.is-check li::before {
    content: "✅";
    /* チェックマークを表示 */
    width: 1.5em;
    /* マークエリアの幅 */
    flex-shrink: 0;
}

/* 後で調整したいときのために残してある。↓は記述してもしなくても変わらない */
/* .clause-list:not(.is-numeric):not(.is-check) li {
  list-style: none;
  padding-left: 0.5em;
} */

/* リスト全体の余白設定 */
.description-list.is-check {
    padding-left: 1.5em; /* 全体を右に寄せる */
}

/* タイトル部分（✅） */
.description-text {
    position: relative;
    padding-left: 1.5em;   /* アイコン分のスペースを確保 */
    margin-top: 1.5em;
}

.description-text::before {
    content: "✅";        /* CSS側でアイコンを表示 */
    position: absolute;
    left: 0;             /* 左端に固定 */
    width: 1.5em;        /* 固定幅 */
    text-align: center;
}

/* 説明部分（⇒） */
.description-body {
    position: relative;
    padding-left: 1.5em;   /* タイトルと同じ幅のスペースを確保 */
    margin-left: 0;      /* デフォルトのインデントをリセット */
}

.description-body::before {
    content: "⇒";        /* CSS側でアイコンを表示 */
    position: absolute;
    left: 0;             /* 左端に固定。これで✅と位置が揃う */
    width: 1.5em;        /* ✅と同じ幅に設定 */
    text-align: center;
}

/* =========================================================
   ここまで記事およびプライバシーポリシーページ向け項リストのCSS
========================================================= */



/* ==================================
   ここから記事画像用スタイル
================================== */

/* チェックボックス自体は隠す */
.zoom-check {
    display: none;
}

/* クリック拡大可能／不可に関わらず、画像の表示自体は全て共通 */
.zoom-label img,
.no-zoom {
    width: 100%;
    height: auto;
    border: 1.5px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    cursor: zoom-in;
    transition: transform 0.4s ease;
    display: block;
}

.no-zoom {
    cursor: default;
}

/* クリック／タップされたとき(=チェックボックスにチェックが入った時)のスタイル */
.zoom-check:checked+.zoom-label {
    position: fixed;
    inset: 0;
    /* top,right,bottom,leftを0に一括指定し、画面全体を覆う(iOSのズレ対策) */
    background-color: rgba(0, 0, 0, 0.4);
    /* 背景を暗くする */
    display: flex;
    align-items: center;
    justify-content: center;

    align-items: center;
    /* 左右中央 */
    padding: 10px;
    /* 画面端に少し余白を作る */
    box-sizing: border-box;
    /* パディングを含めて100%にする */

    z-index: 1000;
    cursor: zoom-out;
    animation: fadeIn 0.25s ease-out;
}

/* iOSでの表示時、flexboxの高さ計算バグ防止のため、明示的に画像とキャプションをサイズ指定 */
.zoom-check:checked+.zoom-label .custom-figure {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zoom-check:checked+.zoom-label img {
    width: auto;
    height: auto;

    max-width: 100%;
    /* ここがポイント！ 
       calcで「画面の高さ(100vh)から、キャプションの想定高さ+余白分(約60px)」を引いた値を最大値にします 
    */
    max-height: calc(100vh - 80px);
    margin-bottom: 8px;
    /* 画像と下のキャプションの間の隙間 */

    object-fit: contain;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* 画像コンテナ（または画像）が連続する場合、2枚目以降の上にだけマージンを作る */
.image-zoom-container+.image-zoom-container,
.image-zoom-container+.no-zoom,
.no-zoom+.image-zoom-container,
.no-zoom+.no-zoom {
    margin-top: 16px;
    /* p要素のマージンと同じ値に設定 */
}

/* フィギュア全体の余白リセット */
.custom-figure {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* キャプションのデザイン */
.image-caption {
    margin-top: 4px;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    text-align: center;

    /* --- ここが修正ポイント --- */
    display: inline-block;
    /* 文字の長さに合わせて幅が決まるようにする */
    width: auto;
    /* 100%を解除 */
    max-width: 90%;
    /* 画像の端ギリギリまでいかないよう少し余裕を持たせる */
    box-sizing: border-box;
    /* paddingを含めた幅計算にする */

    border-bottom: 1px dotted #a0522d;
    padding-bottom: 2px;
    /* 文字と線の間に少しだけ隙間を作る */
    margin-bottom: 10px;
    /* 本文との区別をつけるため、下に少し余白を足す */
}

/* 画像をクリックして拡大したとき（チェックが入ったとき）のキャプション */
.zoom-check:checked+.zoom-label .image-caption {
    background: #a0522d;
    color: #ffffff;
    border-left: 5px solid #fbc9b5;
    border-bottom: none;

    flex-shrink: 0;
    /* キャプションが潰されないように固定 */
    max-height: 20vh;
    /* 万が一長い文章でも、画面の2割までに抑える */
    overflow-y: auto;
    /* もし溢れたら文字部分だけスクロール可能に */
    text-align: center;

    border-radius: 3px;
    padding: 8px 18px 8px 13px;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ==================================
   ここまで記事画像用スタイル
================================== */



/* ==================================
   ここからyoutubeミニプレイヤー用スタイル
================================== */

.video-container {
    width: 100%;
    /* 親要素（記事幅）に対して100%の幅を持つ */
    max-width: 610px;
    /* 【重要】PCで広がりすぎないよう、お好みの最大幅を指定 */
    margin: 20px auto;
    /* 上下に隙間、左右をautoにすることで「中央寄せ」にする */
    text-align: center;
    /* 中のインライン要素も中央へ */
}

.video-container iframe,
.video-container video {
    width: 100%;
    /* プレイヤー自体をコンテナの幅いっぱいに広げる */
    height: auto;
    /* アスペクト比を保つ */
    aspect-ratio: 16 / 9;
    /* 動画の標準的な比率を維持（古いブラウザ対策ならheight調整が必要） */
    border-radius: 8px;
    /* 角を少し丸めるとサイトの雰囲気に合っておしゃれです */
}

/* ==================================
   ここまでyoutubeミニプレイヤー用スタイル
================================== */



/* ==================================
   ここからテーブル用スタイル
================================== */

/* 表の設定 */
.table-scroll {
    overflow-x: auto;
    /* 横方向にはみ出たらスクロールバーを出す */
    white-space: nowrap;
    /* セル内の文字が勝手に改行されないようにする（お好みで） */
    table-layout: auto;
    -webkit-overflow-scrolling: touch;
    /* iPhoneなどでスルスルと滑らかに動かす設定 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    margin: 20px 0;
}

/* 表自体の最低限の幅を確保 */
.table-scroll table {
    width: 100%;
    /* 基本は親要素に合わせる */
    min-width: 600px;
    /* 横長を維持するために、最低限必要な幅を指定（ここが重要！） */
    border-radius: 5px;
    border-collapse: separate;
    border-spacing: 0;
    border-left: 1.5px solid #a0522d;
    border-top: 1.5px solid #a0522d;
}

th,
td {
    padding: 12px;
    text-align: left;
    /* 目線は左から右へ流れるので、読み始めのスタートラインを左寄せで整える */
    vertical-align: middle;
    /* 上下中央揃え */
    overflow: hidden;
    border-bottom: 1.5px solid #a0522d;
    border-right: 1.5px solid #a0522d;
}

th {
    background-color: #faefeb;
    color: #a0522d;
    font-weight: bold;
    white-space: nowrap;
    /* 項目名は改行させない */
    width: 120px;
    /* ここで1列目の幅を固定して安定させる */
}

td {
    background-color: #fff;
}

/* 見出し行の左上/右上要素が枠線を突き破ってしまうので、それら要素の角を丸める */
.table-scroll table tr th:first-child {
    border-top-left-radius: 4px;
    /* 左上の角 */
}

.table-scroll table tr th:last-child {
    border-top-right-radius: 4px;
    /* 右上の角 */
}

.table-scroll table tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
    /* 左下の角 */
}

.table-scroll table tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
    /* 右下の角 */
}

.table-block {
    display: block;
    /* 表内での改行 */
}

/* ==================================
   ここまでテーブル用スタイル
================================== */



.ad-space-bottom {
    margin-top: 40px;
    background-color: #fffdf6;
    border-radius: 8px;
    padding: 15px;
}



/* ==================================
   ここからPC環境向けメディアクエリ
================================== */

@media(min-width: 768px) {

    .single-article main {
        padding: 40px 80px;
    }

    .ad-in-feed {
        display: none;
    }

    /*PC環境ではインフィード広告を消す*/
    .ad-sidebar {
        display: block;
    }

    /*サイドバーの広告は載せる*/

    .container {
        display: grid;
        grid-template-columns: 1fr 300px;
        /*2カラムレイアウト⇒記事スペース3:サイドバー1の比率*/

        column-gap: 30px;
        row-gap: 0px;
        max-width: 1100px;
        margin: 0 auto;
        padding: 25px 15px 30px 15px;
        align-items: start;
    }

    .breadcrumb {
        grid-column: 1 / 3;
        margin: 0 0 15px 0;
        padding: 0 0 0 5px;
        align-self: end;

    }

    main .post-list {
        display: grid;

        /*カードの最小幅を260pxとし、入りきる分だけ横に並べる*/
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
    }

    main .post-list li.ad-in-feed {
        grid-column: 1/3;
    }
}

/* ==================================
   ここまでPC環境向けメディアクエリ
================================== */



/* ==================================
   ここからスマホ／タブレット環境向けメディアクエリ
================================== */

@media (max-width: 767px) {

    header h1 span {
        display: inline-block;
        white-space: normal;
    }

    .global-nav ul {
        display: flex;
        justify-content: space-between;
        /* 均等に配置 */
        padding: 0 5px;
        /* 画面端に少し余裕を */
    }

    .global-nav li {
        flex: 1;
        /* 5つの要素に画面幅を「1:1:1:1:1」で分ける */
        text-align: center;
        /* 文字を中央に */
        list-style: none;
    }

    .global-nav a {
        display: block;
        font-size: 0.8rem;
        /* 0.8rem〜0.85remくらいが限界 */
        padding: 10px 0;
        /* 上下の押しやすさは確保しつつ、左右は0に */
        white-space: nowrap;
        /* 絶対に改行させない */
        letter-spacing: -0.5px;
        /* ほんの少し文字間を詰めると収まりが良くなる */
    }

    .container {
        display: block;
        padding: 15px;
        box-sizing: border-box;
        /*スマホ・タブレットは記事を縦に並べる*/
    }

    .breadcrumb {
        padding: 0;
        margin: 0 0 10px 0;
    }

    .toc-container {
        padding: 20px 0;
        /* 左右のパディングを0にして、中のolに任せる */
    }

    /* 目次リスト本体の調整 */
    main aside ol.toc-list {
        max-width: 90%;
        /* 画面幅の90%に収める（左右に5%ずつの余白ができる） */
        width: auto;
        /* 100%固定を解除 */
        margin: 0 auto;
        /* これで確実に中央寄せ */
        box-sizing: border-box;
        /* パディングを含めたサイズ計算にする */
        padding: 20px 20px 20px 30px;
        /* リスト番号が隠れないよう左側を少し広めに */
    }

    /* 中のリスト項目も調整 */
    main aside ol li {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }


    /* 記事の末尾（main）とサイドバーの間に大きな余白と線を入れる */
    main {
        margin-bottom: 0;
        border: none;
        position: relative;
    }

    main::after {
        display: none;
    }

    aside.sidebar::before {
        content: "";
        display: block;
        position: absolute;
        /* asideのpadding-top(30px)の分だけ上に配置することで、隙間のちょうど真ん中に来る */
        top: 0;
        left: 10%;
        width: 80%;
        border-top: 2px dashed #d2b48c;
        /* ベージュに馴染む点線 */
    }

    /* サイドバー全体の開始位置を調整 */
    aside.sidebar {
        position: relative;
        border: none !important;
        padding-top: 40px !important;
        margin-top: 50px !important;
    }

    aside.sidebar::after {
        content: "INFORMATION";
        /* ここに好きな文字を入れます */
        position: absolute;
        top: 0;
        /* 線と同じ高さ */
        left: 50%;
        transform: translate(-50%, -50%);
        /* ど真ん中に配置 */

        background-color: #faefeb;
        /* サイトの背景色と同じ色を指定して、重なる部分の線を隠す */
        padding: 0 15px;
        /* 文字の左右に少し隙間を作る */

        color: #a0522d;
        /* サイトのメインカラー */
        font-size: 0.7rem;
        /* 小さめがオシャレ */
        font-weight: bold;
        letter-spacing: 0.15em;
        /* 文字の間隔を広げると「ロゴ」のような高級感が出ます */
        white-space: nowrap;
    }

    /* 「ここからサイドバー」ということが直感的にわかるよう、
       最初の項目（検索）の上に少しスペースを確保 */
    .sidebar-item:first-child {
        margin-top: 0;
    }

    main .article-title {
        font-size: 1.5em;
        padding: 0;
        margin-top: 10px;
    }

    main .post-list {
        margin: 20px 0;
    }

    main .post-list li {
        margin-bottom: 20px;
        width: 100%;
        /* 記事を縦に並べたときの、記事同士の間隔*/
    }

    .ad-in-feed {
        display: block;
    }

    .ad-sidebar {
        display: none;
    }

    .article-body p {
        text-align: left;
        line-height: 1.6;
    }

}

/* ==================================
   ここまでスマホ／タブレット環境向けメディアクエリ
================================== */