/* ==========================================================================
   ただいままで釣り — 共通スタイル
   色・文字サイズ・余白のプリセットは theme.json 側。ここは組み立てだけ。
   モバイルファースト。PC は中央 720px、背景色は同じ。
   ========================================================================== */

:root {
	--tt-stripe-a: var(--wp--custom--stripe--a, #FBF6E6);
	--tt-stripe-b: var(--wp--custom--stripe--b, #F6EFD9);
	--tt-radius-card: var(--wp--custom--radius--card, 18px);
	--tt-radius-card-lg: var(--wp--custom--radius--card-large, 22px);
	--tt-radius-thumb: var(--wp--custom--radius--thumb, 12px);
	--tt-pill: var(--wp--custom--radius--pill, 999px);
	--tt-tap: var(--wp--custom--tap, 44px);

	/* ヘッダータイトル（.tt-brand）の拡大率。スマホ・タブレットは等倍、
	   1024px以上だけ下の「PC（1024px以上）」のメディアクエリで 2 にする。
	   ここを変えるだけでタイトル全体の大きさが一括で変わる。 */
	--tt-brand-scale: 1;

	/* 補助文字 #4F6B6F は、色付きカードの上だと 4.5:1 を割る（#CFE8E9 上で 4.38）。
	   カード上でだけ使う、少し濃い補助文字。 */
	--tt-ink-soft-on-card: #41595D;
	/* コーラル #C94B35 はコーラル淡 #FBE3DC の上で 3.77。チップ用に濃くしたもの。 */
	--tt-coral-on-pale: #A8402B;

	/* カテゴリナビ（core/navigation）のアイコン。mask-image で使うので
	   中の stroke/fill の色は何でもよい（形だけを使う）。実際の色は
	   各コンテキストの background-color で付ける。 */
	--tt-icon-svg-bag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%228.3%22%20width%3D%2218.8%22%20height%3D%2210.6%22%20rx%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M9%208.3V7a1.6%201.6%200%200%201%201.6-1.6h2.8A1.6%201.6%200%200%201%2015%207v1.3%22%2F%3E%3Cpath%20d%3D%22M2.6%2013.2h18.8%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-fish: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.8%2012c2.9-3.9%207.7-5.3%2011.1-4.1%201.8.7%203%202.1%203.6%204.1-.6%202-1.8%203.4-3.6%204.1C10.5%2017.3%205.7%2015.9%202.8%2012Z%22%2F%3E%3Cpath%20d%3D%22m17.5%209.4%203.7-2.5v10.2l-3.7-2.5%22%2F%3E%3Ccircle%20cx%3D%227.3%22%20cy%3D%2211.1%22%20r%3D%221%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-cup: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.4%207.6h11.2v5.6a5.6%205.6%200%200%201-5.6%205.6h0a5.6%205.6%200%200%201-5.6-5.6V7.6Z%22%2F%3E%3Cpath%20d%3D%22M15.6%209.4h1.9a2.3%202.3%200%200%201%200%204.6h-1.9%22%2F%3E%3Cpath%20d%3D%22M3%2021h14%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-house: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%204.2l8.8%206.4%22%2F%3E%3Cpath%20d%3D%22M5.4%209.9v9.1a.9.9%200%200%200%20.9.9h11.4a.9.9%200%200%200%20.9-.9V9.9%22%2F%3E%3Cpath%20d%3D%22M9.9%2019.9V14h4.2v5.9%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-camera: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.8%22%20y%3D%227%22%20width%3D%2218.4%22%20height%3D%2213%22%20rx%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M8.3%207%209.7%204.6h4.6L15.7%207%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213.6%22%20r%3D%223.6%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-map: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%204.2%203.2%206.1v13.7l5.8-1.9%206%201.9%205.8-1.9V4.2l-5.8%201.9-6-1.9Z%22%2F%3E%3Cpath%20d%3D%22M9%204.2v13.7%22%2F%3E%3Cpath%20d%3D%22M15%206.1v13.7%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-book: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%206.4c-1.9-1.5-4.4-2.2-7.4-2.2v14c3%200%205.5.7%207.4%202.2%201.9-1.5%204.4-2.2%207.4-2.2v-14c-3%200-5.5.7-7.4%202.2Z%22%2F%3E%3Cpath%20d%3D%22M12%206.4v13.7%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-tool: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.2%205.3a3.6%203.6%200%200%201-4.9%204.9l-6.5%206.5a1.8%201.8%200%200%200%202.5%202.5l6.5-6.5a3.6%203.6%200%200%201%204.9-4.9l-2.6%202.6-2-2z%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-dish: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226.4%22%20y%3D%222.6%22%20width%3D%2211.2%22%20height%3D%2218.8%22%20rx%3D%222.4%22%2F%3E%3Cpath%20d%3D%22M10.4%2018.3h3.2%22%2F%3E%3C%2Fsvg%3E");
	--tt-icon-svg-tag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.4%2012.6V5.4a2%202%200%200%201%202-2h7.2a2%202%200%200%201%201.4.6l7%207a2%202%200%200%201%200%202.8l-7.2%207.2a2%202%200%200%201-2.8%200l-7-7a2%202%200%200%201-.6-1.4Z%22%2F%3E%3Ccircle%20cx%3D%228.4%22%20cy%3D%228.4%22%20r%3D%221.3%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
}

/* 独自マークアップは枠線込みで寸法を数える（min-height と padding を併用するため） */
*, *::before, *::after { box-sizing: border-box; }

/* 横スクロールは使わない（必須要件）。ヘッダーのカテゴリナビの子メニューは
   閉じていても position:absolute で画面外に伸びることがあり、それだけで
   横スクロールが可能になってしまうための保険。縦方向は視覚的に影響しない
   （html の高さは中身に合わせて伸びるだけで、auto による見た目のクリップは
   発生しない）。 */
html { overflow-x: clip; }

/* テンプレートパーツ間・独自レイアウト内の blockGap を打ち消す。
   間隔はこのファイルで明示的に決める。 */
.wp-site-blocks > * { margin-block-start: 0; }
.tt-header__bar > *,
.tt-header__tools > *,
.tt-jcard > *,
.tt-jcard__body > *,
.tt-footer__copy > * { margin-block-start: 0; }

/* 目次から見出しへのジャンプはなめらかに。見出しが画面上端に貼りつかないよう余白を取る。 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
.tt-article__content h2 { scroll-margin-top: 20px; }

/* 画像は必ず枠内に収める */
img { max-width: 100%; height: auto; }

/* フォーカスリングは常に見えるようにする（キーボード操作の要件） */
:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--water-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* アイコンのみのボタン・リンクは最低 44px のタップ領域を確保する */
.tt-tap {
	min-width: var(--tt-tap);
	min-height: var(--tt-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */

.tt-header {
	/* 上下の余白も --tt-brand-scale に合わせて拡大する（PCでタイトルを
	   2倍にしたとき、上下の余白だけ据え置きだと詰まって見えるため）。
	   スマホ・タブレット（scale:1）では 14px のまま、ピクセル差分なし。 */
	padding-block: calc(14px * var(--tt-brand-scale)) 0;
}

.tt-header__bar > * { margin-block: 0; }

.tt-header__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0;
}

.tt-header__brand > * { margin-block: 0; }

/* サイトタイトル（案3：丸いアイコン＋2行）。
   core/site-title は使わず、タップしやすいよう1つのリンクにまとめている。
   設定画面でサイトのタイトルを変えても、ここには反映されない（仕様）。
   変更した場合はこの <a> の中のテキストを直接書き換える。

   --tt-brand-scale は :root で既定 1、1024px以上だけ 2 にする
   （下の「PC（1024px以上）」のメディアクエリ参照）。アイコン・文字サイズ・
   アイコンと文字の間隔は、すべてこの1つの変数の calc() 倍率で決まる。 */
.tt-brand {
	display: flex;
	align-items: center;
	gap: calc(4px * var(--tt-brand-scale));
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.tt-brand__icon {
	flex: 0 0 auto;
	width: calc(38px * var(--tt-brand-scale));
	height: calc(38px * var(--tt-brand-scale));
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--coral);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tt-brand__icon svg {
	width: calc(22px * var(--tt-brand-scale));
	height: calc(22px * var(--tt-brand-scale));
}

/* 右側のテキスト部分。display:block の子を2つ積む（inline-block の余白対策は
   .tt-brand 自体を flex にして吸収しているので、ここでは不要）。 */
.tt-brand__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tt-brand__line1 {
	font-family: var(--wp--preset--font-family--base);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
.tt-brand__main {
	font-size: calc(17px * var(--tt-brand-scale));
	/* コーラル本来の色 #C94B35 はヘッダー背景 #F6F4EC 上で 4.20:1 と
	   通常文字の基準4.5:1をわずかに割るため、既存の濃色バリアント
	   --tt-coral-on-pale を使う（5.55:1）。アイコン・線画のコーラルは変更しない。 */
	color: var(--tt-coral-on-pale);
}
.tt-brand__sub {
	font-size: calc(13px * var(--tt-brand-scale));
	color: var(--wp--preset--color--water-deep);
}

.tt-brand__en {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: calc(10px * var(--tt-brand-scale));
	line-height: 1.3;
	/* 0.2em は font-size に対する相対値なので、scale をかけなくても
	   文字が大きくなれば字間も自動的に比例して広がる（要求どおり）。 */
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--water-deep);
}

.tt-header__tools {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
}

/* 検索：アイコンだけのボタンに見せる */
.tt-header__tools .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0;
	min-width: var(--tt-tap);
	min-height: var(--tt-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.tt-header__tools .wp-block-search__button svg { width: 26px; height: 26px; fill: currentColor; }
.tt-header__tools .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--tt-pill);
	padding: 8px 14px;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--surface);
}

/* ハンバーガー：コアの Navigation のオーバーレイを使う */
.tt-header__tools .wp-block-navigation__responsive-container-open,
.tt-header__tools .wp-block-navigation__responsive-container-close {
	min-width: var(--tt-tap);
	min-height: var(--tt-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
}
.tt-header__tools .wp-block-navigation__responsive-container-open svg,
.tt-header__tools .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* オーバーレイの中身 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	padding: 24px 16px 48px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--tt-tap);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--divider);
	width: 100%;
}

