/* Kaisotai フォント */
@font-face {
    font-family: "Kaisotai";
    src: url("../font/Kaisotai-Next-Up-B.woff") format("woff");
    font-weight: normal;
    font-style: normal;
} /* Makinas フォント */
@font-face {
    font-family: "Makinas";
    src: url("../font/Makinas-4-Flat.woff") format("woff");
    font-weight: normal;
    font-style: normal;
} /* Zen Kaku Gothic New フォント（通常） */
@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url("../font/Zen-Kaku-Gothic-New.woff") format("woff");
    font-weight: normal;
    font-style: normal;
} /* Zen Kaku Gothic New フォント（Bold） */
@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url("../font/Zen-Kaku-Gothic-New-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
} /* 全体の文字色を黒に設定 */
body {
    font-family: "Makinas", "Kaisotai", "Zen Kaku Gothic New", sans-serif;
    color: black; /* デフォルトの文字色を黒に */
} /* HTMLとBODYに100%の高さを指定 */
html,
body {
    height: 100%; /* 高さ100%に設定 */
    margin: 0; /* デフォルトのマージンを削除 */
    padding: 0; /* パディングを削除 */
} /* サイト全体のラッパー */
.site-container {
    min-height: 100%; /* 最小高さを100%に設定 */
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* 横方向のスクロールを無効化 */
} /* サイト全体の背景色 */
body {
    background-color: #f4f4f4;
    margin: 0;
    font-family: Arial, sans-serif;
}
body {
    overflow-x: hidden;
} /* article-Top フレーム */
/* モバイル専用表示 */
/* --- ヘッダー本体は overflow: visible のままにする --- */
.article-top-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    position: relative; /* 擬似要素の containing block にする */
    aspect-ratio: 2459 / 466;
    overflow: visible; /* ボタンのクリックを妨げない */
    max-width: 100vw; /* 100vw のズレ対策 */
}

/* --- 擬似要素に背景画像を描画して必ずヘッダー内に収める --- */
.article-top-mobile::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background-image: url("./Pic/article_Top_mobile.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 必要なら 100% auto に変更 */
    z-index: 0; /* 内部コンテンツより下に配置 */
    pointer-events: none; /* 背景がタップを邪魔しない */
}

/* --- ヘッダー内部の実コンテンツ（ボタン等）を上に出す --- */
.article-top-mobile-inner,
.article-top-mobile > * {
    position: relative;
    z-index: 1; /* 擬似要素の上にする */
}

/* --- ボタンは擬似要素よりさらに上（クリック確保） --- */
.mobile-menu-btn {
    z-index: 2;
    pointer-events: auto;
    /* 既存の位置指定は残して OK、必要なら調整 */
}

.article-top-mobile-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mobile-menu-btn {
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-50%, -50%);
    font-family: "Makinas", "Kaisotai", sans-serif;
    font-size: calc(24px + (36 - 24) * ((100vw - 350px) / (800 - 350)));
    padding: calc(8px + (14 - 8) * ((100vw - 350px) / (800 - 350)))
        calc(14px + (24 - 14) * ((100vw - 350px) / (800 - 350)));
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.12);
    cursor: pointer;
    color: #111;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    transition:
        background 0.2s ease,
        font-size 0.15s ease,
        padding 0.15s ease;
}

.mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 1);
}

.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    top: 100%; /* ボタン直下 */
    right: 18px;
    margin-top: 8px; /* ボタンとメニューの隙間 */
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 18px rgba(10, 10, 10, 0.06);
    padding: 12px 16px;
    border-radius: 6px;
    z-index: 999;
    min-width: 160px;
}

.mobile-menu a {
    font-family: "Makinas", "Zen Kaku Gothic New", sans-serif;
    font-size: 18px;
    color: #111;
    text-decoration: none;
}

.mobile-menu a:hover {
    color: var(--accent);
}

.mobile-menu.open {
    display: flex;
}

/* 非モバイルで非表示にする */
@media screen and (max-width: 799px) {
    .article-top {
        display: none;
    } /* 既存のPC用 article-top を非表示 */
}

