/* ========================================
   基本設定
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 共通アクセントカラー */
:root {
    --accent-color: #1a73e8;
    
    /* アンカー着地点補正（＝scroll-padding-top用） */
    /* 1201px以上（PC：パンくずあり） */
    --anchor-offset-desktop: 160px;
    /* 769〜1200px（パンくずありの可能性大） */
    --anchor-offset-tablet: 160px;
    /* 〜768px（パンくず無し） */
    --anchor-offset-mobile: 100px;

    /* TOC追随位置（PCのtoc-desktopだけに使う） */
    --toc-top-desktop: 120px;
}

body {
    font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
    line-height: 1.6;
    color: #202124;
    background-color: #fff;
}

/* ========================================
   ヘッダー
   ======================================== */
.header {
    background-color: #fff;
    border-bottom: 1px solid #dadce0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
    gap: 16px;
    padding: 16px 24px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.header-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.header-title {
    font-size: 22px;
    font-weight: 600;
    color: #202124;
    flex: 1;
    text-align: left;
    margin: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;

    text-decoration: none;
    color: inherit;
}

.header-logo {
    display: flex;
    align-items: center;
}

.header-logo img {
    height: 32px;
    width: auto;
    transition: opacity 0.2s;
}

.header-logo:hover img {
    opacity: 0.8;
}

/* ========================================
   ハンバーガーメニューボタン
   ======================================== */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    flex-shrink: 0;
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #5f6368;
    transition: all 0.3s ease;
}

.hamburger-menu:hover span {
    background-color: var(--accent-color);
}

/* ハンバーガーメニューが開いているときのアニメーション */
.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}


/* ============================
   ホーム内リンク
   ============================ */
/* ============================
   広い時：横並びリンク
   ============================ */
.header-home-links {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.header-home-links a {
    text-decoration: none;
    color: #202124;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 10px;
}

.header-home-links a:hover {
    background: #f1f3f4;
}

/* ============================
   狭い時：ドロップダウン
   ============================ */
.header-home-dropdown {
    position: relative;
    margin-left: 12px;
    flex: 0 0 auto;
    display: none;
    /* 通常は非表示（狭い時だけ表示） */
}

.header-home-dropdown-button {
    appearance: none;
    border: 1px solid #dadce0;
    background: #fff;
    color: #202124;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.header-home-dropdown-button:hover {
    background: #f8f9fa;
}

.header-home-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 6px;
    display: none;
    z-index: 1200;
}

.header-home-dropdown-menu a {
    display: block;
    padding: 10px 10px;
    border-radius: 10px;
    color: #202124;
    text-decoration: none;
    font-size: 14px;
}

.header-home-dropdown-menu a:hover {
    background: #f1f3f4;
}

.header-home-dropdown.is-open .header-home-dropdown-menu {
    display: block;
}

/* --- 飛び先が sticky header に隠れない対策（見出しに） --- 
main h2[id] {
    scroll-margin-top: 96px;
}*/

/* ========================================
   ヘッダー検索ボックス
   ======================================== */
.header-search {
    display: flex;
    align-items: center;
    margin-left: 16px;
    max-width: 240px;
    /* 必要なら調整 */
    flex: 1 1 240px;
    min-width: 180px;
    width: 100%;
}


.header-search-input {
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    padding: 10px 16px 10px 40px;
    /* 余白：左にアイコン分を確保 */
    border: 1px solid #dadce0;
    border-radius: 9999px;
    background-color: #fff;
    /* 角丸の pill 形状 */

    /* 検索アイコン（シンプルなSVGを背景として埋め込み） */
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='6' stroke='%23889096' stroke-width='2'/%3E%3Cline x1='15.5' y1='15.5' x2='20' y2='20' stroke='%23889096' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;

    font-size: 14px;
    color: #202124;

    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* プレースホルダの色を少し薄く */
.header-search-input::placeholder {
    color: #9aa0a6;
}

/* ホバー時：枠線を少しだけ強調 */
.header-search-input:hover {
    border-color: #c0c4cc;
}

/* フォーカス時：サイト全体の青に合わせてハイライト */
.header-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
    background-color: #ffffff;
}

