/*
Theme Name: タナベ・ピクセル
Theme URI: https://tnb-llc.com/
Author: 合同会社タナベ
Author URI: https://tnb-llc.com/
Description: 合同会社タナベ専用のテーマ。ゲーム「ポケット領主」とそろえたドット絵の見た目。中身はきちんと、額縁で遊ぶ。
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tanabe-pixel
*/

/* 色・字・余白の決まりは theme.json。ここには部品の見た目だけを書く。
   ドット絵の倍率：スマホ1倍・広い画面2倍（きっちりした倍率だけ使う）。 */
:root { --tanabe-s: 1; }
@media (min-width: 720px) { :root { --tanabe-s: 2; } }

body { -webkit-text-size-adjust: 100%; }
:where(a):focus-visible { outline: 3px solid var(--wp--preset--color--sea); outline-offset: 3px; }
a { text-underline-offset: 3px; }

/* ---------- ボタン：押すと2ドット沈む ---------- */
.wp-element-button, .wp-block-button__link { transition: transform .06s, box-shadow .06s; }
.wp-block-button__link::before { content: "▶"; font-size: 12px; margin-right: 8px; }
.wp-element-button:active, .wp-block-button__link:active {
	transform: translateY(2px);
	box-shadow: 0 2px 0 var(--wp--preset--color--wood-dark) !important;
}
.wp-block-button.is-style-sub .wp-block-button__link {
	background: var(--wp--preset--color--paper-2);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-sub .wp-block-button__link:hover { background: var(--wp--preset--color--cream); }
.wp-block-button.is-style-blink .wp-block-button__link::before,
.tanabe-blink .wp-block-button__link::before { animation: tanabe-blink 1.4s steps(1) infinite; }
@keyframes tanabe-blink { 50% { opacity: 0; } }

/* ---------- メッセージ窓（RPG の会話の窓） ---------- */
.is-style-window, .is-style-window-dark {
	position: relative;
	background: var(--wp--preset--color--cream);
	border: 4px solid var(--wp--preset--color--wood-dark);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--cream), inset 0 0 0 5px var(--wp--preset--color--wood);
	padding: 20px 22px;
	clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px),
		calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px),
		0 calc(100% - 4px), 0 4px, 4px 4px);
}
.is-style-window-dark {
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--cream);
	border-color: #1d1208;
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--night), inset 0 0 0 5px var(--wp--preset--color--gold);
}
.is-style-window-dark a { color: var(--wp--preset--color--gold); }
.is-style-window > :first-child, .is-style-window-dark > :first-child { margin-top: 0; }
.is-style-window > :last-child, .is-style-window-dark > :last-child { margin-bottom: 0; }

