@charset "UTF-8";:root{--clr-white: #ffffff;--clr-black: #000000;--clr-gray-50: #fffcf7;--clr-gray-100: #fff9f5;--clr-gray-200: #e8e8ec;--clr-gray-700: #4a4a4a;--clr-gray-800: #2a2a2a;--clr-navy-700: #3d3d54;--clr-navy-800: #242438;--clr-navy-850: #2a3042;--clr-navy-900: #1a1a2e;--clr-blue-100: #e8f4fc;--clr-blue-200: #b8c4dc;--clr-blue-300: #7ba3c9;--clr-blue-400: #8b9dc3;--clr-blue-500: #306fcf;--clr-blue-600: #4577a8;--clr-blue-700: #3a5a75;--clr-blue-800: #2a4a6a;--clr-blue-900: #1e283c;--clr-blue-vivid: #0b64f4;--clr-orange-100: #fed7aa;--clr-orange-300: #f5a066;--clr-orange-300-rgb: 245, 160, 102;--clr-orange-600: #be540c;--clr-orange-700: #c05513;--clr-orange-900: #6b2510;--clr-gold-300: #e6b38a;--clr-gold-400: #d4a574;--clr-gold-400-rgb: 212, 165, 116;--clr-yellow-100: #fff5e6;--clr-yellow-200: #ffe8cc;--clr-yellow-800: #5a4336;--clr-beige-300: #d4c4b0;--clr-beige-900: #352f3a;--clr-terracotta-900: #3a3238;--clr-pink-100: #fce8e8;--clr-pink-200: #ffb3b3;--clr-pink-300: #ff9999;--clr-pink-800: #7a4a4a;--clr-pink-900: #352a38;--clr-rose-400: #c47690;--clr-rose-800: #b8738a;--clr-plum-300: #eec2d1;--clr-green-100: #e8f5e8;--clr-green-300: #c5dcc5;--clr-green-700: #047857;--clr-green-800: #3a5a3a;--clr-green-900: #2a3332;--clr-sage-400: #7fa890;--clr-magenta-500: #d323a6}:root{--color-text: var(--clr-gray-700, #4a4a4a);--color-bg: var(--clr-gray-100, #fff9f5);--color-accent: var(--clr-blue-500, #306fcf);--color-accent-alt: var(--clr-orange-600, #be540c);--color-accent-orange: var(--clr-orange-600, #be540c);--color-accent-orange-rgb: var(--clr-orange-300-rgb, 245, 160, 102);--color-headline-blue: var(--clr-blue-500, #306fcf);--color-headline-blue-rgb: 48, 111, 207;--color-muted-blue: var(--clr-blue-600, #4577a8);--color-muted-blue-rgb: 69, 119, 168;--color-accent-blue: #60a5fa;--color-hero-head: var(--clr-black, #000000);--tag-bg-color: var(--clr-blue-300, #7ba3c9);--tag-text-color: var(--clr-blue-900, #1e283c);--paper-bg: var(--clr-gray-50, #fffcf7);--paper-border: rgba(0, 0, 0, .05);--note-line: rgba(0, 0, 0, .05);--note-rule-start: var(--clr-pink-200, #ffb3b3);--note-rule-end: var(--clr-pink-300, #ff9999);--color-grid-dot: rgba(30, 40, 60, .03);--color-border: rgba(0, 0, 0, .12);--color-border-subtle: rgba(0, 0, 0, .06);--color-border-accent: rgba(91, 127, 163, .12);--shadow: 0 8px 24px rgba(15, 15, 15, .06);--paper-shadow-front: 0 8px 24px rgba(0, 0, 0, .12);--paper-shadow-outer: 0 10px 30px rgba(0, 0, 0, .08);--color-note-yellow-bg: var(--clr-yellow-100);--color-note-yellow-text: var(--clr-yellow-800);--color-note-yellow-border: transparent;--color-note-orange-bg: var(--clr-orange-100);--color-note-orange-text: var(--clr-orange-900);--color-note-orange-border: transparent;--color-note-blue-bg: var(--clr-blue-100);--color-note-blue-text: var(--clr-blue-700);--color-note-blue-border: transparent;--color-note-pink-bg: var(--clr-pink-100);--color-note-pink-text: var(--clr-pink-800);--color-note-pink-border: transparent;--color-note-green-bg: var(--clr-green-100);--color-note-green-text: var(--clr-green-800);--color-note-green-border: transparent;--memo-note-bg: linear-gradient(180deg, var(--clr-yellow-100) 0%, var(--clr-yellow-200) 100%);--memo-note-accent-bg: linear-gradient(180deg, #ffe8d6 0%, #ffd4b3 100%);--mobile-icon-1: var(--clr-orange-700);--mobile-icon-2: var(--clr-magenta-500);--mobile-icon-3: var(--clr-blue-vivid);--mobile-icon-4: var(--clr-green-700);--font-family-base: "Noto Serif JP", Georgia, "Times New Roman", serif;--font-handwrite: "Yomogi", "Hachi Maru Pop", "Comic Sans MS", "Noto Serif JP", serif;--paper-radius: 12px;--paper-radius-inner: 8px;--paper-line-height: 32px;--max-line: 72ch;--max-width: 1000px;--color-text-muted: var(--clr-gray-700, #666);--tap-target-min: 44px;--z-pagination: 5;--z-reading-progress: 1300;--z-nav: 1500;--z-nav-dropdown: 9999;--z-mobile-backdrop: 1090;--z-mobile-panel: 1100;--z-mobile-toggle: 1200;--z-search-overlay: 1400;--z-search-wrapper: 1401;--z-search-results: 1410;--z-search-close: 1420;--z-search-active: 1600;--z-focus-ring: 10000;--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--nav-margin-bottom: 3.2rem;--nav-margin-bottom-desktop: 4.2rem;--hero-margin-bottom: 6rem;--duration-instant: .12s;--duration-fast: .18s;--duration-base: .2s;--duration-moderate: .25s;--duration-smooth: .35s;--duration-deliberate: .5s;--ease-standard: cubic-bezier(.22, .61, .36, 1);--ease-gentle: cubic-bezier(.22, 1, .36, 1)}@media(min-width:960px){:root{--max-line: 1000px}}[data-theme=dark]{--color-text: var(--clr-gray-200);--color-bg: var(--clr-navy-900);--color-accent: var(--clr-blue-400);--color-accent-alt: var(--clr-gold-400);--color-accent-orange: var(--clr-gold-400);--color-accent-orange-rgb: var(--clr-gold-400-rgb);--color-headline-blue: var(--clr-blue-400);--color-muted-blue: var(--clr-blue-400);--color-hero-head: var(--clr-gray-200);--color-text-muted: var(--clr-gray-200, #aaa);--tag-bg-color: var(--clr-navy-700);--tag-text-color: var(--clr-gray-200);--paper-bg: var(--clr-navy-800);--paper-border: rgba(255, 255, 255, .08);--note-line: rgba(255, 255, 255, .04);--note-rule-start: rgba(184, 115, 138, .7);--note-rule-end: rgba(184, 115, 138, .5);--color-grid-dot: rgba(255, 255, 255, .025);--color-border: rgba(255, 255, 255, .12);--color-border-subtle: rgba(255, 255, 255, .04);--color-border-accent: rgba(139, 157, 195, .1);--paper-shadow-outer: 0 12px 32px rgba(0, 0, 0, .4);--color-surface-solid: #242438;--color-surface-solid-hover: #2a2a42;--color-note-yellow-bg: var(--clr-beige-900);--color-note-yellow-text: var(--clr-beige-300);--color-note-yellow-border: #4a4252;--color-note-orange-bg: var(--clr-terracotta-900);--color-note-orange-text: var(--clr-gold-300);--color-note-orange-border: #4d4455;--color-note-blue-bg: var(--clr-navy-850);--color-note-blue-text: var(--clr-blue-200);--color-note-blue-border: #3a4255;--color-note-pink-bg: var(--clr-pink-900);--color-note-pink-text: var(--clr-plum-300);--color-note-pink-border: #4a3a48;--color-note-green-bg: var(--clr-green-900);--color-note-green-text: var(--clr-green-300);--color-note-green-border: #3a4542;--memo-note-bg: linear-gradient(180deg, #2a2a3e 0%, #242438 100%);--memo-note-accent-bg: linear-gradient(180deg, #2a2a3e 0%, #242438 100%);--mobile-icon-1: var(--clr-gold-400);--mobile-icon-2: var(--clr-rose-400);--mobile-icon-3: var(--clr-blue-400);--mobile-icon-4: var(--clr-sage-400);--eraser-bg: rgba(200, 200, 200, .2);--eraser-bg-dark: rgba(80, 80, 80, .2)}.header-pencil{position:absolute;top:18px;left:20px;width:48px;height:10px;z-index:6;pointer-events:none;transform:rotate(-35deg);transform-origin:center center;opacity:.45;background:var(--clr-gold-400);border-radius:2px;box-shadow:0 1px 2px #0000001a}.header-pencil:before{content:"";position:absolute;left:-10px;top:0;height:100%;width:10px;background:linear-gradient(90deg,#c9a0a8 0% 45%,#a8a8a8 45%,#989898);border-radius:2px 0 0 2px}.header-pencil:after{content:"";position:absolute;right:-7px;top:0;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid #c9a870;filter:drop-shadow(1px 0 0 #555)}@media(max-width:720px){.header-pencil{left:12px;top:14px;width:38px;height:8px}.header-pencil:before{left:-8px;width:8px}.header-pencil:after{right:-6px;border-top-width:4px;border-bottom-width:4px;border-left-width:6px}}.blog-body table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.95em;line-height:1.6;display:block;overflow-x:auto;max-width:100%;position:relative}.blog-body table:after{content:"";position:sticky;right:0;top:0;bottom:0;width:24px;background:linear-gradient(90deg,transparent,var(--paper-bg));pointer-events:none;opacity:0;transition:opacity .2s}.blog-body table::-webkit-scrollbar{height:6px}.blog-body table::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px}.blog-body table::-webkit-scrollbar-track{background:transparent}.blog-body th,.blog-body td{padding:.8em 1em;border:1px solid var(--color-border)}.blog-body th{background-color:#00000005;font-weight:700}.blog-body img{display:block;max-width:100%;height:auto;margin:2rem auto}.blog-body figure{margin:2rem 0;padding:0}.blog-body figure img{margin:0 auto}.blog-body figcaption{margin-top:.5rem;padding-bottom:.5rem;line-height:1.4;font-size:.9em;color:var(--color-text);opacity:.8;text-align:center}.blog-body .post-content a:not([data-footnote-ref]):not(.data-footnote-backref){text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.06em}.blog-body .post-content a:not([data-footnote-ref]):not(.data-footnote-backref):hover{text-decoration-thickness:.1em}.blog-body details{margin:1.5em 0;padding:0;border:1px solid var(--color-border);border-radius:4px;background:#00000003}.blog-body summary{padding:1em;line-height:1.5;cursor:pointer;font-weight:600;color:var(--color-text)}.blog-body summary:hover{background:#00000005}.blog-body summary::marker{color:rgb(var(--color-accent-orange-rgb, 245, 160, 102))}.blog-body details[open] summary{border-bottom:1px solid var(--color-border)}.blog-body details>*:not(summary){padding:0 1em}.blog-body details>*:last-child{padding-bottom:1em}.footnotes{margin-top:3rem;padding-top:0;border-top:none;font-size:.9rem;color:var(--color-text);position:relative}.footnotes:before{content:"脚注";display:flex;align-items:center;position:absolute;top:-2rem;left:0;right:0;height:2rem;font-size:1.3rem;font-weight:700;color:var(--color-text);padding-left:.6em;border-left:4px solid var(--color-muted-blue);box-sizing:border-box}.footnotes:after{content:"";position:absolute;top:0;left:0;right:0;border-bottom:1px dashed var(--color-border);pointer-events:none}.footnotes h2{display:none!important}.footnotes ol{padding-left:1.5em;margin:0}.footnotes ol li{margin-bottom:.5rem;line-height:1.5}.footnotes ol li::marker{color:var(--color-muted-blue);font-weight:700}.footnotes ol li p{margin:0;display:inline}.footnotes a{color:var(--color-headline-blue);text-decoration:none}.footnotes a:hover{text-decoration:underline}.footnotes .data-footnote-backref{margin-left:.3em;font-size:.9em;text-decoration:none}.footnotes .data-footnote-backref:before{content:"["}.footnotes .data-footnote-backref:after{content:"]"}.footnotes .data-footnote-backref:hover{text-decoration:none;color:rgba(var(--color-accent-orange-rgb),1)}.blog-body a[data-footnote-ref]{color:var(--color-headline-blue);text-decoration:none;font-size:.85em;vertical-align:super;padding:0 .2em}.blog-body a[data-footnote-ref]:before{content:"["}.blog-body a[data-footnote-ref]:after{content:"]"}.blog-body a[data-footnote-ref]:hover{text-decoration:underline}.note-box{position:relative;margin:2rem 0;padding:2rem 1.5em;border-radius:2px;background:var(--paper-bg);color:var(--color-text);font-family:var(--font-family-base);box-sizing:border-box}.note-box>*:first-child{margin-top:0}.note-box>*:last-child{margin-bottom:0}.note-box p{margin-bottom:1em}.note-box.point{background:#fff8ef;border:1px solid rgba(0,0,0,.05);box-shadow:2px 3px 6px #0000000a}.note-box.point:before{content:"POINT";position:absolute;top:-14px;left:50%;transform:translate(-50%) rotate(-1.5deg);background:rgba(var(--color-accent-orange-rgb),.9);color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:3px 14px;border-radius:2px;box-shadow:0 2px 4px #0000001f;border-left:2px dotted rgba(255,255,255,.4);border-right:2px dotted rgba(255,255,255,.4)}.note-box.memo{background:var(--paper-bg);border:2px dashed var(--color-muted-blue);border-radius:6px}.note-box.memo:before{content:"💡 MEMO";position:absolute;top:-14px;left:16px;background:var(--paper-bg);padding:0 8px;font-weight:700;color:var(--color-muted-blue);font-size:.85rem;font-family:var(--font-handwrite);line-height:1.2}.note-box.alert{background:#fff5f5;border-left:6px solid #f5a0a0;border-radius:0 4px 4px 0;box-shadow:0 1px 3px #0000000d}.note-box.alert:before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#f5a0a0;color:#fff;border-radius:50%;font-weight:700;font-size:14px;position:absolute;top:-12px;left:-12px;box-shadow:0 2px 4px #00000014}.note-box.check{border:4px double rgba(var(--color-accent-orange-rgb),.35);background:var(--paper-bg);border-radius:4px}.note-box.check:before{content:"✔ CHECK";position:absolute;top:-14px;left:16px;background:var(--paper-bg);padding:0 8px;font-weight:700;color:rgb(var(--color-accent-orange-rgb, 245, 160, 102));font-size:.85rem;font-family:var(--font-handwrite);line-height:1.2}.note-box.clip{background:#fafafa;border:1px solid #e8e8e8;border-top:4px solid #d8d8d8;box-shadow:0 4px 8px #0000000a}.note-box.clip:before{content:"";position:absolute;top:-24px;right:32px;width:14px;height:36px;border:4px solid #9aa5b1;border-bottom:none;border-radius:14px 14px 0 0;z-index:1}.note-box.clip:after{content:"";position:absolute;top:-12px;right:28px;width:22px;height:20px;border:4px solid #86919d;border-top:none;border-radius:0 0 14px 14px;z-index:2}.note-box.tape{background:#fff;box-shadow:0 2px 12px #0000000f;border:1px solid rgba(0,0,0,.02);transform:rotate(-.5deg)}.note-box.tape:before{content:"";position:absolute;top:-16px;left:50%;transform:translate(-50%) rotate(1deg);width:100px;height:30px;background:#ffffff73;border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 2px #0000000d;background-image:repeating-linear-gradient(45deg,#fff0,#fff0 2px,#ffffff4d 2px 4px);backdrop-filter:blur(1px);opacity:.8}.note-box.sticky-note{position:relative;padding:2rem 1.5em;border-radius:2px;box-shadow:2px 3px 6px #00000014;transform:rotate(-1deg);transition:transform .2s,box-shadow .2s}.note-box.sticky-note:before{content:"";position:absolute;top:-6px;left:0;right:0;height:8px;background:#0000000d;border-radius:2px 2px 0 0;opacity:.4}.note-box.sticky-note:hover{transform:rotate(0) translateY(-2px);box-shadow:3px 5px 10px #0000001f}.note-box.sticky-note--yellow{background:var(--color-note-yellow-bg);color:var(--color-note-yellow-text);border:1px solid var(--color-note-yellow-border)}.note-box.sticky-note--blue{background:var(--color-note-blue-bg);color:var(--color-note-blue-text);border:1px solid var(--color-note-blue-border)}.note-box.sticky-note--orange{background:var(--color-note-orange-bg);color:var(--color-note-orange-text);border:1px solid var(--color-note-orange-border)}.note-box.sticky-note--pink{background:var(--color-note-pink-bg);color:var(--color-note-pink-text);border:1px solid var(--color-note-pink-border)}.note-box.sticky-note--green{background:var(--color-note-green-bg);color:var(--color-note-green-text);border:1px solid var(--color-note-green-border)}.blog-body.design-notebook del,.blog-body.design-notebook s{position:relative;text-decoration:line-through;color:var(--color-text);opacity:.6;background:linear-gradient(135deg,var(--eraser-bg) 0%,rgba(220,220,220,.15) 50%,var(--eraser-bg) 100%);padding:0 .3em;border-radius:2px}.blog-body.design-notebook del:before,.blog-body.design-notebook s:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 30%,rgba(0,0,0,.03) 1px,transparent 1px),radial-gradient(circle at 60% 70%,rgba(0,0,0,.02) 1px,transparent 1px);background-size:8px 8px;pointer-events:none;opacity:.4}.note-box.eraser{background:var(--eraser-bg);border:2px dashed rgba(0,0,0,.15);border-radius:4px;position:relative;padding:2rem 1.5em 2rem 3em}.note-box.eraser:before{content:"🧹";position:absolute;top:1rem;left:1rem;font-size:1.5rem;opacity:.6}.note-box.eraser:after{content:"訂正";position:absolute;top:-12px;left:16px;background:var(--paper-bg);padding:0 8px;font-weight:700;color:#00000080;font-size:.85rem;font-family:var(--font-handwrite);line-height:1.2}.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}.post-nav__link{--fold-size: 24px;--fold-face: #efe8d8;--fold-face-light: #f9f4e9;--fold-crease: rgba(15, 15, 15, .14);position:relative;display:block;padding:.9rem 1.1rem calc(var(--fold-size) * 1.5);background:var(--paper-bg);border:1px solid var(--color-border-subtle);border-radius:var(--paper-radius-inner);box-shadow:0 2px 8px #0f0f0f0d;overflow:hidden;text-decoration:none;transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}.post-nav__link:after{content:"";position:absolute;bottom:0;width:var(--fold-size);height:var(--fold-size);pointer-events:none;transition:width var(--duration-base) var(--ease-standard),height var(--duration-base) var(--ease-standard)}.post-nav__link--prev:after{left:0;background:linear-gradient(45deg,transparent 47%,var(--fold-crease) 50%,var(--fold-face) 56%,var(--fold-face-light) 100%)}.post-nav__link--next:after{right:0;background:linear-gradient(315deg,transparent 47%,var(--fold-crease) 50%,var(--fold-face) 56%,var(--fold-face-light) 100%)}.post-nav__link:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0f0f0f1a}.post-nav__link:hover:after,.post-nav__link:focus-visible:after{width:calc(var(--fold-size) * 1.5);height:calc(var(--fold-size) * 1.5)}@media(prefers-reduced-motion:reduce){.post-nav__link,.post-nav__link:after{transition:none}}.post-nav__link:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.post-nav__link--prev{grid-column:1}.post-nav__link--next{grid-column:2;text-align:right}.post-nav__label{display:block;font-family:var(--font-handwrite);font-size:.85rem;color:var(--color-text-muted)}.post-nav__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:.35rem;font-weight:600;line-height:1.5;color:var(--color-muted-blue)}.post-nav__link:hover .post-nav__title{text-decoration:underline}@media(max-width:640px){.post-nav{grid-template-columns:1fr}.post-nav__link--prev,.post-nav__link--next{grid-column:1}.post-nav__link--next{text-align:left}}.related-posts{margin-top:3.5rem}.related-posts .memo-note{margin-bottom:1.25rem}.related-posts__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.5rem;margin-top:1.5rem}@media(prefers-reduced-motion:reduce){.blog-note-header:before,.dates.note-ruled,.blog-tag,.blog-tag:nth-child(4n+1),.blog-tag:nth-child(4n+2),.blog-tag:nth-child(4n+3),.blog-tag:nth-child(4n+4),.note-box.tape,.note-box.point:before{transform:none}.blog-tag{transition:none}.blog-tag:hover{transform:none}.post-nav__link{transition:none}.post-nav__link:hover{transform:none}}