.blog-layout-with-toc{display:grid;grid-template-columns:1fr minmax(200px,300px);gap:var(--space-12);max-width:1200px;margin:0 auto;padding:var(--space-8);align-items:start}.blog-content{min-width:0;overflow-wrap:break-word;word-break:break-word}.toc-sidebar{position:sticky;top:calc(var(--space-16) + var(--space-4));height:fit-content;max-height:calc(100vh - var(--space-16));overflow:hidden;min-width:0;overflow-wrap:break-word}@media (max-width: 767px){.blog-layout-with-toc{display:block;padding:var(--space-4)}.blog-content{width:100%}.toc-sidebar{position:fixed;bottom:var(--space-5);right:var(--space-5);top:auto;left:auto;z-index:var(--z-modal);width:320px;max-width:calc(100vw - var(--space-10));max-height:75vh;background:#fffffff7;backdrop-filter:blur(16px);border:1px solid oklch(100% 0 0 / .2);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);overflow:hidden;transition:all var(--duration-normal) var(--easing-default);transform-origin:bottom right}.toc-sidebar:not(.expanded){height:56px;transform:scale(.95)}.toc-sidebar.expanded{height:auto;max-height:75vh;transform:scale(1);box-shadow:0 16px 48px #0000002e;background:#fffffffa}.toc-sidebar:before{content:"📋 Contents";position:absolute;top:0;left:0;right:0;height:56px;background:linear-gradient(135deg,var(--color-primary-500),var(--color-primary-600));color:#fff;border-radius:var(--radius-2xl);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-semibold);font-size:var(--font-size-base);cursor:pointer;user-select:none;z-index:calc(var(--z-modal) + 1);transition:all var(--duration-fast) var(--easing-default);letter-spacing:.3px;box-shadow:0 2px 8px var(--color-primary-500-alpha30)}.toc-sidebar.expanded:before{content:"📖 Contents";border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;box-shadow:0 2px 8px var(--color-primary-500-alpha20)}html[lang=ja] .toc-sidebar:before{content:"📋 目次"}html[lang=ja] .toc-sidebar.expanded:before{content:"📖 目次"}.toc-sidebar:before:hover{background:linear-gradient(135deg,var(--color-primary-600),var(--color-primary-700));transform:translateY(-1px);box-shadow:0 4px 12px var(--color-primary-500-alpha40)}.toc-sidebar .table-of-contents{margin-top:56px;border:none;border-radius:0 0 var(--radius-2xl) var(--radius-2xl);max-height:calc(75vh - 56px);overflow-y:auto;background:transparent;padding:var(--space-6) var(--space-5) var(--space-5);opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--duration-normal) var(--easing-default) .1s}.toc-sidebar.expanded .table-of-contents{opacity:1;visibility:visible;transform:translateY(0)}.toc-sidebar .table-of-contents .toc-title{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-primary-500);margin-bottom:var(--space-4);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-primary-500-alpha10)}.toc-sidebar .toc-scroll-container{max-height:calc(75vh - 140px);padding-right:var(--space-2)}.toc-sidebar .toc-scroll-container::-webkit-scrollbar{width:4px}.toc-sidebar .toc-scroll-container::-webkit-scrollbar-track{background:var(--color-primary-500-alpha05);border-radius:var(--radius-sm)}.toc-sidebar .toc-scroll-container::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,var(--color-primary-500),var(--color-primary-600));border-radius:var(--radius-sm)}.toc-sidebar .toc-link{font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);transition:all var(--duration-fast) var(--easing-default);position:relative}.toc-sidebar .toc-link:hover{background:var(--color-primary-500-alpha08);color:var(--color-primary-500);transform:translate(4px)}.toc-sidebar .toc-link.active{background:var(--color-primary-500-alpha12);color:var(--color-primary-500);font-weight:var(--font-weight-semibold)}.toc-sidebar .toc-link.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:linear-gradient(to bottom,var(--color-primary-500),var(--color-primary-600));border-radius:0 var(--radius-sm) var(--radius-sm) 0}}@media (min-width: 768px) and (max-width: 1023px){.blog-layout-with-toc{grid-template-columns:1fr minmax(180px,250px);gap:var(--space-6)}}@media (min-width: 1024px){.blog-layout-with-toc{grid-template-columns:1fr minmax(250px,300px);gap:var(--space-6)}}@media (min-width: 1440px){.blog-layout-with-toc{grid-template-columns:1fr minmax(280px,350px);gap:var(--space-6);max-width:1400px}}@media print{.blog-layout-with-toc{display:block}.toc-sidebar{display:none}.blog-content{width:100%}}html{scroll-behavior:smooth}.toc-link:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}.table-of-contents{background-color:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:background-color var(--duration-normal) var(--easing-default),border-color var(--duration-normal) var(--easing-default),box-shadow var(--duration-fast) var(--easing-default)}.table-of-contents:hover{box-shadow:var(--shadow-md)}html.dark .table-of-contents{background-color:var(--color-gray-800);border-color:var(--color-gray-700)}.toc-link:hover{background-color:var(--color-gray-100)}.toc-link.active{background-color:var(--color-primary-50)}html.dark .toc-link{color:var(--color-text-primary)}html.dark .toc-link:hover,html.dark .toc-link.active{color:var(--color-primary-400);background-color:var(--color-primary-hover-dark)}@media (prefers-color-scheme: dark){:root:not(.light) .table-of-contents{background-color:var(--color-gray-800);border-color:var(--color-gray-700)}:root:not(.light) .toc-link:hover{color:var(--color-primary-400);background-color:var(--color-primary-hover-dark)}:root:not(.light) .toc-link.active{color:var(--color-primary-400);background-color:var(--color-primary-hover-dark)}}@media (max-width: 767px){html.dark .toc-sidebar{background:var(--color-dark-surface-97);border-color:var(--color-gray-700)}html.dark .toc-sidebar.expanded{background:var(--color-dark-surface-98)}html.dark .toc-sidebar .table-of-contents .toc-title{color:var(--color-primary-400);border-bottom-color:var(--color-primary-dark-alpha20)}}