/* モバイルで表示 */
@media screen and (max-width: 799px) {
    .article-top-mobile {
        display: flex;
    }
}
.site-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px;
    padding: 0 44px 32px 44px;
    /* 上 右 下 左 */
    box-sizing: border-box;
    position: relative; /* 必須 */
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 44px;
    right: 44px;
    height: 1px;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* brand block */
.footer-brand-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 40px 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0.55);
}

.footer-brand-block-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start; /* ← これだけ変える */
}

.footer-brand-textblock {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* ← ここも left に */
    gap: 8px;
    text-align: left; /* 明示 */
}

.footer-brand-title {
    font-family: "Kaisotai", sans-serif;
    font-size: 24px;
    line-height: 145%;
    letter-spacing: -2%;
    color: #000;
    text-align: center;
}

.footer-brand-subtitle {
    font-family: "Makinas", sans-serif;
    font-size: 18px;
    line-height: 145%;
    letter-spacing: -0.5%;
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
}

.footer-brand-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.footer-link-icon1 {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.footer-link-icon2 {
    width: 34px;
    height: 24px;
    object-fit: contain;
}
.footer-link-icon3 {
    width: 32px;
    height: 24px;
    object-fit: contain;
}

/* nav block */

.footer-nav-block {
    display: flex;
    flex-direction: column;
    gap: 15px;

    /* 左寄せ */
    align-items: flex-start;

    /* 上詰め */
    justify-content: flex-start;
}

.footer-nav-col {
    width: 130px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
}

.footer-nav-col-header {
    width: 100%;
    padding-bottom: 16px;
    box-sizing: border-box;
}

.footer-nav-col-header a {
    font-family: "Makinas", sans-serif;
    font-size: 18px;
    line-height: 145%;
    letter-spacing: -0.5%;
    text-decoration: underline; /* ← ここを変更 */
    text-underline-offset: 2px; /* 下線と文字の距離を微調整 */
    color: #000;
}

.footer-nav-item {
    font-family: "Makinas", sans-serif;
    font-size: 18px;
    line-height: 145%;
    letter-spacing: -0.5%;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.55);
}

/* ===========================
   Article layout / basic
   =========================== */
:root {
    --content-max-width: 980px;
    --toc-width: 260px;
    --gutter: 36px;
    --muted: rgba(0, 0, 0, 0.55);
    --accent: #111; /* 強調色（黒寄り） */
    --card-bg: #ffffff;
    --shadow: 0 6px 18px rgba(10, 10, 10, 0.06);
    --border: rgba(0, 0, 0, 0.08);
}

/* ラッパー調整（既存のヘッダ・フッタを保持） */
.article-main {
    display: flex;
    gap: var(--gutter);
    align-items: flex-start;
    justify-content: center;
    padding: 56px var(--gutter);
    box-sizing: border-box;
    width: 100%;
}

/* 左の目次（固定） */
.article-toc {
    width: var(--toc-width);
    position: sticky;
    top: 100px; /* ヘッダーの高さを考慮して調整 */
    align-self: flex-start;
    height: calc(100vh - 140px);
    overflow: auto;
    padding: 18px;
    box-sizing: border-box;
    background: transparent; /* 背景は変えない方針 */
}
.article-toc .toc-inner {
    position: relative;
    padding: 18px;
    border-left: 3px solid var(--border);
}
.article-toc .toc-title {
    font-family: "Kaisotai", "Makinas";
    font-size: 18px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--muted);
}
.article-toc nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.article-toc nav li {
    margin: 8px 0;
}
.article-toc a {
    text-decoration: none;
    font-family: "Makinas", "Zen Kaku Gothic New", sans-serif;
    font-size: 18px;
    color: var(--accent);
    display: inline-block;
    padding: 6px 8px;
    border-left: 3px solid transparent;
}
.article-toc a:hover,
.article-toc a:focus {
    border-left-color: var(--accent);
    padding-left: 5px;
}
.article-toc .toc-footer {
    margin-top: 18px;
    font-size: 18px;
    color: var(--muted);
}

/* メインコンテンツ */
.article-content {
    max-width: var(--content-max-width);
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    padding: 0;
    color: #111;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
    line-height: 1.8;
}