/* --------------------------------------------------------------------------
   カテゴリナビ（core/navigation、1つのメニューを3箇所で使う。Phase 8-1〜8-3）

   ①ヘッダー下のアイコン列（.tt-nav--header）
   ②トップ Route のカード（.tt-nav--route）
   ③サイドバーの縦リスト（.tt-nav--side）

   どのコンテキストも同じ考え方：
   - 「アイコンの形」と「背景・アイコン色」は、項目ごとに1つだけ選ぶ
     ブロックスタイル is-style-tt-xxx（`styles/blocks/*.json` で登録。
     エディタの「スタイル」タブにボタンとして並び、画面から選べる。
     Phase 8-2 調査の方式A）。選ばなければ既定のタグ型アイコン／水色(淡)。
   - li と、子を持つ項目の <ul class="wp-block-navigation__submenu-container">
     の両方に同じクラスが付く（Phase 8-0 で確認済み）。子項目にアイコンが
     二重に出ないよう、アイコンのセレクタは必ず
     `li.wp-block-navigation-item.is-style-tt-xxx > .wp-block-navigation-item__content::before`
     のように「li の直接の子である .content」だけに絞る（ul 経由では効かない）。
   -------------------------------------------------------------------------- */

/* ① ヘッダー下のアイコン列 ------------------------------------------------- */

.tt-nav--header {
	padding-block: 15px 16px;
}
.tt-nav--header .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 10px 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* 1行に5個までは均等割り（4個の現状デザインもこれで実現）。
   6個以上は折り返し、折り返した行の中で均等割りにする
   （横スクロールは使わない。58px を切ると文字が詰まるのでこれ以上縮めない）。 */
.tt-nav--header .wp-block-navigation-item {
	/* core は li に position:relative を付け、その li を基準にドロップダウンを
	   出す。項目が画面端にあると、閉じていても絶対配置の子メニューが画面外に
	   伸びて横スクロールの原因になるため、ここでは static にして、
	   ナビ全体（.tt-nav--header）を基準に中央寄せで出す（下の submenu-container
	   のルールとセット）。 */
	position: static;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 58px;
	max-width: 110px;
}
.tt-nav--header .wp-block-navigation-item__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: var(--tt-tap);
	padding: 0 2px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	border-radius: var(--tt-radius-thumb);
}
.tt-nav--header .wp-block-navigation-item__content::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	background-color: var(--wp--preset--color--water-accent);
	mask-image: var(--tt-icon-svg-tag);
	-webkit-mask-image: var(--tt-icon-svg-tag);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
}
.tt-nav--header .wp-block-navigation-item__label {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-align: center;
}
/* ヘッダーでは説明文・子メニューの開閉アイコンは出さない（現状どおりの見た目） */
.tt-nav--header .wp-block-navigation-item__description { display: none; }

/* 子（サブカテゴリ）はヘッダーでは下に開くドロップダウン。
   core の既定の開閉（hover/click・キーボード）をそのまま使う（Phase 8-0 で確認済み）。
   見た目だけ、このサイトのトーンに合わせる。 */
.tt-nav--header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--surface);
	border-radius: var(--tt-radius-thumb);
	box-shadow: 0 8px 18px rgba(46, 100, 104, .14);
	padding: 6px;
	min-width: 160px;
	max-width: calc(100vw - 32px);
}
/* 位置：どの項目でクリックしても、ナビ全体の中央に出す（画面端の項目でも
   はみ出さないように）。core の既定（left:-1px; top:100%、li 基準）より
   詳しいセレクタにして確実に上書きする。 */