/* ---------- 旗つき見出し ---------- */
.is-style-flag { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.is-style-flag::before {
	content: "";
	width: 12px; height: 16px; flex: none;
	background:
		linear-gradient(var(--wp--preset--color--red), var(--wp--preset--color--red)) 2px 0 / 10px 8px no-repeat,
		linear-gradient(var(--wp--preset--color--wood-dark), var(--wp--preset--color--wood-dark)) 0 0 / 2px 16px no-repeat;
}
.is-style-flag small, .tanabe-en {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px; color: var(--wp--preset--color--ink-2); letter-spacing: 0.1em;
}

/* ---------- 金のひし形の箇条書き ---------- */
.is-style-gem { padding-left: 1.3em; }
.is-style-gem li::marker { content: "◆ "; color: var(--wp--preset--color--gold); font-size: 12px; }

/* ---------- 札（ふだ） ---------- */
ul.is-style-badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
ul.is-style-badges li {
	font-family: var(--wp--preset--font-family--pixel); font-size: 14px;
	background: var(--wp--preset--color--cream);
	border: 2px solid var(--wp--preset--color--wood);
	box-shadow: 2px 2px 0 var(--wp--preset--color--gold);
	padding: 2px 10px;
}

/* ---------- ステータス表（会社概要） ---------- */
.wp-block-table.is-style-status { overflow-x: visible; }
.wp-block-table.is-style-status table { border-collapse: separate; border-spacing: 0 4px; width: 100%; }
.wp-block-table.is-style-status th, .wp-block-table.is-style-status td {
	border: 0; text-align: left; vertical-align: top; padding: 12px 16px; box-sizing: border-box;
}
.wp-block-table.is-style-status th, .wp-block-table.is-style-status td:first-child {
	width: 9em; font-weight: 400;
	font-family: var(--wp--preset--font-family--pixel);
	color: var(--wp--preset--color--ink-2);
	background: var(--wp--preset--color--paper-3);
}
.wp-block-table.is-style-status td { background: var(--wp--preset--color--cream); }
@media (max-width: 559px) {
	.wp-block-table.is-style-status table, .wp-block-table.is-style-status tbody,
	.wp-block-table.is-style-status tr, .wp-block-table.is-style-status th,
	.wp-block-table.is-style-status td { display: block; width: 100%; }
	.wp-block-table.is-style-status th, .wp-block-table.is-style-status td:first-child { padding: 6px 12px; width: 100%; }
	.wp-block-table.is-style-status td { padding: 10px 12px 14px; }
}

/* ---------- ドット絵の画像 ---------- */
.is-style-pixel img, img.tanabe-pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.is-style-phone img {
	border: 6px solid #1d1208; border-radius: 22px; background: #1d1208;
	box-shadow: 6px 6px 0 var(--wp--preset--color--paper-3);
}

/* ---------- ヘッダー ---------- */
.tanabe-header { border-bottom: 4px solid var(--wp--preset--color--night); }
.tanabe-header .wp-block-site-title a { color: var(--wp--preset--color--cream); text-decoration: none; }
.tanabe-header .tanabe-sub { color: var(--wp--preset--color--gold); font-size: 11px; letter-spacing: 0.2em; line-height: 1; margin: 2px 0 0; font-family: var(--wp--preset--font-family--pixel); }
.tanabe-logo img { width: 40px; height: 40px; image-rendering: pixelated; }
.tanabe-header .wp-block-navigation a { padding: 6px 10px; text-decoration: none; }
.tanabe-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.tanabe-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--night); color: var(--wp--preset--color--gold);
}
.tanabe-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--wood-dark); color: var(--wp--preset--color--cream);
	padding: 24px 16px;
}
.tanabe-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: 32px; }
.tanabe-header .is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; }
.tanabe-header .is-menu-open .wp-block-navigation-item { font-size: 20px; border-bottom: 1px dashed var(--wp--preset--color--wood); width: 100%; }
.tanabe-header .is-menu-open .wp-block-navigation__responsive-container-content,
.tanabe-header .is-menu-open .wp-block-navigation__container { justify-content: flex-start !important; }
.tanabe-header .is-menu-open .wp-block-navigation-item { justify-content: flex-start !important; align-items: stretch !important; text-align: left; }
.tanabe-header .is-menu-open .wp-block-navigation-item__content { width: 100%; box-sizing: border-box; }
.tanabe-header .is-menu-open .wp-block-navigation-item__content { display: block; padding: 14px 8px !important; }
.tanabe-header .is-menu-open .wp-block-navigation-item__content::before { content: "▶ "; font-size: 12px; color: var(--wp--preset--color--gold); }

/* ---------- いまどこ表示 ---------- */
.tanabe-crumb { font-size: 13px; color: var(--wp--preset--color--ink-2); gap: 6px; }
.tanabe-crumb a { color: var(--wp--preset--color--ink-2); }
.tanabe-crumb p, .tanabe-crumb .wp-block-post-title { font-size: 13px; font-family: var(--wp--preset--font-family--body); letter-spacing: 0; margin: 0; }

/* ---------- トップの絵（タナベ領） ---------- */
.tanabe-land {
	position: relative;
	height: calc(112px * var(--tanabe-s));
	background: url(assets/img/plain_summer_a.png) 0 0 / calc(128px * var(--tanabe-s)) calc(64px * var(--tanabe-s)) repeat;
	image-rendering: pixelated;
	border: 4px solid var(--wp--preset--color--wood-dark);
	overflow: hidden;
	display: flex; align-items: flex-end; justify-content: center;
	gap: calc(4px * var(--tanabe-s));
	padding-bottom: calc(6px * var(--tanabe-s));
}
.tanabe-land::after {
	content: ""; position: absolute; right: 0; top: 0; bottom: 0;
	width: calc(96px * var(--tanabe-s));
	background:
		url(assets/img/shore_w_summer_a.png) 0 0 / calc(192px * var(--tanabe-s)) calc(64px * var(--tanabe-s)) repeat-y,
		url(assets/img/sea_summer_a.png) calc(32px * var(--tanabe-s)) 0 / calc(192px * var(--tanabe-s)) calc(64px * var(--tanabe-s)) repeat;
	image-rendering: pixelated;
	z-index: 0;
}
.tanabe-land .port { margin-left: auto; margin-right: calc(16px * var(--tanabe-s)); }
@media (max-width: 719px) { .tanabe-land .hide-sp { display: none; } }
.tanabe-land + .is-style-window { margin-top: -12px !important; position: relative; z-index: 2; }