/* ========================================
   パンくずリスト
   ======================================== */
.breadcrumb {
    background-color: #f8f9fa;
    padding: 12px 24px;
    font-size: 14px;
    border-bottom: 1px solid #dadce0;
}

.breadcrumb-content {
    max-width: 1440px;
    margin: 0 auto;
}

.breadcrumb a {
    color: var(--accent-color);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 8px;
    color: #5f6368;
}

/* ヘッダー内のパンくず：PCは表示 */
.breadcrumb--header {
    display: block;
    border-top: 1px solid #dadce0;
}

/* ========================================
   オーバーレイ
   ======================================== */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay.active {
    display: block;
    opacity: 1;
}

/* ========================================
   メインコンテンツ
   ======================================== */
.container {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
}

/* ========================================
   サイドバーナビ
   ======================================== */
.sidebar-nav {
    width: 280px;
    background-color: #f8f9fa;
    padding: 24px 24px;
    /* ← 上だけ小さくする */
    border-left: 1px solid #dadce0;
    min-height: calc(100vh - var(--anchor-offset-desktop));
    position: relative;
    overflow-y: auto;
    /*overflow-x: hidden; */
    /* ← 横スクロールバーを出さない */
}

/* 大カテゴリ見出し（機能別API など） */
.sidebar-nav h2 {
    font-size: 18px;
    font-weight: 500;
    color: #202124;
    margin-top: 8px;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dadce0;
}


/* 中カテゴリ見出し（認証 / リンク・ノード検索 など） */
.sidebar-nav h3 {
    font-size: 14px;
    font-weight: 500;
    color: #202124;
    margin-top: 12px;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 4px solid var(--accent-color);
}

/* 小カテゴリ見出し（地点指定検索 / 範囲指定検索 など） */
.sidebar-nav h4 {
    font-size: 13px;
    font-weight: 500;
    color: #5f6368;
    margin-top: 10px;
    margin-bottom: 4px;
    padding-left: 16px;
}

/* サイドバー内のリスト全般 */
.sidebar-nav ul {
    list-style: none;
    margin: 4px 0 8px 0;
    padding-left: 24px;
    /* 階層のインデント */
}

/* サイドバー内の各項目 */
.sidebar-nav li {
    margin-bottom: 2px;
}

/* リンクスタイル（共通） */
.sidebar-nav a {
    color: #5f6368;
    text-decoration: none;
    font-size: 14px;
    display: block;
    padding: 3px 8px;
    border-radius: 4px;
}

/* ホバー時 */
.sidebar-nav a:hover {
    background-color: #e8f0fe;
    color: var(--accent-color);
}

/* 現在ページ（active） */
.sidebar-nav a.active {
    background-color: #e8f0fe;
    color: var(--accent-color);
    font-weight: 500;
}

/* ========================================
   サイドバー閉じるボタン
   ======================================== */
.sidebar-close {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #5f6368;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.sidebar-close:hover {
    background-color: #e8f0fe;
    color: var(--accent-color);
}

/* ========================================
   メインコンテンツエリア
   ======================================== */
.main-content {
    flex: 1;
    padding: 40px 48px;
    max-width: 900px;
}

/* ========================================
   目次（共通スタイル）
   ======================================== */
.toc-container {
    /* border-left: 2px solid #dadce0; */
    /* padding-left: 16px; */
    
    /* 既存の border-left を削除し、border-top に統一 */
    border-top: 2px solid #dadce0;
    padding-top: 16px;
    padding-left: 0; /* 左パディングを削除 */
}