.tt-nav--header.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
}
.tt-nav--header .wp-block-navigation__submenu-container .wp-block-navigation-item {
	/* .tt-nav--header .wp-block-navigation-item の flex-basis:58px は横並びの
	   アイコン列用。子メニュー（縦並び）ではそのまま「高さ」として効いてしまう
	   ため、ここで打ち消す。 */
	flex-grow: 0;
	flex-basis: auto;
}
/* core は .content 自体にも flex-grow:1 を付ける（詳しいセレクタで）ため、
   縦積みのドロップダウンで項目間に不自然な余白ができる。ここでは詰めて並べる。
   core と同じかそれ以上の詳しさのセレクタにして確実に勝つようにする。 */
.tt-nav--header.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	flex-grow: 0;
}
.tt-nav--header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	flex-direction: row;
	justify-content: flex-start;
	padding: 8px 10px;
	min-height: var(--tt-tap);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}
.tt-nav--header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
	content: none;
}

/* ② トップ Route のカード --------------------------------------------------- */

.tt-nav--route .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	/* core の is-layout-flex が align-items:center を付け、1列（〜1023px）の
	   ときカードが中身の幅に縮んで中央寄せになってしまうため、stretch で
	   打ち消す（サイドバーと同じ原因・同じ直し方）。1024px以上は下の
	   メディアクエリで display:grid に替わり、grid の既定は元々 stretch
	   なのでここでは影響しない。 */
	align-items: stretch;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tt-nav--route li.wp-block-navigation-item {
	/* li 自身も core の既定で display:flex（横並び）になっているため、
	   幅いっぱいにしないと .content がラベルの文字数ぶんにしか広がらない。 */
	width: 100%;
	position: relative;
	border-radius: var(--tt-radius-card);
	background-color: var(--wp--preset--color--water-pale);
}
.tt-nav--route .wp-block-navigation-item__content {
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-items: center;
	width: 100%;
	min-height: 80px;
	padding: 12px 16px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.tt-nav--route .wp-block-navigation-item__content::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / 3;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface);
}
.tt-nav--route .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 28px; /* 16(padding) + (48-24)/2 = 丸バッジの中心に揃える */
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--water-accent);
	mask-image: var(--tt-icon-svg-tag);
	-webkit-mask-image: var(--tt-icon-svg-tag);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
}
.tt-nav--route .wp-block-navigation-item__label {
	grid-column: 2;
	grid-row: 1;
	display: block;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
}
/* core は既定で display:none。ここだけ2行目として表示する（Phase 8-0 で確認済み） */
.tt-nav--route .wp-block-navigation-item__description {
	display: block;
	grid-column: 2;
	grid-row: 2;
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--tt-ink-soft-on-card);
}
/* Route では子カテゴリは見せない（トップ階層のカードだけ） */
.tt-nav--route .wp-block-navigation__submenu-container,
.tt-nav--route .wp-block-navigation-item .wp-block-navigation-submenu__toggle {
	display: none;
}
/* カード全体をタップ・クリックできるようにする */
.tt-nav--route .wp-block-navigation-item__content::after,
.tt-nav--route .wp-block-navigation-item__content { cursor: pointer; }

/* ③ サイドバーの縦リスト ---------------------------------------------------- */

.tt-nav--side .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	/* core の is-layout-flex が align-items:center を付け、行がラベルの幅に
	   縮んで中央寄せになってしまうため、stretch で打ち消す。 */
	align-items: stretch;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tt-nav--side li.wp-block-navigation-item {
	/* li 自身も core の既定で display:flex（1個しかない子＝.content を
	   詰めて並べる横並び）になっているため、幅いっぱいにしないと
	   .content がラベルの文字数ぶんにしか広がらない。 */
	width: 100%;
	border-radius: var(--tt-radius-card);
	background-color: var(--wp--preset--color--water-pale);
}
.tt-nav--side .wp-block-navigation-item__content {
	position: relative;
	display: grid;
	grid-template-columns: 34px 1fr;
	column-gap: 10px;
	align-items: center;
	width: 100%;
	min-height: var(--tt-tap);
	padding: 8px 14px 8px 10px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink);
}
.tt-nav--side .wp-block-navigation-item__content::before {
	content: "";
	grid-column: 1;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface);
}
.tt-nav--side .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 17px; /* 10(padding-left) + (34-20)/2 */
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--water-accent);
	mask-image: var(--tt-icon-svg-tag);
	-webkit-mask-image: var(--tt-icon-svg-tag);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	mask-size: contain;
	-webkit-mask-size: contain;
}
/* サイドバーでは説明文は出さない（件数と同じく、ここは出さない仕様） */
.tt-nav--side .wp-block-navigation-item__description { display: none; }

/* 子カテゴリ：常に展開・インデント（submenuVisibility "always"。core 側の
   開閉CSSだけで動くので、ここでは見た目（余白・文字サイズ）だけ合わせる。
   子にはアイコンの丸バッジを付けず、文字だけにする）。 */
.tt-nav--side .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	list-style: none;
	margin: 4px 0 0 44px;
	padding: 0;
}
/* core の open-always 用CSS（.has-child.open-always .submenu-container に
   左右2em のpaddingを付ける）のほうが詳細度が高く、そのままだと子の行が
   左右24pxずつ内側に縮んでしまい、親の行の右端と揃わない。
   同じ詳細度の組み合わせで明示的に0に打ち消す。 */
.tt-nav--side li.wp-block-navigation-item.has-child.open-always .wp-block-navigation__submenu-container {
	padding-left: 0;
	padding-right: 0;
}
.tt-nav--side .wp-block-navigation__submenu-container li.wp-block-navigation-item {
	width: 100%;
}
.tt-nav--side .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	grid-template-columns: 1fr;
	width: 100%;
	padding: 6px 10px;
	min-height: 36px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tt-ink-soft-on-card);
}
.tt-nav--side .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before,
.tt-nav--side .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

/* アイコン＋色（is-style-tt-xxx、エディタの「スタイル」タブから選ぶ）。
   フロント表示では <li class="wp-block-navigation-item ...">、
   ブロックエディタのキャンバス内では <div class="... wp-block-navigation-item ...">
   と、同じ wp-block-navigation-item クラスのまま要素のタグだけが変わる
   （実機確認。li 限定にすると編集中はアイコンが既定のタグ形のまま変わらず
   見えてしまう）。子を持つ項目の <ul class="...submenu-container"> 側は
   wp-block-navigation-item クラスを持たないため、タグ名を指定しなくても
   二重に効くことはない。 */
.tt-nav--header .wp-block-navigation-item.is-style-tt-bag > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-bag > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-bag > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-bag);
	-webkit-mask-image: var(--tt-icon-svg-bag);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-bag,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-bag {
	background-color: var(--wp--preset--color--water-pale);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-bag > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-bag > .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--water-accent);
}

.tt-nav--header .wp-block-navigation-item.is-style-tt-fish > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-fish > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-fish > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-fish);
	-webkit-mask-image: var(--tt-icon-svg-fish);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-fish,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-fish {
	background-color: var(--wp--preset--color--water);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-fish > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-fish > .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--water-accent);
}