/* ヒーロー（タイトル） */
.article-hero {
    margin-bottom: 28px;
}
.article-title {
    font-family: "Makinas";
    font-size: 36px;
    line-height: 1.05;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}
.article-sub {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
}

/* セクション */
.article-section {
    margin-bottom: 28px;
}
.article-section h2 {
    font-family: "Makinas";
    font-size: 20px;
    margin: 18px 0 12px;
    letter-spacing: -0.01em;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

/* 数式が横幅オーバーしないようにする */
.math-block {
    margin: 14px 0;
    overflow: auto;
    padding: 8px 0;
}

/* =================================================
   boxed: 定理（theorem）・解答（answer）などの囲み枠
   角は丸くせず、整った直線的デザイン
   ================================================= */
.boxed {
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    box-sizing: border-box;
    padding: 14px;
    margin: 12px 0;
    border-radius: 0; /* 角は丸めない */
}

/* 共通タイトル */
.boxed-title {
    font-family: "Kaisotai", "Makinas";
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--accent);
    text-transform: none;
}

/* 定理スタイル — LaTeX の tcbtheorem の雰囲気を CSS で再現 */
.boxed.theorem {
    border-left: 4px solid rgba(0, 0, 0, 0.75);
    padding-left: 16px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1),
        rgba(250, 250, 250, 1)
    );
}
.boxed.theorem .boxed-title {
    /* 「定理」ラベルが既に表現される場合もある */
    margin-top: 0;
}

/* 解答スタイル — 左のダッシュライン（LaTeX の overlay を模倣） */
.boxed.answer {
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
    position: relative;
    padding-left: 22px;
}
.boxed.answer::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    bottom: 12px;
    width: 0;
    border-left: 2px dashed rgba(0, 0, 0, 0.35);
}
.boxed.answer::after {
    content: "証明";
    position: absolute;
    left: 8px;
    top: -8px;
    background: transparent;
    font-weight: 700;
    font-family: "Kaisotai", "Makinas";
    font-size: 18px;
    color: rgba(0, 0, 0, 0.8);
    padding: 0 6px;
}

/* boxed body text formatting */
.boxed-body p {
    margin: 0 0 8px 0;
    line-height: 1.7;
    font-size: 18px;
    color: #111;
}
.boxed-body ol,
.boxed-body ul {
    margin: 8px 0 0 18px;
}

/* 図（figure）スタイル */
.article-figure {
    margin: 14px 0;
    border: 1px solid var(--border);
    padding: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    box-sizing: border-box;
}
.article-figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.article-figure figcaption {
    font-size: 18px;
    color: var(--muted);
    margin-top: 8px;
}

/* コード・プレフォーマット */
.code-block {
    margin: 12px 0;
    border-left: 4px solid var(--border);
    background: #f9f9f9;
    padding: 12px;
    overflow-x: auto;
    font-family: ui-monospace, "Kaisotai", monospace;
    font-size: 18px;
}

/* ページ内ナビゲーション */
.article-pagination {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 36px;
    font-size: 18px;
}
.article-pagination a {
    text-decoration: none;
    color: var(--accent);
    padding: 10px 14px;
    border: 1px solid var(--border);
    display: inline-block;
    box-shadow: var(--shadow);
    border-radius: 0;
}

/* ===========================
   レスポンシブ（スマホ対応）
   小画面では目次をトップに折りたたむ形式に
   =========================== */
@media (max-width: 799px) {
    .article-main {
        display: block;
        padding: 20px;
    }
    .article-toc {
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 12px;
        padding: 8px 0;
    }
    .article-toc .toc-inner {
        padding: 0;
        border-left: none;
        display: flex;
        gap: 10px;
        align-items: center;
        overflow-x: auto;
    }
    .article-toc nav ul {
        display: flex;
        gap: 12px;
    }
    .article-toc nav li {
        margin: 0;
    }
    .article-content {
        padding: 0;
    }
    .article-title {
        font-size: 28px;
    }
    .article-section h2 {
        font-size: 18px;
    }
}

