:root{--color-bg:#f5f8fa;--color-surface:#fff;--color-line:#dce5eb;--color-ink:#2b3946;--color-ink-soft:#4f5d69;--color-ink-faint:#626f7b;--color-accent:#1b7a97;--color-accent-deep:#14607a;--color-accent-soft:#e7f1f5;--color-life:#9c6a2e;--color-life-soft:#f6efe3;--color-tech:#1b7a97;--color-tech-soft:#e7f1f5;--color-tools:#22796b;--color-tools-soft:#e5efec;--color-beginner:#4e7a45;--color-beginner-soft:#ebf2ea;--color-advanced:#4a5f80;--color-advanced-soft:#ecf0f6;--font-body:system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;--container:1060px;--reading:41rem;--radius:10px;--shadow:0 1px 2px #2b39460d, 0 6px 16px #2b394612;--shadow-hover:0 2px 4px #2b394612, 0 10px 24px #2b39461a}*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%}body{font-family:var(--font-body);color:var(--color-ink);background-color:var(--color-bg);flex-direction:column;min-height:100vh;font-size:1rem;line-height:1.75;display:flex}img,svg,video{max-width:100%;height:auto;display:block}ul[class],ol[class]{padding:0;list-style:none}a{color:var(--color-accent);text-underline-offset:.2em;text-decoration:underline 1px}a:hover{color:var(--color-accent-deep);text-decoration-thickness:2px}h1,h2,h3,h4{letter-spacing:.02em;font-weight:700;line-height:1.4}button{font:inherit}:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;border-radius:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1.25rem}main{flex:1;padding-block:2rem 3.5rem}main.container{padding-inline:1.25rem}.section{margin-block:3.5rem}.section:first-child{margin-top:0}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.5rem;display:flex}.section-head h2{border-left:4px solid var(--color-accent);padding-left:.75rem;font-size:1.5rem}.section-head .section-more a{white-space:nowrap;font-size:.95rem}.page-title{margin-bottom:.75rem;font-size:clamp(1.6rem,4.5vw,2.1rem)}.page-lead{color:var(--color-ink-soft);max-width:var(--reading);margin-bottom:2rem}.skip-link{z-index:100;background:var(--color-surface);color:var(--color-accent-deep);border-radius:0 0 var(--radius) var(--radius);border:1px solid var(--color-line);padding:.75rem 1.25rem;transition:top .15s ease-out;position:absolute;top:-4rem;left:.75rem}.skip-link:focus-visible{top:0}.site-header{background:var(--color-surface);border-bottom:1px solid var(--color-line);z-index:50;position:sticky;top:0}.site-header .header-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;min-height:64px;padding-block:.4rem;display:flex}.site-brand{letter-spacing:.04em;color:var(--color-ink);align-items:baseline;gap:.5rem;padding:.5rem 0;font-size:1.35rem;font-weight:700;text-decoration:none;display:flex}.site-brand:hover{color:var(--color-accent-deep);text-decoration:none}.site-brand .brand-mark{color:var(--color-accent)}.site-brand .brand-ja{color:var(--color-ink-faint);letter-spacing:.08em;font-size:.72rem;font-weight:400}.site-nav{flex-wrap:wrap;align-items:center;gap:.25rem;display:flex}.site-nav a{min-height:44px;color:var(--color-ink-soft);border-radius:var(--radius);align-items:center;padding:0 .85rem;font-size:.95rem;text-decoration:none;display:inline-flex}.site-nav a:hover{color:var(--color-accent-deep);background:var(--color-accent-soft);text-decoration:none}.site-nav a[aria-current=page]{color:var(--color-accent-deep);background:var(--color-accent-soft);font-weight:700}.site-nav .nav-rss{border:1px solid var(--color-line)}.site-footer{background:var(--color-surface);border-top:1px solid var(--color-line);margin-top:auto;padding-block:2.5rem}.site-footer .footer-brand{color:var(--color-ink);font-size:1.1rem;font-weight:700}.site-footer .footer-tagline{color:var(--color-ink-faint);margin-top:.25rem;font-size:.88rem}.site-footer .footer-nav{flex-wrap:wrap;gap:.25rem 1.25rem;margin-top:1.25rem;display:flex}.site-footer .footer-nav a{color:var(--color-ink-soft);align-items:center;min-height:44px;font-size:.9rem;text-decoration:none;display:inline-flex}.site-footer .footer-nav a:hover{color:var(--color-accent-deep);text-decoration:underline}.site-footer .footer-copy{color:var(--color-ink-faint);margin-top:1.5rem;font-size:.8rem}.crumbs{margin-bottom:.5rem}.crumbs ol{color:var(--color-ink-faint);flex-wrap:wrap;align-items:center;gap:.15rem;padding:0;font-size:.85rem;list-style:none;display:flex}.crumbs li{align-items:center;display:flex}.crumbs li+li:before{content:"›";color:var(--color-line);margin-inline:.5rem;font-weight:700}.crumbs a{color:var(--color-ink-faint);align-items:center;min-height:40px;padding-block:.25rem;text-decoration:none;display:inline-flex}.crumbs a:hover{color:var(--color-accent-deep);text-decoration:underline}.crumbs [aria-current=page]{color:var(--color-ink-soft)}.hero{border-bottom:1px solid var(--color-line);background:radial-gradient(120% 90% at 80% 0,#eaf4f7 0%,#0000 60%),linear-gradient(#f2f7f9 0%,#e7f1f5 100%);position:relative;overflow:hidden}.hero .hero-inner{z-index:1;max-width:46rem;padding-block:4.5rem 7rem;position:relative}.hero h1{letter-spacing:.03em;color:var(--color-ink);font-size:clamp(2rem,6vw,3rem)}.hero .hero-tagline{color:var(--color-accent-deep);margin-top:1rem;font-size:clamp(1.05rem,2.6vw,1.3rem);font-weight:700}.hero .hero-desc{color:var(--color-ink-soft);max-width:36rem;margin-top:1rem}.hero .hero-actions{flex-wrap:wrap;gap:.75rem;margin-top:2rem;display:flex}.hero .hero-wave{z-index:0;width:100%;height:96px;position:absolute;bottom:-1px;left:0;right:0}.hero .hero-wave .wave-back{fill:var(--color-accent);opacity:.14}.hero .hero-wave .wave-front{fill:var(--color-accent);opacity:.28}.btn{border-radius:999px;justify-content:center;align-items:center;min-height:48px;padding:.5rem 1.5rem;font-size:.95rem;font-weight:700;text-decoration:none;transition:background-color .15s ease-out,color .15s ease-out;display:inline-flex}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover{background:var(--color-accent-deep);color:#fff}.btn-ghost{background:var(--color-surface);color:var(--color-accent-deep);border:1px solid var(--color-line)}.btn-ghost:hover{border-color:var(--color-accent);color:var(--color-accent-deep)}.card-grid{grid-template-columns:1fr;gap:1.5rem;display:grid}.card-grid>li,.cat-grid>li,.level-grid>li,.tag-cloud>li{display:flex}.card-grid .postcard,.cat-grid .catcard,.level-grid .catcard{width:100%}@media (width>=768px){.card-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1280px){.card-grid{grid-template-columns:repeat(3,1fr)}}.postcard{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);flex-direction:column;transition:box-shadow .15s ease-out,transform .15s ease-out;display:flex;overflow:hidden}.postcard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.postcard-visual{aspect-ratio:16/9;background:linear-gradient(150deg, #eef5f7 0%, var(--accent-soft,var(--color-accent-soft)) 100%);width:100%;position:relative}.postcard-visual img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.postcard-visual .card-wave{width:100%;height:42%;position:absolute;bottom:0;left:0;right:0}.postcard-visual .card-wave .wave-back{fill:var(--accent,var(--color-accent));opacity:.16}.postcard-visual .card-wave .wave-front{fill:var(--accent,var(--color-accent));opacity:.3}.postcard-body{flex-direction:column;flex:1;gap:.5rem;padding:1.1rem 1.25rem 1.35rem;display:flex}.postcard-meta{color:var(--color-ink-faint);flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.8rem;display:flex}.postcard-meta .meta-date time{font-variant-numeric:tabular-nums}.postcard-title{font-size:1.12rem;line-height:1.5}.postcard-title a{color:var(--color-ink);text-decoration:none}.postcard:hover .postcard-title a,.postcard-title a:hover{color:var(--color-accent-deep);text-decoration:underline}.postcard-desc{color:var(--color-ink-soft);-webkit-line-clamp:3;-webkit-box-orient:vertical;font-size:.88rem;line-height:1.8;display:-webkit-box;overflow:hidden}.postcard-tags{margin-top:auto;padding-top:.35rem}.category-pill{min-height:30px;color:var(--accent,var(--color-accent));background:var(--accent-soft,var(--color-accent-soft));border:1px solid color-mix(in srgb, var(--accent,var(--color-accent)) 25%, transparent);border-radius:999px;align-items:center;padding:.15rem .7rem;font-size:.78rem;font-weight:700;text-decoration:none;display:inline-flex}.category-pill:hover{color:var(--accent,var(--color-accent));background:color-mix(in srgb, var(--accent,var(--color-accent)) 18%, #fff);text-decoration:none}.level-badge{min-height:30px;color:var(--accent,var(--color-accent));background:var(--accent-soft,var(--color-accent-soft));border:1px solid color-mix(in srgb, var(--accent,var(--color-accent)) 25%, transparent);cursor:help;border-radius:999px;align-items:center;padding:.15rem .7rem;font-size:.78rem;font-weight:700;display:inline-flex}.tag-list{flex-wrap:wrap;gap:.4rem;display:flex}.tag-chip{min-height:44px;color:var(--color-ink-soft);border:1px solid var(--color-line);background:0 0;border-radius:999px;align-items:center;padding:0 .7rem;font-size:.8rem;text-decoration:none;transition:border-color .15s ease-out,color .15s ease-out;display:inline-flex}.tag-chip:hover{color:var(--color-accent-deep);border-color:var(--color-accent);text-decoration:none}.tag-chip .tag-count{color:var(--color-ink-faint);font-variant-numeric:tabular-nums;margin-left:.35rem;font-size:.72rem}.category-nav{flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;display:flex}.category-nav a{min-height:44px;color:var(--accent,var(--color-ink-soft));background:var(--color-surface);border:1px solid var(--color-line);border-radius:999px;align-items:center;gap:.4rem;padding:0 1rem;font-size:.9rem;font-weight:700;text-decoration:none;transition:border-color .15s ease-out;display:inline-flex}.category-nav a:hover{border-color:var(--accent,var(--color-accent));text-decoration:none}.category-nav a[aria-current=page]{background:var(--accent-soft,var(--color-accent-soft));border-color:var(--accent,var(--color-accent))}.category-nav .cat-count{color:var(--color-ink-faint);font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:400}.cat-grid{grid-template-columns:1fr;gap:1.25rem;display:grid}@media (width>=768px){.cat-grid{grid-template-columns:repeat(3,1fr)}}.catcard{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--color-ink);flex-direction:column;gap:.5rem;padding:1.5rem;text-decoration:none;transition:box-shadow .15s ease-out,transform .15s ease-out;display:flex}.catcard:hover{box-shadow:var(--shadow-hover);color:var(--color-ink);text-decoration:none;transform:translateY(-2px)}.catcard .cat-label{align-items:center;gap:.5rem;font-size:1.15rem;font-weight:700;display:inline-flex}.catcard .cat-dot{background:var(--accent,var(--color-accent));border-radius:50%;flex:none;width:12px;height:12px}.catcard .cat-desc{color:var(--color-ink-soft);font-size:.9rem;line-height:1.75}.catcard .cat-count{color:var(--color-ink-faint);margin-top:auto;font-size:.82rem}.level-grid{grid-template-columns:1fr;gap:1.25rem;display:grid}@media (width>=768px){.level-grid{grid-template-columns:repeat(2,1fr)}}.pagination{margin-top:3rem}.pagination ul{flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem;display:flex}.pagination a,.pagination span{border-radius:var(--radius);min-width:44px;min-height:44px;color:var(--color-ink-soft);justify-content:center;align-items:center;padding:0 .8rem;font-size:.92rem;text-decoration:none;display:inline-flex}.pagination a{background:var(--color-surface);border:1px solid var(--color-line)}.pagination a:hover{border-color:var(--color-accent);color:var(--color-accent-deep);text-decoration:none}.pagination [aria-current=page]{background:var(--color-accent);border:1px solid var(--color-accent);color:#fff;font-weight:700}.pagination .page-ellipsis{color:var(--color-ink-faint)}.pagination .page-disabled{color:var(--color-ink-faint);opacity:.6}.prose{max-width:var(--reading);letter-spacing:.02em;color:var(--color-ink);overflow-wrap:break-word;font-size:1.06rem;line-height:1.9}.prose>*+*{margin-top:1.4em}.prose h2{border-left:4px solid var(--color-accent);border-bottom:1px solid var(--color-line);margin-top:2.4em;padding:.35em 0 .35em .75em;font-size:1.45rem;line-height:1.5}.prose h3{border-bottom:1px solid var(--color-line);margin-top:2em;padding-bottom:.25em;font-size:1.2rem}.prose h4{margin-top:1.8em;font-size:1.05rem}.prose p{margin-block:1.4em}.prose p:first-child{margin-top:0}.prose ul,.prose ol{padding-left:1.4em}.prose ul{list-style:outside}.prose ol{list-style:decimal}.prose li+li{margin-top:.45em}.prose li::marker{color:var(--color-accent)}.prose a{text-underline-offset:.18em;text-decoration:underline 1px}.prose a:hover{text-decoration-thickness:2px}.prose strong{font-weight:700}.prose blockquote{border-left:4px solid var(--color-line);background:var(--color-surface);border-radius:0 var(--radius) var(--radius) 0;color:var(--color-ink-soft);padding:.75em 1.25em}.prose blockquote p{margin-block:.4em}.prose hr{background:var(--color-line);border:none;height:1px;margin-block:2.5em}.prose code{background:var(--color-accent-soft);word-break:break-word;border-radius:4px;padding:.15em .4em;font-family:ui-monospace,SF Mono,Cascadia Code,Menlo,Consolas,monospace;font-size:.88em}.prose pre{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);padding:1.1rem 1.25rem;font-size:.88rem;line-height:1.6;overflow-x:auto}.prose pre code{font-size:inherit;background:0 0;border-radius:0;padding:0}.prose img{border-radius:var(--radius);border:1px solid var(--color-line);margin-inline:auto}.prose figcaption{color:var(--color-ink-faint);text-align:center;margin-top:.5em;font-size:.82rem}.prose table{border-collapse:collapse;width:100%;font-size:.94rem}.prose th,.prose td{border:1px solid var(--color-line);text-align:left;padding:.55em .8em}.prose th{background:var(--color-accent-soft);font-weight:700}.post-header{margin-bottom:2rem}.post-title{max-width:24em;font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.45}.post-meta{color:var(--color-ink-faint);flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:1rem;font-size:.88rem;display:flex}.post-meta time{font-variant-numeric:tabular-nums}.post-meta a.category-pill{position:relative}.post-meta a.category-pill:after{content:"";position:absolute;inset:-7px 0}.post-hero{border-radius:var(--radius);border:1px solid var(--color-line);aspect-ratio:16/9;background:linear-gradient(150deg, #eef5f7 0%, var(--accent-soft,var(--color-accent-soft)) 100%);margin-top:1.75rem;position:relative;overflow:hidden}.post-hero img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.post-hero .hero-wave-default{width:100%;height:45%;position:absolute;bottom:0;left:0;right:0}.post-hero .hero-wave-default .wave-back{fill:var(--accent,var(--color-accent));opacity:.16}.post-hero .hero-wave-default .wave-front{fill:var(--accent,var(--color-accent));opacity:.3}.post-hero .hero-sun{fill:var(--accent,var(--color-accent));opacity:.2}.related{margin-top:4rem}.back-to-list{border-top:1px solid var(--color-line);margin-top:2.5rem;padding-top:1.5rem}.empty-state{background:var(--color-surface);border:1px dashed var(--color-line);border-radius:var(--radius);text-align:center;color:var(--color-ink-soft);padding:3rem 1.5rem}.empty-state p{font-size:.98rem}.empty-state .empty-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.25rem;display:flex}.ad-slot{text-align:center;margin-block:2.5rem}.ad-slot .ad-slot-label{color:var(--color-ink-faint);letter-spacing:.1em;margin-bottom:.4rem;font-size:.72rem}.ad-slot .ad-slot-box{border:1px dashed var(--color-line);border-radius:var(--radius);max-width:728px;min-height:250px;color:var(--color-ink-faint);background:repeating-linear-gradient(-45deg,#f3f6f8,#f3f6f8 12px,#edf1f4 12px 24px);justify-content:center;align-items:center;margin-inline:auto;font-size:.85rem;display:flex}.tag-cloud{flex-wrap:wrap;gap:.5rem;display:flex}.narrow{max-width:var(--reading)}.narrow p+p{margin-top:1.2em}.narrow h2{border-left:4px solid var(--color-accent);margin-top:2.2em;padding-left:.7rem;font-size:1.3rem}.narrow ul{padding-left:1.4em;list-style:outside}.narrow li+li{margin-top:.4em}.narrow .author-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);align-items:flex-start;gap:1rem;margin-top:1rem;padding:1.25rem 1.5rem;display:flex}.narrow .author-card .author-avatar{background:linear-gradient(150deg, var(--color-accent-soft), var(--color-accent));color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:56px;height:56px;font-size:1.3rem;font-weight:700;display:flex}.error-page{text-align:center;padding-block:3rem 2rem}.error-page .error-code{color:var(--color-accent);letter-spacing:.05em;font-size:clamp(3.5rem,12vw,6rem);font-weight:700;line-height:1}.error-page .error-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem;display:flex}