.tt-nav--header .wp-block-navigation-item.is-style-tt-cup > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-cup > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-cup > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-cup);
	-webkit-mask-image: var(--tt-icon-svg-cup);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-cup,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-cup {
	background-color: var(--wp--preset--color--sand);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-cup > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-cup > .wp-block-navigation-item__content::after {
	background-color: #A77B2E;
}

.tt-nav--header .wp-block-navigation-item.is-style-tt-house > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-house > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-house > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-house);
	-webkit-mask-image: var(--tt-icon-svg-house);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-house,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-house {
	background-color: var(--wp--preset--color--coral-pale);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-house > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-house > .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--coral);
}

.tt-nav--header .wp-block-navigation-item.is-style-tt-camera > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-camera > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-camera > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-camera);
	-webkit-mask-image: var(--tt-icon-svg-camera);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-camera,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-camera {
	background-color: var(--wp--preset--color--water-pale);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-camera > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-camera > .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--water-accent);
}

.tt-nav--header .wp-block-navigation-item.is-style-tt-map > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-map > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-map > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-map);
	-webkit-mask-image: var(--tt-icon-svg-map);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-map,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-map {
	background-color: var(--wp--preset--color--water);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-map > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-map > .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--water-accent);
}

.tt-nav--header .wp-block-navigation-item.is-style-tt-book > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-book > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-book > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-book);
	-webkit-mask-image: var(--tt-icon-svg-book);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-book,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-book {
	background-color: var(--wp--preset--color--sand);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-book > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-book > .wp-block-navigation-item__content::after {
	background-color: #A77B2E;
}

.tt-nav--header .wp-block-navigation-item.is-style-tt-tool > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-tool > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-tool > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-tool);
	-webkit-mask-image: var(--tt-icon-svg-tool);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-tool,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-tool {
	background-color: var(--wp--preset--color--coral-pale);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-tool > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-tool > .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--coral);
}

.tt-nav--header .wp-block-navigation-item.is-style-tt-dish > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-dish > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-dish > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-dish);
	-webkit-mask-image: var(--tt-icon-svg-dish);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-dish,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-dish {
	background-color: var(--wp--preset--color--sand);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-dish > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-dish > .wp-block-navigation-item__content::after {
	background-color: #A77B2E;
}

.tt-nav--header .wp-block-navigation-item.is-style-tt-phone > .wp-block-navigation-item__content::before,
.tt-nav--route  .wp-block-navigation-item.is-style-tt-phone > .wp-block-navigation-item__content::after,
.tt-nav--side   .wp-block-navigation-item.is-style-tt-phone > .wp-block-navigation-item__content::after {
	mask-image: var(--tt-icon-svg-phone);
	-webkit-mask-image: var(--tt-icon-svg-phone);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-phone,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-phone {
	background-color: var(--wp--preset--color--water);
}
.tt-nav--route .wp-block-navigation-item.is-style-tt-phone > .wp-block-navigation-item__content::after,
.tt-nav--side  .wp-block-navigation-item.is-style-tt-phone > .wp-block-navigation-item__content::after {
	background-color: var(--wp--preset--color--water-accent);
}

/* --------------------------------------------------------------------------
   セクション見出し（薄い英字＋日本語 h2）
   英字は装飾なので読み上げ対象から外す（aria-hidden はマークアップ側）
   -------------------------------------------------------------------------- */

.tt-sechead { margin-block: 0; }

.tt-sechead__en {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 54px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--en-heading);
	margin: 0 0 2px;
	user-select: none;
}

.tt-sechead__ja {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
	margin: 0;
}

.tt-sechead__note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.8;
	margin: 6px 0 0;
}

/* セクションの間隔 */
.tt-section { margin-block-start: 44px; }
.tt-section > * + * { margin-block-start: 16px; }

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */

.tt-hero {
	position: relative;
	border-radius: var(--tt-radius-card-lg);
	overflow: hidden;
	background-color: var(--tt-stripe-a);
	background-image: repeating-linear-gradient(
		115deg,
		var(--tt-stripe-a) 0,
		var(--tt-stripe-a) 22px,
		var(--tt-stripe-b) 22px,
		var(--tt-stripe-b) 44px
	);
	padding: 36px 20px 40px;
	text-align: center;
}

.tt-hero__art {
	display: block;
	width: 100%;
	max-width: 290px;
	margin: 0 auto;
}

.tt-hero__copy {
	margin: 18px 0 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   吹き出し（CONCEPT・記事本文で共用）
   -------------------------------------------------------------------------- */

.tt-talk {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-block: 20px;
}
.tt-talk.is-right { flex-direction: row-reverse; }

.tt-talk__who {
	flex: 0 0 auto;
	width: 58px;
	text-align: center;
}

.tt-talk__avatar {
	width: 52px;
	height: 52px;
	margin: 0 auto;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
}
.tt-talk__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tt-talk__avatar svg { width: 30px; height: 30px; }
.tt-talk.is-right .tt-talk__avatar { background: var(--wp--preset--color--coral-pale); }

.tt-talk__name {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-soft);
}

.tt-talk__bubble {
	position: relative;
	flex: 1 1 auto;
	background: var(--wp--preset--color--water-pale);
	border-radius: var(--tt-radius-card);
	padding: 12px 18px;
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.02em;
}
.tt-talk__bubble > * { margin-block: 0; }
.tt-talk__bubble ul { padding-left: 1.1em; margin-block: 8px 0; }
.tt-talk__bubble li { margin-block: 0; }

/* しっぽ（CSS で作る） */
.tt-talk__bubble::before {
	content: "";
	position: absolute;
	top: 20px;
	left: -9px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 10px 8px 0;
	border-color: transparent var(--wp--preset--color--water-pale) transparent transparent;
}
.tt-talk.is-right .tt-talk__bubble { background: var(--wp--preset--color--sand); }
.tt-talk.is-right .tt-talk__bubble::before {
	left: auto;
	right: -9px;
	border-width: 8px 0 8px 10px;
	border-color: transparent transparent transparent var(--wp--preset--color--sand);
}

/* 色違い */
.tt-talk.is-coral .tt-talk__bubble { background: var(--wp--preset--color--coral-pale); }
.tt-talk.is-coral .tt-talk__bubble::before { border-right-color: var(--wp--preset--color--coral-pale); }
.tt-talk.is-coral.is-right .tt-talk__bubble::before { border-left-color: var(--wp--preset--color--coral-pale); }

/* --------------------------------------------------------------------------
   Journal（新着記事の横長カード）
   -------------------------------------------------------------------------- */

.tt-journal ul.wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-journal li.wp-block-post {
	background: var(--wp--preset--color--surface);
	border-radius: var(--tt-radius-card);
	margin: 0;
	/* overflow:hidden は付けない。ホバーで浮かせたときの box-shadow が
	   角丸の外に出るが、画像は .wp-block-post-featured-image 側で
	   自分の角丸ぶんだけ clip しているので、ここで切る必要はない。 */
}

.tt-jcard {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	position: relative;
}