/* 中くらいの画面での微調整 */
@media (min-width: 800px) and (max-width: 1279px) {
    :root {
        --toc-width: 220px;
        --content-max-width: 880px;
    }
    .article-main {
        padding: 36px var(--gutter);
    }
    .article-title {
        font-size: 32px;
    }
}

/* アクセシビリティ：フォーカス時に目立たせる */
a:focus {
    outline: 2px dashed rgba(0, 0, 0, 0.2);
    outline-offset: 3px;
}

/* -------------------------------------
   目次を右側に配置（デスクトップ向け）
   ------------------------------------- */
/* .article-main は既に display:flex */
.article-toc {
    order: 2; /* 右側に配置（content より後） */
    margin-left: 20px; /* content との間隔 */
    margin-right: 0;
    top: 96px; /* ヘッダー高さに合わせ微調整可 */
}
.article-content {
    order: 1;
}

/* 目次リンクの右寄せ（小さな調整） */
.article-toc .toc-inner {
    text-align: left;
}

/* -------------------------------------
   記事ヘッダー：日時・タグのスタイル
   ------------------------------------- */
.article-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 10px 0 14px 0;
    font-size: 18px;
    color: var(--muted);
    font-family: "Zen Kaku Gothic New", "Makinas";
}

/* 日付 */
.article-date {
    border-left: 3px solid var(--border);
    padding-left: 10px;
    color: var(--muted);
    font-size: 18px;
    letter-spacing: -0.02em;
}

/* タグ群（見た目だけ） */
.article-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.article-tags .tag {
    display: inline-block;
    font-family: "Makinas", "Zen Kaku Gothic New";
    font-size: 18px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
    line-height: 1;
    border-radius: 0; /* 角ばったデザイン */
    color: var(--accent);
    text-decoration: none;
    text-transform: none;
    letter-spacing: -0.01em;
}

/* ホバー時のさりげない強調 */
.article-tags .tag:hover {
    transform: translateY(-2px);
    transition: transform 0.12s ease;
    border-color: rgba(0, 0, 0, 0.18);
}

/* -------------------------------------
   レスポンシブ：小画面では目次を先頭に戻す
   ------------------------------------- */
@media (max-width: 799px) {
    .article-toc {
        order: 0; /* 小画面では目次を先頭（上）に */
        margin-left: 0;
        margin-bottom: 12px;
        top: auto;
    }
    .article-content {
        order: 1;
    }

    /* タグの見た目をモバイル向けに少し圧縮 */
    .article-tags .tag {
        padding: 5px 8px;
        font-size: 18px;
    }
}