.tanabe-sprite {
	position: relative; z-index: 1; flex: none;
	width: calc(64px * var(--tanabe-s)); height: calc(96px * var(--tanabe-s));
	background-repeat: no-repeat;
	background-size: calc(192px * var(--tanabe-s)) calc(96px * var(--tanabe-s));
	image-rendering: pixelated;
	animation: tanabe-frames 1.2s steps(3) infinite;
}
@keyframes tanabe-frames { to { background-position-x: calc(-192px * var(--tanabe-s)); } }
.tanabe-sprite.guild { background-image: url(assets/img/guild_t2_summer.png); }
.tanabe-sprite.bank { background-image: url(assets/img/bank_t2_summer.png); }
.tanabe-sprite.workshop { background-image: url(assets/img/workshop_t2_summer.png); }
.tanabe-sprite.warehouse { background-image: url(assets/img/warehouse_t2_summer.png); }
.tanabe-sprite.fair { background-image: url(assets/img/fair_t2_summer.png); }
.tanabe-sprite.port { background-image: url(assets/img/port_w_t2_summer.png); }

.tanabe-typing::after { content: "▌"; color: var(--wp--preset--color--wood); animation: tanabe-blink 1s steps(1) infinite; }
.tanabe-typing.is-done::after { content: none; }

/* ---------- 建物カード ---------- */
.is-style-card {
	background: var(--wp--preset--color--cream);
	border: 3px solid var(--wp--preset--color--wood-dark);
	display: flex; flex-direction: column;
	height: 100%;
}
.is-style-card > * { margin-left: 20px !important; margin-right: 20px !important; }
.is-style-card > .tanabe-scene { margin: 0 !important; }
.is-style-card > :last-child { margin-bottom: 22px; }
.tanabe-scene {
	height: calc(80px * var(--tanabe-s));
	background: url(assets/img/plain_summer_a.png) 0 0 / calc(128px * var(--tanabe-s)) calc(64px * var(--tanabe-s)) repeat;
	image-rendering: pixelated;
	display: flex; align-items: flex-end; justify-content: center;
	border-bottom: 3px solid var(--wp--preset--color--wood-dark);
	padding-bottom: calc(2px * var(--tanabe-s));
	overflow: hidden;
}
.tanabe-scene .tanabe-sprite { margin-bottom: calc(-14px * var(--tanabe-s)); }
.tanabe-tag {
	align-self: flex-start;
	font-family: var(--wp--preset--font-family--pixel); font-size: 13px; letter-spacing: 0.1em;
	color: var(--wp--preset--color--cream); background: var(--wp--preset--color--wood);
	padding: 2px 10px; margin-top: 18px !important;
}
.is-style-card .tanabe-more { margin-top: auto !important; padding-top: 8px; font-size: 14px; }

/* 書庫（絵ができるまでの仮） */
.tanabe-shelf-mini {
	width: calc(56px * var(--tanabe-s)); height: calc(64px * var(--tanabe-s));
	background: #6b4420; border: calc(2px * var(--tanabe-s)) solid var(--wp--preset--color--night);
	display: grid; grid-template-rows: 1fr 1fr; padding: calc(3px * var(--tanabe-s)); gap: calc(3px * var(--tanabe-s));
	margin-bottom: calc(-6px * var(--tanabe-s));
}
.tanabe-shelf-mini i { display: flex; align-items: flex-end; gap: calc(1px * var(--tanabe-s)); border-bottom: calc(2px * var(--tanabe-s)) solid var(--wp--preset--color--night); }
.tanabe-shelf-mini b { display: block; width: calc(5px * var(--tanabe-s)); background: var(--c); height: var(--h); }

/* ---------- 本棚 ---------- */
.tanabe-bookcase {
	background: #6b4420;
	border: 4px solid var(--wp--preset--color--night);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--wood);
	padding: 16px 12px 0 !important;
	gap: 0 !important;
	grid-template-columns: repeat(6, 1fr) !important;
}
@media (max-width: 719px) { .tanabe-bookcase { grid-template-columns: repeat(3, 1fr) !important; } }
.tanabe-bookcase > .wp-block-image {
	margin: 0 0 16px !important;
	padding: 0 6px 10px;
	border-bottom: 12px solid var(--wp--preset--color--night);
}
.tanabe-bookcase .wp-block-image a { display: block; transition: transform .08s; }
.tanabe-bookcase .wp-block-image a:hover, .tanabe-bookcase .wp-block-image a:focus-visible { transform: translateY(-6px); }
.tanabe-bookcase .wp-block-image img {
	display: block; width: 100%; height: auto; aspect-ratio: 282 / 450;
	border: 2px solid #1d1208; box-shadow: 4px 4px 0 rgba(0,0,0,.3);
}
.tanabe-bookcase .wp-element-caption {
	color: var(--wp--preset--color--cream); font-size: 13px; line-height: 1.4;
	margin: 8px 0 0; min-height: 2.8em; text-align: left;
}