.tt-jcard .wp-block-post-featured-image {
	flex: 0 0 auto;
	width: 96px;
	height: 80px;
	margin: 0;
	border-radius: var(--tt-radius-thumb);
	overflow: hidden;
	background: var(--wp--preset--color--water);
}
.tt-jcard .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tt-jcard__body {
	flex: 1 1 auto;
	align-self: flex-start;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 2px;
}

.tt-jcard__body .wp-block-post-title {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0;
}
.tt-jcard__body .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }

/* カード全体をクリックできるようにする（見た目上のリンクはタイトル） */
.tt-jcard__body .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* カテゴリチップ */
.tt-chip, .tt-jcard__body .wp-block-post-terms {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	border-radius: var(--tt-pill);
	padding: 4px 10px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	background: var(--wp--preset--color--water-pale);
	color: var(--wp--preset--color--water-deep);
}
.tt-jcard__body .wp-block-post-terms a { color: inherit; text-decoration: none; }
.tt-jcard__body .wp-block-post-terms .wp-block-post-terms__separator { display: none; }

/* カテゴリごとの色（post-template が付ける category-<slug> を使う） */
.category-before .tt-jcard__body .wp-block-post-terms,
.tt-chip.is-before { background: var(--wp--preset--color--water-pale); color: var(--wp--preset--color--water-deep); }
.category-spot .tt-jcard__body .wp-block-post-terms,
.tt-chip.is-spot { background: var(--wp--preset--color--water); color: var(--wp--preset--color--water-deep); }
.category-detour .tt-jcard__body .wp-block-post-terms,
.tt-chip.is-detour { background: var(--wp--preset--color--sand); color: #7A5A18; }
.category-after .tt-jcard__body .wp-block-post-terms,
.tt-chip.is-after { background: var(--wp--preset--color--coral-pale); color: var(--tt-coral-on-pale); }

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */

/* アウトライン（記事一覧を見る） */
.tt-btn-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--water-accent);
	color: var(--wp--preset--color--water-deep);
	border-radius: var(--tt-pill);
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

/* コーラル全幅（お問い合わせ） */
.tt-btn-contact { padding-inline: 14px; }
.tt-btn-contact .wp-block-button { width: 100%; }
.tt-btn-contact .wp-block-button__link {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--surface);
	border-radius: var(--tt-pill);
	min-height: 48px;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	padding: 0 20px;
}

/* 右端の「›」。装飾なので CSS で作る（読み上げ対象にしない） */
.tt-btn-contact .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 2px;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */

.tt-footer { padding-block: 40px 56px; }

.tt-footer__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
}
.tt-footer__nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--tt-tap);
	padding-inline: 14px;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}
.tt-footer__nav .wp-block-navigation-item { position: relative; }
.tt-footer__nav .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 16px;
	background: var(--wp--preset--color--divider);
}

.tt-footer__copy {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 0.25em;
	margin-top: 14px;
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--ink-soft);
}
.tt-footer__copy > * { margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.tt-footer__copy .wp-block-site-title { font-size: inherit; font-weight: 400; color: inherit; letter-spacing: inherit; }

/* --------------------------------------------------------------------------
   PC（中央 720px、背景は同色）
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.tt-nav--header .wp-block-navigation__container { gap: 10px 8px; }
	.tt-hero { padding: 40px 32px 44px; }
	.tt-hero__copy { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   読み上げ専用テキスト
   -------------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
	white-space: normal;
}

/* ==========================================================================
   記事ページ（single）
   ========================================================================== */

.tt-article { padding-block: 10px 0; }
.tt-article > * + * { margin-block-start: 16px; }

/* パンくず -------------------------------------------------------------- */

.tt-breadcrumbs {
	font-size: 12px;
	line-height: 1.8;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-soft);
}
.tt-breadcrumbs a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tt-breadcrumbs li:not(:last-child)::after {
	margin: 0 0.45em;
	opacity: 1;
	color: var(--wp--preset--color--divider);
}

/* 記事ページの core/breadcrumbs は「ホーム / 記事一覧（投稿ページ） / カテゴリ / 現在」
   の4つを出す。モックは「ホーム › カテゴリ › 記事タイトル」なので、投稿ページの1つだけ隠す。
   display:none なので読み上げ対象からも外れる。
   記事ページ専用（.tt-breadcrumbs--post）。固定ページは「ホーム › ページ名」の2つなので
   隠さない。表示設定の「投稿ページ」が未設定だと並びがずれてカテゴリが隠れるので、
   設定は DEPLOY.md に明記する。 */
.tt-breadcrumbs--post ol > li:nth-child(2) { display: none; }

/* カテゴリチップ（記事ページ用・少し大きい） ----------------------------- */

.tt-chip-lg {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	border-radius: var(--tt-pill);
	padding: 4px 14px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	background: var(--wp--preset--color--water-pale);
	color: var(--wp--preset--color--water-deep);
	width: fit-content;
}
.tt-chip-lg a { color: inherit; text-decoration: none; }
/* 見た目はモックどおり小さいまま、タップ領域だけ 44px に広げる */
.tt-chip-lg a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -9px;
	bottom: -9px;
}
.tt-chip-lg .wp-block-post-terms__separator { display: none; }

/* 見出しと日付 ---------------------------------------------------------- */

.tt-article__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.55;
	letter-spacing: 0.04em;
}

.tt-article__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
}
.tt-article__dates > * { margin-block: 0; font-size: inherit; color: inherit; }
.tt-article__dates .tt-article__dates-sep { color: var(--wp--preset--color--divider); }

/* アイキャッチ ---------------------------------------------------------- */

.tt-article__thumb { margin: 0; }
.tt-article__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 20px;
	display: block;
	background: var(--wp--preset--color--water);
}

/* 本文 ------------------------------------------------------------------ */

.tt-article__content { margin-block-start: 22px; }
.tt-article__content > * + * { margin-block-start: 22px; }

/* 本文の段落は theme.json の body 指定（15px / 行間2.0 / 字間0.04em）をそのまま使う。
   ここで p 全体に指定すると、吹き出しやメモ枠など、独自に文字サイズを決めている
   部品の中の p まで上書きしてしまう。 */

/* h2：水色の帯。
   エディタ（.editor-styles-wrapper）にも同じ見た目を効かせる。
   トップ等のセクション見出し（.tt-sechead__ja）は帯にしないので打ち消す。 */
.tt-article__content h2,
.editor-styles-wrapper h2 {
	background: var(--wp--preset--color--water-pale);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	letter-spacing: 0.04em;
	margin-block-start: 34px;
}

.editor-styles-wrapper .tt-sechead__ja {
	background: none;
	border-radius: 0;
	padding: 0;
	margin-block-start: 0;
}

.tt-article__content h3 {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	margin-block-start: 28px;
	padding-left: 12px;
	border-left: 4px solid var(--wp--preset--color--water-accent);
}

.tt-article__content ul,
.tt-article__content ol { padding-left: 1.4em; }
.tt-article__content li { margin-block: 6px; }

.tt-article__content a { text-underline-offset: 3px; }

/* INDEX（目次） ---------------------------------------------------------
   assets/js/toc.js が本文の h2 から組み立てて差し込む。
   JS が動かない環境では何も挿入されない（カードごと出ない）。 */

