@charset "UTF-8";
/*
Theme Name: SWELL CHILD (椎葉千)
Template: swell
Version: 0.1.0
Description: 椎葉千（shiba-1000.com）の SWELL 子テーマ。デザインの決めごとは docs/DESIGN.md。
*/

/* =================================================
 * 0. トークン（docs/DESIGN.md「千のマス」）
 * ================================================= */
:root {
	--sb-bg:      #F2F3F0;  /* 方眼の紙 */
	--sb-surface: #FFFFFF;
	--sb-ink:     #191B20;  /* 墨 */
	--sb-muted:   #646A73;
	--sb-line:    #D5D9D4;  /* 方眼の線 */
	--sb-accent:  #C8372D;  /* 朱。「千」とホバーだけ */
	--sb-disp: 'DotGothic16', 'Zen Kaku Gothic New', sans-serif;
	--sb-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
	--sb-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--sb-ease: cubic-bezier(.7, 0, .2, 1);
	--sb-fast: .3s; --sb-base: .9s; --sb-slow: 1.6s;
}

/* =================================================
 * 1. 全体
 * ================================================= */
body {
	font-family: var(--sb-body);
	font-feature-settings: 'palt';
	letter-spacing: 0.02em;
	background: var(--sb-bg);
	color: var(--sb-ink);
	line-height: 1.8;
}
html, body { overflow-x: clip; }
:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 3px; }

/* 見出しはドット書体。本文の見出しは h2 だけドット、h3 以下は本文書体の太字 */
.c-pageTitle, .c-postTitle__ttl, .c-secTitle, .post_content h2, .sb-h2 {
	font-family: var(--sb-disp);
	font-weight: 400;
	letter-spacing: .02em;
}
.c-postTitle__ttl { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.5; }
.post_content h2 {
	background: none !important; color: var(--sb-ink) !important; padding: 0 0 .3em !important;
	border-bottom: 1px solid var(--sb-line); font-size: 1.45em;
}
.post_content h2::before {
	content: ""; display: inline-block; width: .42em; height: .42em; background: var(--sb-accent);
	margin-right: .4em; vertical-align: .12em; position: static; border: 0;
}
.post_content h2::after { display: none; }
.post_content h3 { border: 0 !important; padding: 0 !important; font-weight: 700; }
.post_content h3::before, .post_content h3::after { display: none !important; }

/* =================================================
 * 2. ヘッダー：ロゴは名前（ドット）＋ドメイン（等幅）
 * ================================================= */
.l-header, .l-fixHeader { background: var(--sb-bg); }
.c-headLogo__link { font-family: var(--sb-disp); font-size: 22px; letter-spacing: .04em; color: var(--sb-ink); }
.c-headLogo__link::after {
	content: "shiba-1000"; font-family: var(--sb-mono); font-size: 11px; color: var(--sb-muted);
	letter-spacing: .06em; margin-left: 10px;
}
.c-gnav > .menu-item > a { font-weight: 700; font-size: 14px; }
.c-gnav > .menu-item > a .ttl { position: relative; }
.c-gnav > .menu-item > a::after { background: var(--sb-accent) !important; height: 2px !important; }
.l-fixHeader { border-bottom: 1px solid var(--sb-line); box-shadow: none !important; }
.c-iconBtn__label { font-weight: 700; }
/* トップの透過ヘッダーは紙色の上にあるので、黒文字のまま */
.-transparent .c-headLogo__link, .-transparent .c-gnav > .menu-item > a { color: var(--sb-ink) !important; }

/* =================================================
 * 3. フッター：名前・ナビ・©の1行
 * ================================================= */
.l-footer { border-top: 1px solid var(--sb-line); background: var(--sb-bg); }
.l-footer__nav a { font-size: 13px; }
.copyright { font-family: var(--sb-mono); font-size: 12px; color: var(--sb-muted); }

/* =================================================
 * 4. 感想の記事
 * ================================================= */
.p-articleMetas .c-categoryList__link { background: transparent; color: var(--sb-ink); border: 1px solid var(--sb-line); border-radius: 3px; }
.post_content a { text-decoration-color: var(--sb-accent); text-underline-offset: 3px; }

/* =================================================
 * 5. 作品ページ・一覧ページの部品（build-wp が出す HTML）
 * ================================================= */
.sb-lead { font-size: 1.05em; color: var(--sb-ink); }
.sb-specs { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 0 0 1.6em; font-size: 14px; }
.sb-specs dt { color: var(--sb-muted); }
.sb-specs dd { margin: 0; }
.sb-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 2em; }
.sb-btn {
	display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; font-weight: 700; font-size: 15px;
	padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--sb-ink); color: var(--sb-ink) !important;
	position: relative; overflow: hidden; isolation: isolate; transition: color var(--sb-fast) var(--sb-ease), border-color var(--sb-fast);
}
.sb-btn.-main { background: var(--sb-ink); color: var(--sb-bg) !important; }
.sb-btn::before { content: ""; position: absolute; inset: 0; background: var(--sb-accent); transform: translateY(101%); transition: transform var(--sb-fast) var(--sb-ease); z-index: -1; }
@media (hover: hover) { .sb-btn:hover::before { transform: none; } .sb-btn:hover { color: #fff !important; border-color: var(--sb-accent); } }
.sb-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.sb-btn .arr { font-family: var(--sb-mono); font-size: 13px; }
/* 作品の絵の枠（トップの『作ったもの』と作品ページで共通） */
.sb-work-vis { position: relative; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: var(--tone); display: block; }
.sb-work-vis img.key { width: 100%; height: 100%; object-fit: cover; }
.sb-work-vis[data-w="cat"] img.key { object-fit: contain; height: 120%; margin-top: -6%; }
.sb-work-vis[data-w="cat"] img.neko { position: absolute; width: 28%; left: 50%; top: 40%; transform: translate(-50%, -50%); }
.sb-work-vis img.logo { position: absolute; left: 5%; bottom: 6%; width: min(42%, 260px); height: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); }
.sb-hero { margin: 0 0 1.6em; }

.sb-rv-list { list-style: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--sb-line); }
.sb-rv-list li { list-style: none; margin: 0 !important; padding: 0 !important; }
.sb-rv-list li::before { display: none !important; }
.sb-rv { display: grid; grid-template-columns: 7.5em 4em minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--sb-line); }
.sb-rv time { font-family: var(--sb-mono); font-size: 13px; color: var(--sb-muted); }
.sb-rv .cat { font-size: 12px; font-weight: 700; border: 1px solid var(--sb-line); border-radius: 3px; padding: 0 8px; justify-self: start; }
.sb-rv a { text-decoration: none !important; font-weight: 700; line-height: 1.6; color: var(--sb-ink) !important; }
@media (hover: hover) { .sb-rv a:hover { text-decoration: underline !important; text-decoration-color: var(--sb-accent) !important; text-underline-offset: 4px; } }
@media (max-width: 760px) { .sb-rv { grid-template-columns: auto auto; gap: 4px 10px; } .sb-rv a { grid-column: 1 / -1; } }

[data-placeholder] { text-decoration: underline dotted; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}