/*! * Kaku Theme v3.0 — Our Soil / OurBlog * Silk × Pearl reading-focused Ghost theme. * Japanese typography first. User-selectable 明朝/ゴシック. */ /* ============================================================ 0. Design tokens — Silk / Pearl ============================================================ */ :root { /* === Paper scale (紙・シルク 9段階) === */ --paper-0: #FDFCFA; --paper-50: #FBFAF7; --paper-100: #F8F6F2; --paper-200: #F2EFE8; --paper-300: #E8E4DC; --ink-50: #A0A2AC; --ink-100: #5C5E68; --ink-200: #35363D; --ink-900: #1A1A1E; /* === Accent scale (鳩羽鼠 5段階) === */ --accent-50: #F0EEF3; --accent-100: #D8D4E0; --accent-200: #A69DB8; --accent-500: #6F6681; --accent-700: #544C63; --accent-900: #362F47; /* === Luxe semantic (記事内装飾・シルキーラグジュアリー) === */ --wa-success: #9EB4A6; /* シルバーセージ */ --wa-warning: #C8A97E; /* シャンパンゴールド */ --wa-danger: #A05566; /* ワインローズ */ --wa-info: #AEBFC9; /* アイスブルー */ --wa-success-bg: rgba(158, 180, 166, 0.12); --wa-warning-bg: rgba(200, 169, 126, 0.14); --wa-danger-bg: rgba(160, 85, 102, 0.10); --wa-info-bg: rgba(174, 191, 201, 0.14); /* Bubble pastels (pearl) */ --bubble-left: #EAE6EE; /* ラベンダーパール */ --bubble-right: #E6DFEB; /* 少し濃い紫パール */ --bubble-avatar-left: #DED8E6; /* === Pearl sheen === */ --sheen-top: rgba(255, 255, 255, 0.28); --sheen-mid: rgba(255, 255, 255, 0.08); /* === Semantic mapping (existing token aliases) === */ --kaku-bg: var(--paper-50); --kaku-bg-gradient: linear-gradient(180deg, var(--paper-50) 0%, #F6F3EE 100%); --kaku-surface: var(--paper-100); --kaku-text: var(--ink-900); --kaku-text-sub: var(--ink-100); --kaku-border: rgba(92, 94, 104, 0.18); --kaku-accent: var(--accent-500); --kaku-accent-hover: var(--accent-700); /* Sticky header height — synced via JS ResizeObserver in kaku.js */ --header-h: 60px; /* Legacy alias tokens — kept for gscan compliance / existing selectors */ --fg: var(--kaku-text); --fg-muted: var(--kaku-text-sub); --fg-faint: #8B8D96; --bg: var(--kaku-bg); --bg-elev: var(--kaku-surface); --bg-soft: var(--kaku-surface); --line: var(--kaku-border); --line-strong: rgba(92, 94, 104, 0.32); --kaku-accent-soft: rgba(92, 107, 133, 0.10); /* Font families — switched by html.font-serif / html.font-sans */ --kaku-font-body: 'Newsreader', 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --kaku-font-heading: 'Shippori Mincho', 'Newsreader', 'Hiragino Mincho ProN', 'Yu Mincho', serif; /* Ghost-required font variables */ --gh-font-heading: var(--kaku-font-heading); --gh-font-body: var(--kaku-font-body); --font-ja: var(--kaku-font-body); --font-en: 'Newsreader', ui-serif, Georgia, serif; --content-width: 640px; --wide-width: 960px; --full-width: 1200px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Serif / Sans family switch (set on ) */ html.font-serif { --kaku-font-body: 'Newsreader', 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --kaku-font-heading: 'Shippori Mincho', 'Newsreader', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --font-en: 'Newsreader', ui-serif, Georgia, serif; } html.font-sans { --kaku-font-body: 'Inter', 'BIZ UDPGothic', 'Hiragino Sans', 'Yu Gothic', sans-serif; --kaku-font-heading: 'BIZ UDPGothic', 'Inter', 'Hiragino Sans', 'Yu Gothic', sans-serif; --font-en: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; } :root[data-theme="dark"], html[data-theme="dark"] { --paper-0: #22222A; --paper-50: #18181E; --paper-100: #1F1F26; --paper-200: #2A2A32; --paper-300: #35353E; --ink-50: #7A7C86; --ink-100: #A0A2AC; --ink-200: #C8C9D1; --ink-900: #E8E6E0; --accent-50: #2B2935; --accent-100: #3E3A4B; --accent-500: #A69DB8; --accent-700: #BDB5CC; --bubble-left: #2E2B37; --bubble-right: #3A3346; --bubble-avatar-left: #3E3A4B; --kaku-bg: var(--paper-50); --kaku-bg-gradient: linear-gradient(180deg, var(--paper-50) 0%, var(--paper-100) 100%); --kaku-surface: var(--paper-100); --kaku-text: var(--ink-900); --kaku-text-sub: var(--ink-100); --kaku-border: rgba(232, 230, 224, 0.14); --kaku-accent: var(--accent-500); --kaku-accent-hover: var(--accent-700); --fg: var(--kaku-text); --fg-muted: var(--kaku-text-sub); --fg-faint: #7A7C86; --bg: var(--kaku-bg); --bg-elev: var(--kaku-surface); --bg-soft: var(--kaku-surface); --line: var(--kaku-border); --line-strong: rgba(232, 230, 224, 0.28); --kaku-accent-soft: rgba(159, 176, 208, 0.14); } /* ============================================================ 1. Reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; background: var(--kaku-bg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--kaku-font-body); font-weight: 400; line-height: 1.9; color: var(--kaku-text); background: var(--kaku-bg); background-image: var(--kaku-bg-gradient); background-attachment: fixed; font-feature-settings: "palt" 1; word-break: keep-all; line-break: strict; overflow-wrap: break-word; } html.font-sans body { line-height: 1.8; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--kaku-accent); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--kaku-accent-hover); } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { font-family: var(--kaku-font-heading); font-weight: 600; line-height: 1.55; letter-spacing: 0.01em; color: var(--kaku-text); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--kaku-accent); color: #fff; padding: 8px 12px; z-index: 999; } .skip-link:focus { left: 8px; top: 8px; } :focus-visible { outline: 1px solid var(--kaku-accent); outline-offset: 3px; border-radius: 2px; } .subscribe__form input:focus-visible { outline-offset: 1px; } /* ============================================================ 2. Silk sheen — hairline borders & hover sheen ============================================================ */ .silk { position: relative; background: var(--kaku-surface); border: 1px solid var(--kaku-border); overflow: hidden; } @supports (border-width: 0.5px) { .silk { border-width: 0.5px; } } .silk::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.04) 50%, transparent 60%, transparent 100% ); transform: translateX(-100%); transition: transform .9s var(--ease); pointer-events: none; } .silk:hover::before { transform: translateX(100%); } html[data-theme="dark"] .silk::before { background: linear-gradient( 120deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%, transparent 100% ); } /* ============================================================ 3. Header / navigation ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--kaku-bg); border-bottom: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .site-header { border-bottom-width: 0.5px; } } .site-header__inner { max-width: var(--full-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 16px; } .site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--kaku-text); font-weight: 600; } .site-title { font-family: var(--kaku-font-heading); font-weight: 600; font-size: 1.08rem; letter-spacing: 0.04em; } .site-logo { max-height: 30px; width: auto; } .site-nav { display: none; } @media (min-width: 860px) { .site-nav { display: block; flex: 1 1 auto; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; justify-content: center; } .nav-item a { color: var(--kaku-text-sub); font-weight: 400; font-size: 0.94rem; } .nav-item a:hover { color: var(--kaku-text); } .btn-menu { display: none; } } .site-actions { display: flex; align-items: center; gap: 4px; } .btn-icon { background: transparent; border: 0; color: var(--kaku-text-sub); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; transition: color .2s var(--ease), background-color .2s var(--ease); } .btn-icon:hover { color: var(--kaku-text); background: var(--kaku-surface); } .icon-sun, .icon-moon { display: none; } html[data-theme="light"] .icon-moon { display: block; } html[data-theme="dark"] .icon-sun { display: block; } .site-drawer { position: fixed; top: var(--header-h, 60px); left: 0; right: 0; max-height: calc(100vh - var(--header-h, 60px)); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--kaku-bg); border-top: 1px solid var(--kaku-border); padding: 16px 24px 28px; animation: slide-down .25s var(--ease); z-index: 60; } .site-drawer[hidden] { display: none; } .drawer-list { list-style: none; margin: 0; padding: 0; } .drawer-list li { padding: 14px 0; border-bottom: 1px solid var(--kaku-border); } .drawer-list a { color: var(--kaku-text); font-weight: 400; font-size: 1.02rem; display: block; } @keyframes slide-down { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; transform: none;} } .site-drawer-overlay { position: fixed; inset: var(--header-h, 60px) 0 0 0; background: rgba(26, 26, 30, 0.25); z-index: 55; animation: fade-in .2s var(--ease); } .site-drawer-overlay[hidden] { display: none; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } body.is-drawer-open { overflow: hidden; } /* ============================================================ 4. Hero — quiet silk surface ============================================================ */ .hero { max-width: var(--wide-width); margin: 56px auto 48px; padding: 72px 28px 80px; text-align: center; position: relative; } .hero__kicker { font-family: var(--font-en); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--kaku-text-sub); margin: 0 0 18px; } .hero__headline { font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.55; margin: 0 auto 20px; max-width: 22ch; font-weight: 500; letter-spacing: 0.02em; } .hero__sub { color: var(--kaku-text-sub); font-size: 1rem; max-width: 38ch; margin: 0 auto; line-height: 1.9; } .hero__ornament { display: block; font-family: var(--font-en); color: var(--kaku-text-sub); opacity: 0.5; font-size: 1.2rem; margin: 28px auto 0; letter-spacing: 0.4em; } /* ============================================================ 5. Section / grid ============================================================ */ .site-main { max-width: var(--full-width); margin: 0 auto; padding: 0 24px 96px; } .section-title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.08em; margin: 56px 0 24px; padding-bottom: 10px; border-bottom: 1px solid var(--kaku-border); color: var(--kaku-text); } @supports (border-width: 0.5px) { .section-title { border-bottom-width: 0.5px; } } .section-title::before { content: ""; color: var(--kaku-text-sub); opacity: 0.6; margin-right: 6px; font-size: 0.9em; } .post-grid { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .post-grid { border-top-width: 0.5px; } } @media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .post-grid { grid-template-columns: repeat(3, 1fr); } } .post-grid--featured .post-card:first-child { grid-column: 1 / -1; } .post-grid--featured .post-card:first-child .post-card__title { font-size: 1.5rem; } /* ============================================================ 6. Post card — hairline border only, no shadow ============================================================ */ .post-card { position: relative; background: transparent; overflow: hidden; transition: background-color .3s var(--ease); } .post-card:hover { background: var(--kaku-surface); } .post-card__link { color: inherit; display: block; padding: 28px 24px 32px; } .post-card__image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--kaku-surface); margin-bottom: 20px; border: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .post-card__image { border-width: 0.5px; } } .post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s var(--ease); } .post-card:hover .post-card__image img { opacity: 0.92; } .post-card__body { padding: 0; } .post-card__tag { display: inline-block; font-family: var(--font-en); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--kaku-text-sub); margin-bottom: 12px; } .post-card__tag::before { content: ""; opacity: 0.6; } .post-card__title { margin: 0 0 12px; font-size: 1.18rem; line-height: 1.55; font-weight: 600; letter-spacing: 0.01em; } .post-card__excerpt { color: var(--kaku-text-sub); font-size: 0.94rem; margin: 0 0 16px; line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card__meta { display: flex; gap: 14px; font-family: var(--font-en); font-size: 0.78rem; color: var(--fg-faint); letter-spacing: 0.04em; } /* ============================================================ 7. Post page — narrow reading column ============================================================ */ .post { max-width: var(--content-width); margin: 56px auto; padding: 0 24px; } .post-header { text-align: left; margin-bottom: 32px; } .post-header__tag { display: inline-block; font-family: var(--font-en); font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kaku-text-sub); margin-bottom: 18px; } .post-header__tag::before { content: ""; opacity: 0.6; } .post-header__title { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.5; font-weight: 600; margin: 0 0 18px; letter-spacing: 0.01em; } .post-header__excerpt { color: var(--kaku-text-sub); font-size: 1.02rem; line-height: 1.9; margin: 0 0 24px; } .post-header__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--fg-faint); font-size: 0.82rem; font-family: var(--font-en); padding-bottom: 24px; border-bottom: 1px solid var(--kaku-border); letter-spacing: 0.04em; } @supports (border-width: 0.5px) { .post-header__meta { border-bottom-width: 0.5px; } } .post-header__author { display: inline-flex; align-items: center; gap: 10px; color: var(--kaku-text); } .author-avatar { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; } .post-hero { margin: 32px auto 40px; max-width: var(--wide-width); } .post-hero img { width: 100%; border: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .post-hero img { border-width: 0.5px; } } .post-hero figcaption { color: var(--fg-faint); font-size: 0.82rem; text-align: center; margin-top: 10px; font-family: var(--font-en); } /* Table of contents — hairline left border, no box */ .post-toc { margin: 32px 0; padding: 4px 0 4px 20px; border-left: 1px solid var(--kaku-border); background: transparent; } @supports (border-width: 0.5px) { .post-toc { border-left-width: 0.5px; } } .post-toc[hidden] { display: none; } .post-toc__details { margin: 0; } .post-toc__summary { font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--font-en); color: var(--kaku-text-sub); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; } .post-toc__summary::-webkit-details-marker { display: none; } .post-toc__summary::before { content: ""; opacity: 0.6; } .post-toc__summary::after { content: ""; width: 8px; height: 8px; border-right: 1px solid var(--kaku-text-sub); border-bottom: 1px solid var(--kaku-text-sub); transform: rotate(45deg); transition: transform .2s var(--ease); } .post-toc__details[open] .post-toc__summary::after { transform: rotate(-135deg); } .post-toc__list { list-style: none; padding: 0; margin: 14px 0 0; counter-reset: toc; } .post-toc__list li { padding: 5px 0; font-size: 0.9rem; line-height: 1.55; } .post-toc__list li a { color: var(--kaku-text-sub); display: inline-block; border-left: 1px solid transparent; padding-left: 10px; margin-left: -12px; transition: color .2s var(--ease), border-color .2s var(--ease); } .post-toc__list li a:hover { color: var(--kaku-text); } .post-toc__list li a.is-active { color: var(--kaku-text); border-left-color: var(--kaku-accent); } .post-toc__list .toc-level-3 { padding-left: 18px; font-size: 0.84rem; } /* Scroll anchoring */ .gh-content h2, .gh-content h3 { scroll-margin-top: calc(var(--header-h, 60px) + 16px); } /* ============================================================ Post content typography — the core of the theme ============================================================ */ .post-content, .gh-content { font-size: 1.02rem; color: var(--kaku-text); } .gh-content > * + * { margin-top: 1.5em; } .gh-content p + p { margin-top: 1.75em; } .gh-content h2 { margin-top: 3em; margin-bottom: 0.8em; font-size: 1.45rem; font-weight: 600; letter-spacing: 0.015em; padding-bottom: 10px; border-bottom: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .gh-content h2 { border-bottom-width: 0.5px; } } .gh-content h3 { margin-top: 2.2em; font-size: 1.18rem; font-weight: 600; letter-spacing: 0.015em; } .gh-content h3::before { content: ""; color: var(--kaku-accent); opacity: 0.65; margin-right: 4px; } .gh-content h4 { margin-top: 1.8em; font-size: 1.04rem; font-weight: 600; } .gh-content p { line-height: 1.9; } html.font-sans .gh-content p { line-height: 1.85; } .gh-content a { color: var(--kaku-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--kaku-border); transition: text-decoration-color .2s var(--ease), color .2s var(--ease); } .gh-content a:hover { color: var(--kaku-accent-hover); text-decoration-color: var(--kaku-accent); } .gh-content blockquote { margin: 1.8em 0; padding: 6px 0 6px 24px; background: transparent; border-left: 2px solid var(--kaku-border); color: var(--kaku-text-sub); font-style: normal; } html.font-serif .gh-content blockquote { font-style: italic; } .gh-content code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: var(--kaku-surface); padding: 2px 6px; border-radius: 2px; border: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .gh-content code { border-width: 0.5px; } } .gh-content pre { background: #18181E; color: #E8E6E0; padding: 20px 22px; overflow-x: auto; font-size: 0.88rem; line-height: 1.75; border: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .gh-content pre { border-width: 0.5px; } } .gh-content pre code { background: transparent; padding: 0; border: 0; color: inherit; } /* Ornamental divider */ .gh-content hr { border: 0; margin: 3em auto; width: 100%; text-align: center; height: 1em; position: relative; } .gh-content hr::before { content: ""; color: var(--kaku-text-sub); opacity: 0.55; font-family: var(--font-en); letter-spacing: 0.5em; font-size: 0.95rem; } .gh-content ul, .gh-content ol { padding-left: 1.6em; line-height: 1.9; } .gh-content li + li { margin-top: 0.5em; } .gh-content table { border-collapse: collapse; width: 100%; font-size: 0.94rem; border-top: 1px solid var(--kaku-border); border-bottom: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .gh-content table { border-top-width: 0.5px; border-bottom-width: 0.5px; } } .gh-content th, .gh-content td { border-bottom: 1px solid var(--kaku-border); padding: 12px 14px; text-align: left; } @supports (border-width: 0.5px) { .gh-content th, .gh-content td { border-bottom-width: 0.5px; } } .gh-content th { font-weight: 600; } .gh-content img { width: 100%; } .gh-content figure { margin: 2em 0; } .gh-content figcaption { color: var(--fg-faint); font-size: 0.82rem; text-align: center; margin-top: 10px; font-family: var(--font-en); letter-spacing: 0.04em; } /* Koenig wide / full */ .kg-width-wide, .kg-width-wide img, .kg-width-wide figure, figure.kg-width-wide { display: block; margin-left: 50%; transform: translateX(-50%); max-width: min(var(--wide-width), 92vw); width: min(var(--wide-width), 92vw); } .kg-width-full, .kg-width-full img, .kg-width-full figure, figure.kg-width-full { display: block; margin-left: 50%; transform: translateX(-50%); max-width: 100vw; width: 100vw; } .kg-bookmark-card, .kg-bookmark-container { border: 1px solid var(--kaku-border); overflow: hidden; display: flex; color: var(--kaku-text); text-decoration: none; background: var(--kaku-surface); } @supports (border-width: 0.5px) { .kg-bookmark-card, .kg-bookmark-container { border-width: 0.5px; } } .kg-bookmark-content { padding: 18px 22px; flex: 1 1 auto; } .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .kg-callout-card { padding: 18px 22px; margin: 1.8em 0; background: var(--kaku-surface); border-left: 2px solid var(--kaku-accent); } .kg-toggle-card { border: 1px solid var(--kaku-border); padding: 14px 20px; margin: 1.8em 0; } @supports (border-width: 0.5px) { .kg-toggle-card { border-width: 0.5px; } } .kg-button-card { text-align: center; margin: 2em 0; } .kg-button-card a { display: inline-block; padding: 12px 28px; background: var(--kaku-accent); color: #fff; text-decoration: none; font-weight: 500; letter-spacing: 0.04em; transition: background-color .2s var(--ease); } .kg-button-card a:hover { background: var(--kaku-accent-hover); color: #fff; } /* Post tags */ .post-tags { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--font-en); } .post-tag { display: inline-block; font-size: 0.82rem; color: var(--kaku-text-sub); letter-spacing: 0.04em; border-bottom: 1px solid var(--kaku-border); padding-bottom: 2px; } .post-tag:hover { color: var(--kaku-text); border-bottom-color: var(--kaku-accent); } .author-card { margin: 56px 0; padding: 28px 0; border-top: 1px solid var(--kaku-border); border-bottom: 1px solid var(--kaku-border); display: flex; gap: 20px; align-items: flex-start; } @supports (border-width: 0.5px) { .author-card { border-top-width: 0.5px; border-bottom-width: 0.5px; } } .author-card__avatar { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; } .author-card__name { margin: 0 0 6px; font-weight: 600; } .author-card__bio { margin: 0 0 10px; color: var(--kaku-text-sub); font-size: 0.92rem; line-height: 1.8; } .author-card__links { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; font-size: 0.84rem; font-family: var(--font-en); color: var(--kaku-text-sub); } .post-nav { margin: 48px 0; display: grid; gap: 16px; grid-template-columns: 1fr; border-top: 1px solid var(--kaku-border); padding-top: 28px; } @supports (border-width: 0.5px) { .post-nav { border-top-width: 0.5px; } } @media (min-width: 720px) { .post-nav { grid-template-columns: 1fr 1fr; gap: 24px; } } .post-nav__item { display: block; padding: 0; color: var(--kaku-text); transition: color .2s var(--ease); } .post-nav__item:hover .post-nav__title { color: var(--kaku-accent); } .post-nav__label { display: block; font-family: var(--font-en); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kaku-text-sub); margin-bottom: 8px; } .post-nav__title { font-weight: 500; line-height: 1.55; transition: color .2s var(--ease); } @media (min-width: 720px) { .post-nav__prev { grid-column: 1; text-align: left; } .post-nav__next { grid-column: 2; text-align: right; } } /* ============================================================ 8. Archive (tag/author) ============================================================ */ .archive-header { max-width: var(--wide-width); margin: 56px auto 40px; padding: 40px 28px; text-align: center; } .archive-header__kicker { color: var(--kaku-text-sub); font-family: var(--font-en); font-size: 0.76rem; letter-spacing: 0.3em; text-transform: uppercase; margin: 0 0 12px; } .archive-header__title { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 12px; font-weight: 500; letter-spacing: 0.02em; } .archive-header__desc { color: var(--kaku-text-sub); max-width: 44ch; margin: 0 auto; line-height: 1.9; } .archive-header__count { color: var(--fg-faint); font-size: 0.82rem; font-family: var(--font-en); letter-spacing: 0.1em; margin-top: 16px; } .author-archive__avatar { width: 80px; height: 80px; border-radius: 999px; object-fit: cover; margin: 0 auto 16px; } .author-archive__links { list-style: none; padding: 0; margin: 16px 0 0; display: flex; justify-content: center; gap: 18px; font-size: 0.86rem; font-family: var(--font-en); } /* ============================================================ 9. Pagination — text link only ============================================================ */ .pagination { display: flex; justify-content: space-between; align-items: center; max-width: var(--wide-width); margin: 56px auto 40px; padding: 24px 16px; border-top: 1px solid var(--kaku-border); font-size: 0.92rem; font-family: var(--font-en); letter-spacing: 0.04em; } @supports (border-width: 0.5px) { .pagination { border-top-width: 0.5px; } } .pagination__prev, .pagination__next { color: var(--kaku-text); font-weight: 400; } .pagination__prev:hover, .pagination__next:hover { color: var(--kaku-accent); } .pagination__count { color: var(--kaku-text-sub); letter-spacing: 0.1em; } .is-disabled { opacity: 0.25; pointer-events: none; } /* ============================================================ 10. Subscribe — minimal underline ============================================================ */ .subscribe { max-width: var(--content-width); margin: 72px auto; padding: 40px 24px; text-align: center; border-top: 1px solid var(--kaku-border); border-bottom: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .subscribe { border-top-width: 0.5px; border-bottom-width: 0.5px; } } .subscribe__title { margin: 0 0 12px; font-size: 1.18rem; font-weight: 600; letter-spacing: 0.02em; } .subscribe__lead { margin: 0 0 26px; color: var(--kaku-text-sub); font-size: 0.94rem; line-height: 1.85; } .subscribe__form { display: flex; gap: 0; justify-content: center; align-items: flex-end; flex-wrap: wrap; max-width: 420px; margin: 0 auto; border-bottom: 1px solid var(--kaku-border); } @supports (border-width: 0.5px) { .subscribe__form { border-bottom-width: 0.5px; } } .subscribe__form:focus-within { border-bottom-color: var(--kaku-accent); } .subscribe__form input { flex: 1 1 200px; padding: 10px 4px; border: 0; background: transparent; color: var(--kaku-text); font: inherit; font-size: 0.95rem; } .subscribe__form input:focus { outline: none; } .subscribe__form input::placeholder { color: var(--fg-faint); } .subscribe__note, .subscribe__success { min-height: 1.4em; font-size: 0.84rem; margin: 14px 0 0; color: var(--kaku-text-sub); } .subscribe__success { display: none; color: var(--kaku-accent); } .subscribe.is-success .subscribe__form { display: none; } .subscribe.is-success .subscribe__success { display: block; } .btn { display: inline-block; padding: 10px 22px; border: 1px solid var(--kaku-border); background: transparent; font-weight: 500; font-family: inherit; font-size: 0.92rem; letter-spacing: 0.08em; color: var(--kaku-text); transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); } @supports (border-width: 0.5px) { .btn { border-width: 0.5px; } } .btn:hover { border-color: var(--kaku-accent); color: var(--kaku-accent); } .btn--primary { background: var(--kaku-accent); border-color: var(--kaku-accent); color: #fff; } .btn--primary:hover { background: var(--kaku-accent-hover); border-color: var(--kaku-accent-hover); color: #fff; } /* ============================================================ 11. Footer ============================================================ */ .site-footer { margin-top: 96px; border-top: 1px solid var(--kaku-border); background: transparent; } @supports (border-width: 0.5px) { .site-footer { border-top-width: 0.5px; } } .site-footer__inner { max-width: var(--full-width); margin: 0 auto; padding: 56px 24px 28px; display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 720px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr auto; align-items: start; } } .footer-brand .footer-tagline { color: var(--kaku-text-sub); margin: 10px 0 0; font-size: 0.9rem; line-height: 1.8; } .footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; } .footer-nav a { color: var(--kaku-text-sub); font-size: 0.88rem; } .footer-nav a:hover { color: var(--kaku-text); } .footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--kaku-text-sub); background: transparent; border: 1px solid var(--kaku-border); transition: color .2s var(--ease), border-color .2s var(--ease); } @supports (border-width: 0.5px) { .footer-social a { border-width: 0.5px; } } .footer-social a:hover { color: var(--kaku-accent); border-color: var(--kaku-accent); } .site-footer__bottom { max-width: var(--full-width); margin: 0 auto; padding: 20px 24px 36px; border-top: 1px solid var(--kaku-border); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; color: var(--fg-faint); font-size: 0.78rem; font-family: var(--font-en); letter-spacing: 0.06em; } @supports (border-width: 0.5px) { .site-footer__bottom { border-top-width: 0.5px; } } /* ============================================================ 12. Error ============================================================ */ .error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 80px 24px; } .error-page__inner { max-width: 560px; padding: 0; text-align: center; } .error-page__code { font-family: var(--font-en); font-size: 4.5rem; font-weight: 400; letter-spacing: 0.04em; margin: 0; color: var(--kaku-text-sub); } .error-page__title { font-size: 1.2rem; margin: 12px 0 14px; font-weight: 600; } .error-page__lead { color: var(--kaku-text-sub); margin: 0 0 28px; line-height: 1.9; } .error-page__details { margin-top: 28px; text-align: left; color: var(--kaku-text-sub); } /* ============================================================ 13. Print ============================================================ */ @media print { .site-header, .site-footer, .subscribe, .post-nav, .related, .post-toc, .btn-icon { display: none !important; } body { background: #fff; color: #000; } .gh-content a { color: #000; text-decoration: underline; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .silk::before { display: none; } } /* ============================================================ Kaku Utility Classes — blog decoration components Use in articles via HTML card:
…
============================================================ */ /* Callout (注意/情報ボックス) */ .kaku-callout { border-left: 3px solid var(--accent-500); background: var(--accent-50); padding: 18px 22px; margin: 28px 0; border-radius: 4px; } .kaku-callout__title { font-weight: 700; margin: 0 0 8px 0; color: var(--ink-200); } .kaku-callout > :last-child { margin-bottom: 0; } .kaku-callout--success { border-color: var(--wa-success); background: var(--wa-success-bg); } .kaku-callout--warning { border-color: var(--wa-warning); background: var(--wa-warning-bg); } .kaku-callout--danger { border-color: var(--wa-danger); background: var(--wa-danger-bg); } .kaku-callout--info { border-color: var(--wa-info); background: var(--wa-info-bg); } /* Speech bubbles (吹き出し) */ .kaku-bubble { display: flex; gap: 14px; align-items: center; margin: 24px 0; } .kaku-bubble--right { flex-direction: row-reverse; } .kaku-bubble__body { flex: 0 1 auto; max-width: calc(100% - 80px); } @media (min-width: 720px) { .kaku-bubble__body { max-width: 78%; } } .kaku-bubble__avatar { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--bubble-avatar-left); display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 1px 3px rgba(54,47,71,0.08); } .kaku-bubble--right .kaku-bubble__avatar { background: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-700) 100%); color: var(--paper-0); box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 2px 6px rgba(54,47,71,0.15); } .kaku-bubble__body { padding: 10px 18px; border-radius: 16px; position: relative; background: var(--bubble-left); box-shadow: 0 1px 3px rgba(54,47,71,0.06), inset 0 1px 0 rgba(255,255,255,0.5); line-height: 1.7; } .kaku-bubble__body p { margin: 0; } .kaku-bubble--right .kaku-bubble__body { background: var(--bubble-right); } .kaku-bubble__body > :last-child { margin-bottom: 0; } .kaku-bubble__body::before { content: ''; position: absolute; top: 50%; margin-top: -8px; width: 0; height: 0; border: 8px solid transparent; } .kaku-bubble:not(.kaku-bubble--right) .kaku-bubble__body::before { left: -14px; border-right-color: var(--bubble-left); } .kaku-bubble--right .kaku-bubble__body::before { right: -14px; border-left-color: var(--bubble-right); } /* Product card (商品カード) */ .kaku-product { border: 1px solid var(--kaku-border); background: var(--paper-0); padding: 22px 24px; margin: 32px 0; border-radius: 6px; } .kaku-product__rank { font-size: 11px; letter-spacing: 0.1em; color: var(--accent-500); font-weight: 600; margin: 0 0 6px 0; text-transform: uppercase; } .kaku-product__title { font-size: 20px; font-weight: 700; margin: 0 0 10px 0; line-height: 1.4; } .kaku-product__desc { margin: 0 0 14px 0; color: var(--ink-200); line-height: 1.8; } .kaku-product__price { margin: 0 0 18px 0; font-weight: 700; font-size: 18px; } .kaku-product__buttons { display: flex; gap: 10px; flex-wrap: wrap; } .kaku-product__btn { display: inline-block; padding: 11px 20px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 14px; transition: transform .2s var(--ease), opacity .2s var(--ease); } .kaku-product__btn:hover { transform: translateY(-1px); opacity: 0.92; } .kaku-product__btn--amazon { background: #FF9900; color: #000; } .kaku-product__btn--rakuten { background: #BF0000; color: #fff; } .kaku-product__btn--yahoo { background: #FF0033; color: #fff; } /* CTA pill button */ .kaku-cta { text-align: center; margin: 36px 0; } .kaku-cta__btn { display: inline-block; background: linear-gradient(135deg, var(--accent-900) 0%, var(--accent-700) 100%); color: #FFFFFF !important; padding: 14px 40px; border-radius: 30px; text-decoration: none; font-weight: 700; letter-spacing: 0.05em; font-size: 15px; box-shadow: 0 2px 8px rgba(54,47,71,0.25), inset 0 1px 0 rgba(255,255,255,0.15); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .kaku-cta__btn:hover { transform: translateY(-1px); color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(54,47,71,0.35), inset 0 1px 0 rgba(255,255,255,0.2); } html[data-theme="dark"] .kaku-cta__btn { background: linear-gradient(135deg, #E8E1F0 0%, #C8BFD8 100%); color: #1A1A1E !important; box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.5); } html[data-theme="dark"] .kaku-cta__btn:hover { color: #1A1A1E !important; } /* Point box (番号付ボックス) */ .kaku-point { border-left: 3px solid var(--accent-500); background: var(--paper-100); padding: 20px 24px; margin: 28px 0; border-radius: 4px; } .kaku-point__title { font-weight: 700; margin: 0 0 10px 0; color: var(--ink-200); } .kaku-point > :last-child { margin-bottom: 0; } /* Summary (まとめボックス) */ .kaku-summary { background: linear-gradient(180deg, var(--paper-100) 0%, var(--paper-200) 100%); padding: 26px 28px; margin: 36px 0; border-radius: 8px; border: 1px solid var(--kaku-border); } .kaku-summary__title { font-weight: 700; font-size: 18px; margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 1px solid var(--kaku-border); } .kaku-summary > :last-child { margin-bottom: 0; } /* Comparison table wrapper */ .kaku-table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 14px; } .kaku-table th { background: var(--paper-100); padding: 12px; border: 1px solid var(--kaku-border); text-align: left; font-weight: 600; } .kaku-table td { padding: 12px; border: 1px solid var(--kaku-border); } .kaku-table td.is-center { text-align: center; }