.tt-index {
	background: var(--wp--preset--color--surface);
	border-radius: var(--tt-radius-card);
	padding: 18px 20px;
}
.tt-index > * { margin-block: 0; }

.tt-index__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--water-accent);
	margin-bottom: 10px;
}

.tt-index ol {
	margin: 0;
	padding-left: 1.6em;
	font-size: 13px;
	line-height: 2.1;
	letter-spacing: 0.02em;
}
.tt-index li { margin-block: 0; }
.tt-index a { color: var(--wp--preset--color--ink); text-decoration: none; }
.tt-index a:hover { text-decoration: underline; }

/* RECORD 枠 ------------------------------------------------------------- */

.tt-record {
	background: var(--wp--preset--color--surface);
	border-radius: var(--tt-radius-card);
	padding: 20px 20px;
}
.tt-record > * { margin-block: 0; }

.tt-record__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--water-accent);
	margin-bottom: 12px;
}

.tt-record__list {
	display: grid;
	grid-template-columns: 4.5em 1fr;
	gap: 4px 16px;
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
}
.tt-record__list dt {
	margin: 0;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--water-deep);
}
.tt-record__list dd {
	margin: 0;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
}

/* ひとことメモ枠 -------------------------------------------------------- */

.tt-memo {
	background: var(--wp--preset--color--sand);
	border-radius: 16px;
	padding: 16px 20px;
}
.tt-memo > * { margin-block: 0; }
.tt-memo p {
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.02em;
}

/* 写真＋キャプション ---------------------------------------------------- */

.tt-figure { margin: 0; text-align: center; }
.tt-figure img {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}
.tt-figure figcaption,
.tt-figure .wp-element-caption {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-soft);
	text-align: center;
}

/* 記事下 ---------------------------------------------------------------- */

.tt-aftercontent { margin-block-start: 88px; }
.tt-aftercontent > * + * { margin-block-start: 28px; }

/* Phase 3 で中身を入れる置き場 */
.tt-slot {
	border-radius: var(--tt-radius-card);
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.tt-slot--share { background: var(--wp--preset--color--surface); min-height: 144px; }
.tt-slot--profile { background: var(--wp--preset--color--water-pale); min-height: 290px; }
.tt-slot p {
	margin: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--tt-ink-soft-on-card);
}

/* あわせて読みたい */
.tt-related ul.wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tt-related li.wp-block-post {
	background: var(--wp--preset--color--surface);
	border-radius: var(--tt-radius-card);
	margin: 0;
	/* 同上。overflow:hidden を外してホバーの box-shadow を切らないようにする。 */
}

/* ==========================================================================
   SNS リンク（カスタムブロック tadaima-tsuri/sns-links）
   ========================================================================== */

.tt-sns { text-align: center; }

.tt-sns__heading {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink);
}

.tt-sns__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-sns__cell { margin: 0; }

.tt-sns__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 56px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
}

.tt-sns__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--ink);
}
.tt-sns__icon svg { display: block; }

.tt-sns--share .tt-sns__icon { background: var(--wp--preset--color--water-pale); }
.tt-sns--follow .tt-sns__icon { background: var(--wp--preset--color--surface); }

/* note は公式ガイドラインがロゴの色変更を認めていないため、文字で代替している */
.tt-sns__letter {
	font-family: var(--wp--preset--font-family--base);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.tt-sns__label {
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-soft);
	white-space: nowrap;
}

/* リンクコピーの結果表示 */
.tt-sns__label-b { display: none; }
.tt-sns__copy.is-copied .tt-sns__label-a { display: none; }
.tt-sns__copy.is-copied .tt-sns__label-b { display: inline; }
.tt-sns__copy.is-copied .tt-sns__icon { background: var(--wp--preset--color--water); }

.tt-sns__empty {
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
}

/* エディタのプレビューでは SVG を出さないので、丸だけ見せる */
.editor-styles-wrapper .tt-sns__icon { min-width: 48px; }

/* 記事下のシェアカード */
.tt-share-card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--tt-radius-card);
	padding: 24px 20px 26px;
}

/* 記事下のプロフィールカード */
.tt-profile {
	background: var(--wp--preset--color--water-pale);
	border-radius: var(--tt-radius-card);
	padding: 22px 20px 24px;
}
.tt-profile > * { margin-block: 0; }

.tt-profile__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--water-accent);
	margin: 0 0 16px;
}

.tt-profile__head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.tt-profile__avatar {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.tt-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tt-profile__avatar svg { width: 34px; height: 34px; }

.tt-profile__who { min-width: 0; }
.tt-profile__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
}
.tt-profile__sub {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--tt-ink-soft-on-card);
}

.tt-profile__bio {
	margin-block-start: 18px;
	font-size: 14px;
	line-height: 1.9;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
}

.tt-profile .tt-sns { margin-block-start: 20px; }
.tt-profile .tt-sns__list { justify-content: flex-start; gap: 14px; }

/* フォローはモックに合わせてラベルを出さない。
   読み上げ用の名前は各リンクの aria-label が持っている。 */
.tt-sns--follow .tt-sns__label { display: none; }
.tt-sns--follow .tt-sns__item { width: 48px; gap: 0; }

/* 編集画面では、どのSNSか分かるようにフォローのラベルも出す（表示側は出さない） */
.editor-styles-wrapper .tt-sns--follow .tt-sns__label { display: block; }
.editor-styles-wrapper .tt-sns--follow .tt-sns__item { width: 56px; gap: 6px; }

/* ==========================================================================
   改行の扱い（仕様書 §5）
   入力した改行・空行が表示されないことを避ける。
   フロントとエディタの両方に効かせる。
   ========================================================================== */

/* (c) 段落の中の生の改行（\n）を改行として表示する。
   注意：ブロックHTMLの <p> の中を整形（pretty print）すると、
   その改行まで表示されてしまう。REST API で投稿するときは <p> の中を整形しないこと。 */
.wp-block-post-content p,
.editor-styles-wrapper p.wp-block-paragraph {
	white-space: pre-line;
}

/* (b) 空の段落ブロックに1行分の高さを持たせる。
   ゼロ幅スペースを入れて行ボックスを作る。
   空行1つ＝1行分になるよう、上下のマージンは消す。 */
.wp-block-post-content p:empty,
.editor-styles-wrapper p.wp-block-paragraph:empty {
	margin-block: 0;
}
.wp-block-post-content p:empty::before,
.editor-styles-wrapper p.wp-block-paragraph:empty::before {
	content: "\200b";
}

/* (a) 連続した <br> は既定で全部効く。特別な指定は要らない。
   pre-line にしても潰れないことをテストで確認する。 */


/* ==========================================================================
   アーカイブ・検索結果・404
   ========================================================================== */

.tt-archive__title {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.04em;
}

.tt-archive__desc {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-soft);
}

.tt-archive .wp-block-query { margin-block-start: 20px; }