.toc-title {
    font-size: 12px;
    font-weight: 500;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.toc-list {
    list-style: none;
}

.toc-list li {
    margin-bottom: 12px;
}

.toc-list a {
    color: #5f6368;
    text-decoration: none;
    font-size: 14px;
    display: block;
    transition: color 0.2s;
}

.toc-list a:hover {
    color: var(--accent-color);
}

.toc-list a.active {
    color: var(--accent-color);
    font-weight: 500;
}

.toc-list .toc-sub-list {
    list-style: none;
    margin-top: 8px;
    margin-left: 12px;
}

.toc-list .toc-sub-list li {
    margin-bottom: 8px;
}

.toc-list .toc-sub-list a {
    font-size: 13px;
}
.toc-desktop .toc-list > li:not(:first-child),
.toc-mobile .toc-list > li:not(:first-child) {
    margin-left: 16px;
}
/* ========================================
   デスクトップ用の目次（左サイドバー）
   ======================================== */
.toc-desktop {
    width: 280px;
    position: sticky;
    top: var(--toc-top-desktop);
    height: fit-content;
    max-height: calc(100vh - (var(--toc-top-desktop) + 20px));
    overflow-y: auto;

    padding: 24px;
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    border-radius: 8px;
}
/* ========================================
   モバイル用の目次（メインコンテンツ内）
   ======================================== */
.toc-mobile {
    width: 100%;
    margin-bottom: 32px;

    padding: 24px;
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    border-radius: 8px;
}

/* ========================================
   見出し
   ======================================== */
h1 {
    font-size: 36px;
    font-weight: 400;
    color: #202124;
    margin-bottom: 24px;
}

h2 {
    font-size: 24px;
    font-weight: 400;
    color: #202124;
    margin-top: 40px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dadce0;
}

h3 {
    font-size: 20px;
    font-weight: 500;
    color: #202124;
    margin-top: 32px;
    margin-bottom: 16px;
}

h4 {
    font-size: 16px;
    font-weight: 500;
    color: #202124;
    margin-top: 24px;
    margin-bottom: 12px;
}

/* ========================================
   段落
   ======================================== */
p {
    margin-bottom: 16px;
    color: #5f6368;
    font-size: 16px;
}

/* ========================================
   インライン参照リンク
   ======================================== */
.inline-reference {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    font-family: 'Roboto Mono', monospace;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s;
}

.inline-reference:hover {
    text-decoration: underline;
}

/* ========================================
   コードブロック（統一デザイン）
   ======================================== */
.code-block {
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 24px 0;
    overflow-x: auto;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.1);
}

/* 言語ラベル付きヘッダー */
.code-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dadce0;
}

.code-language {
    font-size: 12px;
    font-weight: 500;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 実際のコード部分 */
.code-block code {
    display: block;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    color: #202124;
    line-height: 1.5;
    white-space: pre;
}

/* 万が一 <pre><code> だけで書いた場合も、見た目を近づける */
pre {
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 24px 0;
    overflow-x: auto;
}

pre code {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    color: #202124;
}

/* ========================================
   パラメータテーブル / ステータスコード（統一デザイン）
   ======================================== */
.parameter-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
    background-color: #fff;
}

.parameter-table thead th {
    background-color: #f8f9fa;
    font-weight: 500;
    color: #202124;
    border-bottom: 2px solid #dadce0;
}

.parameter-table th,
.parameter-table td {
    padding: 10px 12px;
    text-align: left;
    border: 1px solid #dadce0;
    vertical-align: top;
}

.parameter-table td {
    color: #5f6368;
}

/* テーブル内の code 表現は統一して強調 */
.parameter-table code {
    font-family: 'Roboto Mono', monospace;
    background-color: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    color: var(--accent-color);
}

.parameter-name {
    font-family: 'Roboto Mono', monospace;
    color: var(--accent-color);
    font-weight: 500;
}

/* 備考列の改行対応（既存仕様維持） */
.parameter-table td br {
    line-height: 1.8;
}

/* ========================================
   バッジ
   ======================================== */