/* ---------- 家令のひと言 ---------- */
.tanabe-steward > .wp-block-image { flex: none; margin: 0; }
.tanabe-steward > .wp-block-image img {
	width: calc(64px * var(--tanabe-s)); height: calc(64px * var(--tanabe-s));
	background: var(--wp--preset--color--paper-2); border: 2px solid var(--wp--preset--color--wood);
	image-rendering: pixelated;
}
.tanabe-who { font-size: 13px !important; color: var(--wp--preset--color--wood); margin: 0 !important; }

/* ---------- お知らせの一覧 ---------- */
.tanabe-news .wp-block-post-template > li { border-bottom: 2px dashed #c9b48a; padding: 12px 0; margin: 0; }
.tanabe-news .wp-block-post-template > li:last-child { border-bottom: 0; }
.tanabe-news .wp-block-post-title { font-family: var(--wp--preset--font-family--body); font-size: 16px; letter-spacing: 0.02em; margin: 0; }
.tanabe-news .wp-block-post-title a { color: var(--wp--preset--color--ink); }

/* ---------- 帯 ---------- */
.tanabe-band { border-top: 3px solid var(--wp--preset--color--paper-3); border-bottom: 3px solid var(--wp--preset--color--paper-3); }

/* ---------- フッター ---------- */
.tanabe-grass {
	height: 32px;
	background: url(assets/img/plain_summer_a.png) 0 0 / 128px 64px repeat-x;
	image-rendering: pixelated;
	border-top: 4px solid var(--wp--preset--color--wood-dark);
	margin: 0 !important;
}
.tanabe-footer a { color: var(--wp--preset--color--cream); }
.tanabe-footer .wp-block-navigation { font-family: var(--wp--preset--font-family--body); font-size: 14px; }
.tanabe-footer .wp-block-site-title a { color: var(--wp--preset--color--cream); text-decoration: none; }

/* ---------- ページが見つからないとき ---------- */
.tanabe-fog {
	height: 120px;
	background:
		radial-gradient(circle at 20% 60%, rgba(255,255,255,.9) 0 18px, transparent 19px),
		radial-gradient(circle at 45% 40%, rgba(255,255,255,.85) 0 26px, transparent 27px),
		radial-gradient(circle at 75% 65%, rgba(255,255,255,.9) 0 22px, transparent 23px),
		url(assets/img/plain_summer_a.png) 0 0 / 128px 64px repeat;
	image-rendering: pixelated;
	border: 4px solid var(--wp--preset--color--wood-dark);
	filter: saturate(.6);
}

/* 動きを減らす設定の人には止める */
@media (prefers-reduced-motion: reduce) {
	.tanabe-sprite, .tanabe-typing::after,
	.wp-block-button.is-style-blink .wp-block-button__link::before,
	.tanabe-blink .wp-block-button__link::before { animation: none !important; }
	.wp-element-button, .wp-block-button__link, .tanabe-bookcase .wp-block-image a { transition: none; }
}

/* =========================================================
   カスタムHTML で貼るページ用（0-2_ホームページ/貼りつけ用HTML/）
   テンプレート「カスタムHTML用（全幅・タイトルなし）」と、トップページで使う
   ========================================================= */
.tnb-page { --tnb-gap: clamp(32px, 4vw, 48px); }
.tnb-wrap { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.tnb-narrow { max-width: 792px; }
.tnb-section { padding-top: var(--tnb-gap); padding-bottom: var(--tnb-gap); }
.tnb-section + .tnb-section:not(.tnb-band) { padding-top: 0; }
.tnb-band { background: var(--wp--preset--color--paper-2); border-top: 3px solid var(--wp--preset--color--paper-3); border-bottom: 3px solid var(--wp--preset--color--paper-3); }
.tnb-page h1, .tnb-page h2, .tnb-page h3 { margin: 0 0 16px; }
.tnb-page h2.is-style-flag { margin-bottom: 24px; }
.tnb-page h3 { margin-top: 28px; }
.tnb-page p { margin: 0 0 1em; }
.tnb-page ul, .tnb-page ol { margin: 0 0 1em; }
.tnb-page .is-style-window > :last-child, .tnb-page .is-style-card > :last-child { margin-bottom: 0; }

/* 見出しまわり */
.tnb-head { padding-top: 16px; }
.tnb-crumb { font-size: 13px; color: var(--wp--preset--color--ink-2); margin: 0 0 24px !important; }
.tnb-crumb a { color: var(--wp--preset--color--ink-2); }
.tnb-small { font-size: 14px; color: var(--wp--preset--color--ink-2); }
.tnb-label { font-family: var(--wp--preset--font-family--pixel); font-size: 14px; color: var(--wp--preset--color--wood); margin: 0 0 4px !important; }

/* 並べ方 */
.tnb-cols { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.tnb-cols.two { grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 879px) { .tnb-cols { grid-template-columns: 1fr; } .tnb-cols.two { grid-template-columns: 1fr; } }
.tnb-feature { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: center; }
@media (max-width: 719px) { .tnb-feature { grid-template-columns: 1fr; } .tnb-feature .tnb-phone { max-width: 220px; margin: 0 auto; } }
.tnb-phone img, img.tnb-phone {
	display: block; width: 100%; height: auto;
	border: 6px solid #1d1208; border-radius: 22px; background: #1d1208;
	box-shadow: 6px 6px 0 var(--wp--preset--color--paper-3);
}
.tnb-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 8px 0 24px; }
@media (max-width: 559px) { .tnb-shots { grid-template-columns: repeat(3, 1fr); gap: 8px; } .tnb-shots img { border-width: 3px; border-radius: 10px; } }

/* ボタン */
.tnb-btns { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 20px; }
.tnb-btns .wp-element-button { display: inline-block; text-decoration: none; }
.tnb-btns .wp-element-button::before { content: "▶"; font-size: 12px; margin-right: 8px; }
.tnb-btns .tnb-sub { background: var(--wp--preset--color--paper-2); color: var(--wp--preset--color--ink); }
.tnb-btns .tnb-sub:hover { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink); }
.tnb-btns .tnb-off { background: #e3d6b6; color: #8c7a5e; border-color: #c9b48a; box-shadow: 0 4px 0 #c9b48a; pointer-events: none; }
.tnb-btns .tanabe-blink::before { animation: tanabe-blink 1.4s steps(1) infinite; }

/* カード（HTML 版） */
.tnb-page .is-style-card > .tanabe-tag { margin-top: 18px !important; }
.tnb-page .is-style-card h3 { margin: 10px 20px 6px !important; }
.tnb-page .is-style-card .tanabe-more { margin-bottom: 22px !important; }

/* 家令のひと言（HTML 版） */
.tnb-page .tanabe-steward { display: flex; gap: 16px; align-items: flex-start; }
.tnb-page .tanabe-steward > img {
	flex: none; width: calc(64px * var(--tanabe-s)); height: calc(64px * var(--tanabe-s));
	background: var(--wp--preset--color--paper-2); border: 2px solid var(--wp--preset--color--wood);
	image-rendering: pixelated;
}
.tnb-page .tanabe-steward p { margin: 0; }

/* 本棚（HTML 版） */
.tnb-page .tanabe-bookcase { display: grid; }
.tnb-page .tanabe-bookcase > figure { margin: 0 0 16px; padding: 0 6px 10px; border-bottom: 12px solid var(--wp--preset--color--night); }

/* お知らせ（[tanabe_news]） */
.tnb-news { list-style: none; margin: 0 !important; padding: 0; }
.tnb-news li { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0; border-bottom: 2px dashed #c9b48a; }
.tnb-news li:last-child { border-bottom: 0; }
.tnb-news time { font-family: var(--wp--preset--font-family--pixel); font-size: 14px; color: var(--wp--preset--color--wood); }
.tnb-news a { color: var(--wp--preset--color--ink); }

/* 文書のページ（プライバシーポリシー・サポート） */
.tnb-doc h2 { font-size: var(--wp--preset--font-size--large); margin-top: 40px; padding-bottom: 6px; border-bottom: 3px solid var(--wp--preset--color--paper-3); }
.tnb-doc h3 { font-size: 17px; margin-top: 28px; }
.tnb-doc ul, .tnb-doc ol { padding-left: 1.4em; }
.tnb-doc a { overflow-wrap: anywhere; }
.tnb-faq h3.tnb-q::before { content: "？"; display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center; margin-right: 8px;
	background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-size: 14px; box-shadow: 0 0 0 2px var(--wp--preset--color--wood-dark); }

@media (prefers-reduced-motion: reduce) {
	.tnb-btns .tanabe-blink::before { animation: none !important; }
}