/* ページ送り */
.wp-block-query-pagination {
	gap: 4px;
	margin-block-start: 28px;
	font-size: 13px;
}
.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tt-tap);
	min-height: var(--tt-tap);
	padding-inline: 10px;
	border-radius: var(--tt-pill);
	color: var(--wp--preset--color--water-deep);
	text-decoration: none;
}
.wp-block-query-pagination .current {
	background: var(--wp--preset--color--water-pale);
	font-weight: 700;
}

/* 検索フォーム（検索結果ページと404で使う） */
.tt-searchform { margin-block: 18px 4px; }
.tt-searchform .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--tt-pill);
	background: var(--wp--preset--color--surface);
	padding: 2px 2px 2px 14px;
}
.tt-searchform .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: var(--wp--preset--font-size--small);
	min-height: 40px;
}
.tt-searchform .wp-block-search__button {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--ink);
	min-width: var(--tt-tap);
	min-height: var(--tt-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.tt-searchform .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }

/* 404 */
.tt-404 { text-align: center; }
.tt-404 .tt-sechead { text-align: center; }
.tt-404__lead {
	margin-block-start: 14px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 2;
	color: var(--wp--preset--color--ink-soft);
}
.tt-404 .tt-btn-outline { margin-block-start: 24px; }


/* ==========================================================================
   PC（1024px以上）の2カラム
   1024px未満では何も変えない。サイドバーは出さない。
   ========================================================================== */

/* サイドバーはスマホ・タブレットでは出さない。
   テンプレートパーツの外枠（.wp-block-template-part）ごと消す。
   中身だけ消すと、外枠が残ってブロック間隔（24px）だけ空いてしまう。 */
.tt-shell > .wp-block-template-part,
.tt-sidebar { display: none; }

/* ヒーローの外枠。1024px未満は今までと同じ（左右16px、中身は最大720px）。
   main（constrained）の中にあったときと同じ寸法になるようにする。 */
.tt-herowrap {
	padding-inline: var(--wp--style--root--padding-left, 16px);
	max-width: calc(720px + var(--wp--style--root--padding-left, 16px) + var(--wp--style--root--padding-right, 16px));
	margin-inline: auto;
}

@media (min-width: 1024px) {

	/* 本文＋サイドバー。全体 1080px（左右に 24px の余白） */
	.tt-shell {
		display: grid;
		grid-template-columns: minmax(0, 720px) 300px;
		gap: 40px;
		/* 本文の左端をヘッダー・ヒーローと揃え、サイドバーの右端も枠に合わせる。
		   1080px いっぱいのときだけ、余る20pxが間隔に回る（40→60px）。 */
		justify-content: space-between;
		max-width: calc(1080px + 48px);
		margin-inline: auto;
		padding-inline: 24px;
		align-items: start;
	}

	/* 本文側は自前で幅を持つので、コアの左右パディングは要らない */
	.tt-shell > main {
		padding-inline: 0;
		max-width: none;
	}
	.tt-shell > main > .is-layout-constrained,
	.tt-shell > main > * { max-width: none; }

	.tt-shell > .wp-block-template-part,
	.tt-sidebar { display: block; }
	/* グリッドの列なので、ブロック間隔のマージンは消して本文と上端を揃える */
	.tt-shell > .wp-block-template-part { margin-block-start: 0; }

	/* ヒーローは 1080px いっぱい、高さ約320px */
	.tt-herowrap {
		max-width: calc(1080px + 48px);
		margin-inline: auto;
		padding-inline: 24px;
	}
	.tt-hero {
		min-height: 320px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 32px 32px 36px;
	}
	.tt-hero__art { max-width: 300px; }

	/* Route は 2×2 */
	.tt-nav--route .wp-block-navigation__container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	/* 記事下のプロフィールはサイドバーにあるので出さない */
	.tt-profile-slot { display: none; }
}

/* ==========================================================================
   サイドバー
   カードの見た目は .tt-sidebar の直下のブロックに当てる。
   管理画面でブロックを出し入れ・並べ替えしても崩れない。
   ========================================================================== */

.tt-sidebar > * {
	background: var(--wp--preset--color--surface);
	border-radius: var(--tt-radius-card-lg);
	padding: 18px 18px 20px;
	margin-block: 0;
}
.tt-sidebar > * + * { margin-block-start: 20px; }
.tt-sidebar > * > * { margin-block: 0; }
.tt-sidebar > * > * + * { margin-block-start: 14px; }

/* 見出し（薄い英字＋日本語）。英字は装飾なので読み上げ対象から外す */
.tt-sidehead { margin-block: 0; }
.tt-sidehead__en {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--en-heading);
	margin: 0 0 2px;
	user-select: none;
}
.tt-sidehead__ja {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
	margin: 0;
}

/* 検索カードは枠だけにする（中の検索フォームが白カードなので二重にしない） */
.tt-side-card--search { padding: 0; background: none; }
.tt-sidebar .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: var(--tt-pill);
	background: var(--wp--preset--color--surface);
	padding: 2px 2px 2px 16px;
}
.tt-sidebar .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: var(--wp--preset--font-size--small);
	min-height: 40px;
}
.tt-sidebar .wp-block-search__button {
	background: var(--wp--preset--color--water-pale);
	border: 0;
	border-radius: var(--tt-pill);
	color: var(--wp--preset--color--water-deep);
	min-width: var(--tt-tap);
	min-height: var(--tt-tap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.tt-sidebar .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }

/* プロフィールは既存のテンプレートパーツをそのまま使う。
   サイドバーの中だけ白地にして、外側のカードと二重にならないようにする */
.tt-side-card--profile { padding: 0; }
.tt-side-card--profile .wp-block-template-part { margin: 0; }
.tt-sidebar .tt-profile {
	background: var(--wp--preset--color--surface);
	border-radius: var(--tt-radius-card-lg);
	padding: 18px 18px 20px;
}
.tt-sidebar .tt-profile__bio { font-size: 13px; line-height: 1.9; }
.tt-sidebar .tt-profile__name { font-size: 16px; }
.tt-sidebar .tt-sns__list { justify-content: flex-start; gap: 12px; }

/* 新着記事（core/latest-posts） */
.tt-sidebar .wp-block-latest-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tt-sidebar .wp-block-latest-posts__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.tt-sidebar .wp-block-latest-posts__featured-image {
	flex: 0 0 auto;
	margin: 0;
	width: 56px;
	height: 48px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--water);
}
.tt-sidebar .wp-block-latest-posts__featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tt-sidebar .wp-block-latest-posts__post-title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.tt-sidebar .wp-block-latest-posts__post-date {
	font-size: 11px;
	color: var(--wp--preset--color--ink-soft);
}