@media (max-width: 799px) {
    /* 目次を完全に隠す（スクリーンリーダーで非表示にしたければ aria-hidden を併用してください） */
    .article-toc {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* main の余白が広すぎる場合に備えて微調整（任意） */
    .article-main {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.box-007 {
    max-width: 100%px;
    margin: 0 auto;
    border: 2px solid #212121;
    border-radius: 5px;
    color: #333333;
}

.box-007 div {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #f4f4f4;
    color: #212121;
    font-weight: 600;
    vertical-align: top;
}

.box-007 div::before {
    width: 22px;
    height: 22px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23212121'%3E%3C/path%3E%3C/svg%3E");
}

.box-007 p {
    margin: 0;
    padding: 0 1.5em 1em;
}

.box-015 {
    position: relative;
    max-width: 100%;
    margin: 1em auto;
    padding: 1em 2.5em 1em 1.5em;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    background-color: #f8f8f8;
    color: #333333;
}

.box-015::before,
.box-015::after {
    position: absolute;
    content: "";
}

.box-015::before {
    top: -15px;
    right: 10px;
    height: 50px;
    width: 15px;
    border: 3px solid #999;
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 30%);
    transform: rotate(10deg);
}

.box-015::after {
    top: 0;
    width: 10px;
    right: 20px;
    border: solid 5px #f8f8f8;
}

p {
    font-size: 16.4px; /* pxで指定 */
    line-height: 1.5; /* 行間も調整可能 */
    color: #333; /* 文字色も指定可能 */
}

/* スマホ幅向け（必要に応じて 600px を調整） */
@media (max-width: 600px) {
    /* MathJax v2/v3 両対応をカバーするクラスを列挙 */
    .MathJax_Display,
    .MathJax_SVG_Display,
    .mjx-display,
    .MathJax,
    .mjx-chtml {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: auto; /* 横に長い式はスクロールで対処 */
        -webkit-overflow-scrolling: touch; /* スムーズスクロール（iOS） */
        padding: 0.25em 0; /* 見た目余白 */
    }
}

/* gallery.css - ギャラリー専用のラッパーで確実に中央寄せ、レスポンシブ、16:9 */
:root {
    --gallery-max-width: 1200px; /* 必要に応じて調整 */
    --gap-desktop: 16px;
    --gap-mobile: 12px;
    --side-padding-desktop: 16px;
    --side-padding-mobile: 12px;
}

/* 基本リセット（図/figureのブラウザデフォルト余白を消す） */
.photo-gallery,
.photo-item,
.photo-item img,
.gallery-wrapper {
    box-sizing: border-box;
}
figure.photo-item {
    margin: 0; /* UAデフォルトの上下マージンをリセット */
}

/* ラッパー：ページレイアウトに左右されず中央に配置する */
.gallery-wrapper {
    width: 100%;
    display: flex;
    justify-content: center; /* 中央寄せ */
    padding: 0; /* 必要ならここで上下の余白を追加 */
}

/* ギャラリー全体 */
.photo-gallery {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 16px; /* 写真同士の間隔 */
    align-items: center; /* 中央揃え */
}

/* 各写真アイテム */
.photo-gallery .photo-item {
    width: 100%; /* 画面幅の80%を最大幅に設定、必要に応じて調整 */
    max-width: 600px; /* 最大幅 */
}

.photo-gallery .photo-item img {
    display: block;
    width: 100%; /* 親幅に合わせる */
    height: auto;
    object-fit: cover;
    cursor: zoom-in;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.photo-gallery .photo-item img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* スマホ等の狭い画面では1列にする */
@media (max-width: 640px) {
    .photo-gallery {
        grid-template-columns: 1fr;
    }
}
/* ライトボックス（オーバーレイ） */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    padding: 20px;
}
.lightbox-overlay.active {
    display: flex;
}

/* ライトボックス内コンテナ */
.lightbox-inner {
    position: relative;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* 表示画像 */
.lightbox-inner img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.18s ease;
}

/* キャプション */
.lightbox-caption {
    color: #fff;
    font-size: 14px;
    text-align: center;
    max-width: 90vw;
    word-break: break-word;
}

/* 閉じるボタン */
.lightbox-close {
    position: absolute;
    right: 8px;
    top: 8px;
    background: transparent;
    color: #fff;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.12s ease;
}
.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* 前後ナビ */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    user-select: none;
}
.lightbox-prev {
    left: 12px;
}
.lightbox-next {
    right: 12px;
}

/* スマホ対応 */
@media (max-width: 640px) {
    .photo-gallery .photo-item {
        width: calc(100% - 12px);
    }
    .lightbox-inner img {
        max-height: 70vh;
    }
    .lightbox-nav {
        font-size: 32px;
        padding: 6px 8px;
    }
}

/* モバイル（1列） */
@media (max-width: 720px) {
    .photo-gallery {
        grid-template-columns: 1fr;
        gap: var(--gap-mobile);
        padding: 0 var(--side-padding-mobile);
        margin-top: 12px;
    }
}

/* 各写真コンテナ：常に16:9を維持 */
.photo-item {
    width: 100%;
    aspect-ratio: 16 / 9; /* ブラウザ対応がなければ下のフォールバックを使う */
    overflow: hidden;
    background-color: #f2f2f2;
    border-radius: 6px; /* 不要なら0に */
    display: block;
}

/* aspect-ratio をサポートしないブラウザ向けフォールバック
   （高さを0にして padding-bottom でアスペクト比を作る） */
@supports not (aspect-ratio: 16/9) {
    .photo-item {
        height: 0;
        padding-bottom: 56.25%; /* 9/16 = 0.5625 -> 56.25% */
    }
    .photo-item img {
        position: absolute;
        left: 0;
        top: 0;
    }
}

/* 画像は常に中央を基準にカバーする */
.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* 中央寄せ */
    display: block;
    border: 0;
}