.required-badge {
    background-color: #ea4335;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 8px;
}

.optional-badge {
    background-color: #5f6368;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 8px;
}

/* ========================================
   注意事項ボックス
   ======================================== */
.note-box {
    background-color: #e8f0fe;
    border-left: 4px solid var(--accent-color);
    padding: 16px;
    margin: 24px 0;
    border-radius: 4px;
}

.note-box strong {
    color: var(--accent-color);
    display: block;
    margin-bottom: 8px;
}

.note-box p {
    color: #202124;
    margin-bottom: 0;
}

/* ========================================
   警告事項ボックス
   ======================================== */
.warning-box {
    background-color: #fef7e0;
    border-left: 4px solid #f9ab00;
    padding: 16px;
    margin: 24px 0;
    border-radius: 4px;
}

.warning-box strong {
    color: #ea8600;
    display: block;
    margin-bottom: 8px;
}

.warning-box p {
    color: #202124;
    margin-bottom: 0;
}

/* 課金注意バッジ */
.badge--cost {
    background-color: #ff6f00;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 8px;
}
/* ========================================
   タブ
   ======================================== */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid #dadce0;
}

.tab {
    padding: 12px 24px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: #5f6368;
    font-weight: 500;
    transition: color 0.2s, border-bottom-color 0.2s;
}

.tab:hover {
    color: var(--accent-color);
}

.tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ========================================
   リスト
   ======================================== */
ul,
ol {
    margin: 16px 0;
    padding-left: 24px;
    color: #5f6368;
}

li {
    margin-bottom: 8px;
}

/* ========================================
   フッター
   ======================================== */
footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dadce0;
    padding: 24px;
    margin-top: 48px;
}

.footer-content {
    max-width: 1440px;
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    color: #5f6368;
}

/* ========================================
   スクロールバーのスタイル
   ======================================== */
.toc-desktop::-webkit-scrollbar {
    width: 6px;
}

.toc-desktop::-webkit-scrollbar-track {
    background: transparent;
}

.toc-desktop::-webkit-scrollbar-thumb {
    background: #dadce0;
    border-radius: 3px;
}

.toc-desktop::-webkit-scrollbar-thumb:hover {
    background: #bdc1c6;
}

.sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: #dadce0;
    border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #bdc1c6;
}

/* ========================================
   API一覧内のカテゴリ見出し
   ======================================== */
.api-category>h3 {
    font-size: 16px;
    font-weight: 500;
    color: #202124;
    margin-top: 24px;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 4px solid var(--accent-color);
}

/* 無償版バッジ */
.badge--free {
    background-color: #34a853;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 8px;
}
/* ========================================
   探し方カード
   ======================================== */
/* 探し方カード 全体 */
.entry-guides {
    display: flex;
    gap: 20px;
    margin: 40px 0 50px;
    flex-wrap: nowrap;
    /* PCでは必ず1行に並べる */
}

/* カード本体 */
.entry-card {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    border: 1px solid #e5e5e5;
}

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

/* アイコン */
.entry-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

/* カード内のタイトル */
.entry-card h3 {
    font-size: 1.2rem;
    /*margin-top: 10px;*/
    margin-bottom: 10px;
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 4px;
}

/* APIの探し方セクション 見出し（※今後使う場合用） */
.api-finder-heading {
    margin: 50px 0 20px;
}

.api-finder-heading h2 {
    font-size: 1.6rem;
    margin-bottom: 12px;
    border-bottom: 3px solid var(--accent-color);
    padding-bottom: 6px;
}