/* そのほか、サイドバーに入れそうなコアブロックのトーンを揃える */
.tt-sidebar .wp-block-archives-list,
.tt-sidebar .wp-block-page-list,
.tt-sidebar .wp-block-latest-comments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tt-sidebar .wp-block-archives-list li a,
.tt-sidebar .wp-block-page-list li a {
	display: flex;
	align-items: center;
	min-height: var(--tt-tap);
	padding-inline: 4px;
	font-size: 13px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--en-heading);
}
.tt-sidebar .wp-block-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-sidebar .wp-block-tag-cloud a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 14px;
	border-radius: var(--tt-pill);
	background: var(--wp--preset--color--water-pale);
	color: var(--wp--preset--color--water-deep);
	font-size: 12px !important;
	text-decoration: none;
}
.tt-sidebar select {
	width: 100%;
	min-height: var(--tt-tap);
	border: 1px solid var(--wp--preset--color--divider);
	border-radius: 12px;
	padding: 6px 12px;
	background: var(--wp--preset--color--surface);
	font-size: 13px;
	font-family: inherit;
	color: var(--wp--preset--color--ink);
}

/* --------------------------------------------------------------------------
   2カラム化で変わってしまった余白を元に戻す
   コアの :where(.is-layout-*) > :first-child { margin-block-start: 0 } が
   先頭要素のマージンを消すため、同じ見た目になるよう指定し直す。
   -------------------------------------------------------------------------- */

/* ヒーローの下。もとは main の中で .tt-section が持っていた 44px */
.tt-herowrap { margin-block-end: 44px; }

/* shell の先頭が .tt-section のとき（記事一覧・カテゴリ・検索）の上の余白 */
.tt-shell > .tt-section { margin-block-start: 44px; }

/* 記事下のプロフィールの枠は、間隔を増やさない */
.tt-profile-slot > * { margin-block: 0; }

/* --------------------------------------------------------------------------
   PC（1024px以上）：ヘッダー・カテゴリナビ・フッターも 1080px の枠に合わせる
   （ヒーローや本文と左右の位置が揃うようにする）
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.tt-header,
	.tt-catnav-wrap,
	.tt-footer {
		max-width: calc(1080px + 48px);
		margin-inline: auto;
		padding-inline: 24px;
	}
	.tt-header > *,
	.tt-catnav-wrap > *,
	.tt-footer > * { max-width: none; }

	/* カテゴリナビは広がりすぎないよう、中央に寄せて間隔を持たせる */
	.tt-nav--header .wp-block-navigation__container {
		max-width: 720px;
		margin-inline: auto;
	}

	/* ヘッダーのタイトルを縦横2倍に（アイコン・文字サイズ・間隔は
	   .tt-brand 側の calc(... * var(--tt-brand-scale)) が全部拾う）。
	   右側の検索・ハンバーガー（.tt-header__tools）は44pxのまま変えない。
	   高さが変わるぶん、タイトルと右アイコンの縦位置をそろえる。 */
	:root {
		--tt-brand-scale: 2;
	}
	.tt-header__bar {
		align-items: center;
	}
}

/* ==========================================================================
   ホバーで浮く動き（Phase 7）
   マウスが使え（hover:hover and pointer:fine）、かつ「動きを減らす」設定で
   ない（prefers-reduced-motion: no-preference）ときだけ動く。
   タッチ端末・キーボードのみの環境・reduced-motion 環境では、このブロック
   ごと適用されない＝一切動かない。
   transform と box-shadow だけを変え、幅・高さ・余白は動かさない
   （周囲がレイアウト的に揺れないようにするため）。will-change は使わない。
   ========================================================================== */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

	/* カード：Journal（新着・記事一覧・アーカイブ・検索・あわせて読みたい共通）、Route */
	.tt-journal li.wp-block-post,
	.tt-related li.wp-block-post,
	.tt-nav--route li.wp-block-navigation-item {
		transition: transform .2s ease, box-shadow .2s ease;
	}
	.tt-journal li.wp-block-post:hover,
	.tt-journal li.wp-block-post:has(a:focus-visible),
	.tt-related li.wp-block-post:hover,
	.tt-related li.wp-block-post:has(a:focus-visible),
	.tt-nav--route li.wp-block-navigation-item:hover,
	.tt-nav--route li.wp-block-navigation-item:has(a:focus-visible) {
		transform: translateY(-3px);
		box-shadow: 0 8px 18px rgba(46, 100, 104, .14);
	}

	/* ボタン：記事一覧を見る／お問い合わせ／404のホームへ戻る（.tt-btn-outline を再利用） */
	.tt-btn-outline .wp-block-button__link,
	.tt-btn-contact .wp-block-button__link {
		transition: transform .2s ease, box-shadow .2s ease;
	}
	.tt-btn-outline .wp-block-button__link:hover,
	.tt-btn-outline .wp-block-button__link:focus-visible,
	.tt-btn-contact .wp-block-button__link:hover,
	.tt-btn-contact .wp-block-button__link:focus-visible {
		transform: translateY(-2px);
		box-shadow: 0 8px 18px rgba(46, 100, 104, .14);
	}

	/* サイドバーのカテゴリ行。フォーカスできる要素は中の <a> なので、
	   :has() で行（<li>、色付きの箱）ごと浮かせる。 */
	.tt-nav--side li.wp-block-navigation-item {
		transition: transform .2s ease, box-shadow .2s ease;
	}
	.tt-nav--side li.wp-block-navigation-item:hover,
	.tt-nav--side li.wp-block-navigation-item:has(a:focus-visible) {
		transform: translateY(-3px);
		box-shadow: 0 8px 18px rgba(46, 100, 104, .14);
	}

	/* SNS アイコン（シェア・フォロー共通、48px の丸ボタン）。
	   小さいボタンなので -2px。影はラベル文字ごと四角くならないよう、
	   アイコンの丸にだけ付ける。ボタン全体（アイコン＋ラベル）は一緒に動く。 */
	.tt-sns__item { transition: transform .2s ease; }
	.tt-sns__icon { transition: box-shadow .2s ease; }
	.tt-sns__item:hover,
	.tt-sns__item:focus-visible {
		transform: translateY(-2px);
	}
	.tt-sns__item:hover .tt-sns__icon,
	.tt-sns__item:focus-visible .tt-sns__icon {
		box-shadow: 0 8px 18px rgba(46, 100, 104, .14);
	}
}

/* 対象外：ヘッダーのカテゴリナビ／本文中のリンクは動かさず、色が少し変わるだけにする。
   hover:hover などの条件を付けず常時有効（色だけなのでタッチ端末でも害がない）。
   どちらも背景 #F6F4EC の上で 4.5:1 以上を保つ色を使う（実測値は報告のとおり）。 */
.tt-nav--header .wp-block-navigation-item__content:hover,
.tt-nav--header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--water-deep);
}
.tt-nav--header .wp-block-navigation-item__content:hover::before,
.tt-nav--header .wp-block-navigation-item__content:focus-visible::before {
	background-color: var(--wp--preset--color--water-deep);
}
.tt-article__content a:hover,
.tt-article__content a:focus-visible {
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   前面CSSの手動改行（スマホ用）を 768px 以上で無効にする（Phase 7）
   対象は front-page の CONCEPT 見出しと吹き出し2つだけ（tt-br-sp-only）。
   記事用パターンや記事本文の <br> はここでは触らない。
   ========================================================================== */
@media (min-width: 768px) {
	.tt-br-sp-only br { display: none; }
}