/* 最低限のアクセシビリティ対応（フォーカス可視化を必要なら有効に） */
/* .photo-item:focus-within { outline: 2px solid #aaa; } */

/* 最低限のアクセシビリティ対応（フォーカス可視化を必要なら有効に） */
/* .photo-item:focus-within { outline: 2px solid #aaa; } */

/* --- 表（meta-table）の体裁調整 --- */
.meta-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 20px;
    font-size: 0.95rem;
}
.meta-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: top;
}
.meta-table td:first-child {
    width: 150px;
    font-weight: 600;
    color: #333;
}

/* --- 箇条書き（feature-list）の体裁 --- */
.feature-list {
    margin: 10px 0 20px 1.2em;
    padding-left: 0.2em;
}
.feature-list li {
    margin: 6px 0;
    line-height: 1.6;
}

:root {
    --accent-1: #00d1ff;
    --accent-2: #9b6bff;
    --frame-bg: rgba(6, 8, 12, 0.82);
    --thin: 1px; /* 基本の細い線 */
}

/* 中央寄せコンテナ（ページ背景 f4f4f4 は変更しない） */
.video-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 18px;
    box-sizing: border-box;
    width: 100%;
}

/* フレーム本体（角張りは残しつつ繊細に） */
.video-frame {
    width: min(1100px, 72%);
    aspect-ratio: 16/9;
    position: relative;
    display: block;
    box-sizing: border-box;
    cursor: pointer;
    transform-origin: center;
    transition:
        transform 260ms ease,
        filter 260ms ease;
    /* 外周の薄いライン（SVG 等と重ねて細線デザインを強調）*/
    background: transparent;
}

/* 内パネル：濃いめのプレートにして中の iframe を収める */
.video-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08)),
        var(--frame-bg);
    /* 角をややカットした多角形（鋭さを残す） */
    clip-path: polygon(
        4% 0%,
        96% 0%,
        100% 12%,
        100% 88%,
        96% 100%,
        4% 100%,
        0% 88%,
        0% 12%
    );
    box-shadow:
        0 6px 24px rgba(6, 8, 12, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* iframe はパネルいっぱいに広げる（元の iframe タグはそのまま） */
.video-inner iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
    background: #000;
}

/* SVG 装飾を覆うコンテナ（細いラインをここに） */
.video-frame .svg-ornaments {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* SVG 内の線は視認性を考えて少し淡く */
.video-frame .svg-ornaments svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* アクセント点やラインにグロー（ごく控えめ） */
.video-frame .accent-dot {
    fill: var(--accent-1);
    opacity: 0.95;
    filter: drop-shadow(0 6px 10px rgba(0, 209, 255, 0.06));
}

/* ラベル — 細い角ばったタグ */
.video-frame .label {
    position: absolute;
    left: clamp(10px, 3.6%, 28px);
    bottom: clamp(10px, 2.6%, 22px);
    z-index: 5;
    font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.02);
    padding: 6px 10px;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
    backdrop-filter: blur(6px) saturate(1.05);
    pointer-events: none;
}

/* hover 時の挙動（薄く浮き上がる） */
.video-frame:hover,
.video-frame:focus-within {
    transform: translateY(-6px) scale(1.01);
    filter: drop-shadow(0 22px 36px rgba(6, 8, 12, 0.18));
}

/* 小さいデバイスでの最適化 */
@media (max-width: 900px) {
    .video-wrap {
        padding: 28px 12px;
    }
    .video-frame {
        width: 96%;
    }
    .video-frame .label {
        font-size: 10px;
        padding: 5px 8px;
    }
}

@media (max-width: 480px) {
    .video-wrap {
        padding: 18px 8px;
    }
    .video-frame {
        width: 98%;
    }
    .video-frame .label {
        display: none;
    }
}