.api-finder-desc {
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* ========================================
   レスポンシブデザイン
   ======================================== */

/* 1200px以上: デスクトップ用目次を表示、モバイル用を非表示 */
@media (min-width: 1201px) {
    .toc-desktop {
        display: block;
        max-width: 280px;
        width: 100%;
        margin: 24px 0px 0px 24px;
    }

    .toc-mobile {
        display: none;
    }
}

/* 1024px以下: ハンバーガーメニューを表示 */
@media (max-width: 1024px) {

    /* ハンバーガーメニューボタンを表示 */
    .hamburger-menu {
        display: flex;
    }

    /* ヘッダータイトルのサイズ調整 */
    .header-title {
        font-size: 16px;
    }

    /* ヘッダーロゴのサイズ調整 */
    .header-logo img {
        height: 28px;
    }

    /* サイドバーナビをモバイル用に変更 */
    .sidebar-nav {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        overflow-y: auto;
        transition: left 0.3s ease;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }

    .sidebar-nav.active {
        left: 0;
    }

    /* 閉じるボタンを表示 */
    .sidebar-close {
        display: block;
    }

    /* メインコンテンツを全幅に */
    .container {
        flex-direction: column;
    }

    .main-content {
        max-width: 100%;
    }
}

/* 1200px以下: モバイル用目次を表示、デスクトップ用を非表示 */
@media (max-width: 1200px) {
    .toc-desktop {
        display: none;
    }

    .toc-mobile {
        display: block;
        max-width: 300px;
        width: 100%;
        margin: 24px 0 32px;
        /* 上に余白＋下は既定32px */
    }

    .toc-mobile .toc-container {
        border-left: none;
        border-top: 2px solid #dadce0;
        padding-left: 0;
        padding-top: 16px;
    }

    .toc-mobile .toc-list {
        display: block;
        margin-top: 8px;
    }

    .toc-mobile .toc-list>li {
        display: block;
        margin-bottom: 12px;
    }

    .toc-mobile .toc-sub-list {
        margin-top: 8px;
        margin-left: 12px;
    }
}

/* 960px以下: 探し方カードを1列に */
@media (max-width: 960px) {
    .entry-guides {
        flex-direction: column;
    }

    .entry-card {
        width: 100%;
    }
}

/* 768px以下: さらに狭い画面用の調整 */
@media (max-width: 768px) {

    /* テーブルをスクロール可能に */
    .parameter-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .parameter-table th,
    .parameter-table td {
        padding: 8px;
        font-size: 12px;
    }

    .inline-reference {
        font-size: 12px;
        padding: 1px 4px;
    }
}

/* 480px以下: モバイル用の調整 */
@media (max-width: 480px) {

    /* ヘッダータイトルのサイズ調整 */
    .header-title {
        font-size: 14px;
    }

    /* ヘッダーロゴのサイズ調整 */
    .header-logo img {
        height: 24px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    .main-content {
        padding: 16px;
    }

    .toc-mobile {
        padding: 16px;
    }

    .code-block {
        padding: 12px;
    }

    .parameter-table {
        font-size: 11px;
    }

    .parameter-table th,
    .parameter-table td {
        padding: 6px;
    }

    .parameter-table code {
        font-size: 11px;
        padding: 1px 4px;
    }
}

/* ============================
   ブレークポイントで切替
   ※ ここが最重要：横並び→ドロップダウン
   ============================ */
@media (max-width: 780px) {
    .header-home-links {
        display: none;
    }

    .header-home-dropdown {
        display: block;
    }
}

/* さらに狭い時は検索窓を少し抑える（任意） */
@media (max-width: 720px) {
    .header-search {
        max-width: 240px;
    }
}

/* SPではパンくずは非表示 */
@media (max-width: 768px) {
    .breadcrumb--header {
        display: none;
    }
}

/* 1201px以上（PC） */
@media (min-width: 1201px) {
    html {
        scroll-padding-top: var(--anchor-offset-desktop);
    }
}

/* 769〜1200px（タブレット帯） */
@media (min-width: 769px) and (max-width: 1200px) {
    html {
        scroll-padding-top: var(--anchor-offset-tablet);
    }
}

/* 〜768px（スマホ帯） */
@media (max-width: 768px) {
    html {
        scroll-padding-top: var(--anchor-offset-mobile);
    }
}