/* 微細なアニメーション（線がわずかに動くことで近未来感を演出） */
@keyframes subtle-slide {
    from {
        transform: translateX(-1%);
        opacity: 0.9;
    }
    50% {
        transform: translateX(1%);
        opacity: 1;
    }
    to {
        transform: translateX(-1%);
        opacity: 0.9;
    }
}

/* SVG 内の特定グループにアニメーションを適用（控えめ） */
.video-frame .svg-ornaments .moving {
    animation: subtle-slide 6s ease-in-out infinite;
}

/* CSS */
/* --- カラーパレット（VSCode Dark+ に近づけた配色） */
:root {
    /* 全体背景・内側パネル（サイト背景 f4f4f4 と自然に馴染む明るめグレー） */
    --cb-bg: #fafafa; /* メイン背景：白 */
    --cb-panel: #fafafa; /* ごく薄いグレー（f4f4f4 と馴染む） */

    /* 境界線は目立ちすぎない明度の高いグレー */
    --cb-border: #d5d5d5;

    /* テキスト（黒すぎず、柔らかいダークグレー） */
    --cb-text: #333333;

    /* 補助テキスト（コメントなど） */
    --cb-muted: #767676;

    /* アクセント（キーワードなど）— 派手すぎない彩度 */
    --cb-accent: #0066cc;

    /* 影（軽め、浮かない程度のソフト感） */
    --cb-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);

    /* 行番号ガター（薄い中間グレー） */
    --gutter-bg: #fafafa;
}

/* コンテナ */
.code-block {
    font-family:
        ui-monospace, "Kaisotai", "Fira Code", "Source Code Pro", monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cb-text);
    background: linear-gradient(180deg, var(--cb-panel), var(--cb-bg));
    border: 1px solid var(--cb-border);
    border-radius: 8px;
    box-shadow: var(--cb-shadow);
    overflow: hidden;
    display: block;
    margin: 12px 0;
}

/* ツールバー（上部：言語ラベル + コピー） */
.code-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    gap: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    font-size: 12px;
    color: var(--cb-muted);
}

/* ラベル */
.lang-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cb-muted);
}

/* コピー・ボタン */
.copy-btn {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--cb-muted);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.14s ease;
    font-size: 12px;
}
.copy-btn:hover {
    transform: translateY(-1px);
    color: var(--cb-text);
    border-color: rgba(255, 255, 255, 0.08);
}

/* コード本体を左右に並べるためのラッパー */
.code-wrap {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* 行番号のガター */
.code-gutter {
    user-select: none;
    padding: 12px 10px;
    padding-right: 14px;
    text-align: right;
    background: var(--gutter-bg);
    color: rgba(0, 0, 0, 0.55);
    font-size: 12px;
    line-height: 1.5;
    border-right: 1px solid rgba(255, 255, 255, 0.02);
}

/* 実際のコード領域 */
.code-wrap pre {
    margin: 0;
    padding: 12px;
    overflow: auto;
    white-space: pre;
    width: 100%;
    background: transparent;
    color: var(--cb-text);
    tab-size: 2;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* highlight.js のベース（上書き） */
.hljs {
    background: transparent;
    color: var(--cb-text);
    display: block;
}

/* トークンカラー — VSCode Dark+ に似せた配色 */
.hljs-comment,
.hljs-quote {
    color: #6b7280;
    font-style: italic;
} /* muted */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
    color: #c586c0;
} /* purple */
.hljs-function .hljs-title,
.hljs-title,
.hljs-built_in,
.hljs-name {
    color: #61afef;
} /* blue */
.hljs-string,
.hljs-regexp,
.hljs-symbol,
.hljs-bullet {
    color: #98c379;
} /* green */
.hljs-number,
.hljs-class .hljs-title {
    color: #d19a66;
} /* orange */
.hljs-meta,
.hljs-attr {
    color: #56b6c2;
} /* cyan */
.hljs-params {
    color: #e0e0e0;
}

/* テキストの折り返し（必要なら） */
.code-wrap pre {
    word-break: normal;
    white-space: pre;
}

/* レスポンシブで狭いときの調整 */
@media (max-width: 640px) {
    .code-toolbar {
        font-size: 11px;
        padding: 6px 8px;
    }
    .code-gutter {
        display: none;
    }
    .code-wrap pre {
        padding: 10px;
        font-size: 12px;
    }
}

/* 画像コンテナを中央寄せ */
.image-container {
    display: flex;
    flex-direction: column; /* 画像とキャプションを縦に並べる */
    align-items: center; /* 横方向に中央揃え */
    max-width: 100%;
    margin: 20px auto; /* 上下の余白と自動左右マージンで中央 */
}

/* 画像をレスポンシブに */
.image-container img {
    max-width: 100%; /* 画面幅に合わせて縮小 */
    height: auto; /* 縦横比を維持 */
    display: block;
    border-radius: 12px;
}

/* キャプション */
.image-container figcaption {
    margin-top: 10px;
    font-size: 1rem;
    color: #333;
    text-align: center;
}

/* 画像コンテナを中央寄せ */
.image-container-small {
    display: flex;
    flex-direction: column; /* 画像とキャプションを縦に並べる */
    align-items: center; /* 横方向に中央揃え */
    max-width: 70%;
    margin: 20px auto; /* 上下の余白と自動左右マージンで中央 */
}

/* 画像をレスポンシブに */
.image-container-small img {
    max-width: 65%; /* 画面幅に合わせて縮小 */
    height: auto; /* 縦横比を維持 */
    display: block;
    border-radius: 12px;
}

/* キャプション */
.image-container-small figcaption {
    margin-top: 10px;
    font-size: 1rem;
    color: #333;
    text-align: center;
}

/* PDFビューアを中央に配置し、レスポンシブにする */
.pdf-container {
    width: 350px; /* ビューアの最大幅を画面幅の80%に設定 */
    aspect-ratio: 1/1.25;
    margin: 0 auto; /* 中央揃え */
    overflow: hidden; /* コンテンツがはみ出さないように */
}

/* iframeのスタイル */
.pdf-viewer {
    width: 100%; /* 幅を100%に設定（親要素に合わせて伸縮） */
    height: 100%; /* 高さも100%に設定（親要素に合わせて伸縮） */
    border: none; /* 枠線を消す */
}

/* スマートフォンなどの小さな画面向けの調整 */
@media screen and (max-width: 600px) {
    .pdf-container {
        width: 100%; /* スマホでは幅を100%にして表示領域を広げる */
        height: auto; /* 高さを自動にして、アスペクト比に合わせる */
    }
}

.photo-gallery-long {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 横に最大3枚 */
    gap: 12px;
    align-items: start;
    width: 100%;
    max-width: 1200px; /* 任意：極端に横長にならないよう制限 */
    margin: 0 auto; /* .gallery-wrapper があるなら不要ですが安全措置 */
    padding: 0;
    box-sizing: border-box;
}

/* 各アイテム（縦長：高さが長い） */
.photo-item-long {
    width: 80%;
    aspect-ratio: 9 / 16; /* 幅/高さ = 9/16 -> 高さが 16 に相当する（縦長）*/
    overflow: hidden;
    background-color: #f2f2f2;
    border-radius: 8px;
    display: block;
    position: relative;
}

/* 画像はコンテナを完全にカバー */
.photo-item-long img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
    cursor: zoom-in;
}

/* ホバー効果（既存と見た目を揃える） */
.photo-item-long img:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* aspect-ratio 非対応ブラウザ向けフォールバック（高さ = 幅 * 16/9） */
@supports not (aspect-ratio: 9/16) {
    .photo-item-long {
        height: 0;
        padding-bottom: 177.7777778%; /* (16/9)*100 */
    }
    .photo-item-long img {
        position: absolute;
        left: 0;
        top: 0;
        width: 80%;
        height: 100%;
    }
}

ul,
ol,
li {
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: 1.8;
    font-size: 16.4px;
}

h3 {
    font-family: "Makinas", sans-serif;
}

hr.hr-dotted-long {
    border: none;
    height: 2px;
    background-image: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.2),
        /* 薄い色 */ rgba(0, 0, 0, 0.2) 12px,
        /* 線の長さ */ transparent 12px,
        transparent 20px /* 空白 */
    );
}