/*
Theme Name:  X-T9 Child
Theme URI:   https://shinichi-miyazaki.website
Description: 上野総合税理士法人サイト用の X-T9 子テーマ。名刺由来のネイビー基調に、ゴールド（行動喚起）とグリーン（専門性）を効かせたブランドパレットを theme.json で定義しています。追加のカスタム CSS はこのファイル末尾に追記してください。制作: 戦略的ウェブ制作工房エル・タジェール
Author:      宮崎 真一 / エル・タジェール
Author URI:  https://shinichi-miyazaki.website
Template:    x-t9
Version:     1.0.0
Requires at least: 6.5
Tested up to:      7.0
Requires PHP:      7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: x-t9-child
*/

/* =========================================================
   追加カスタム CSS はここに記述します。
   例）名刺モチーフの十字罫アクセントなど。
   カラーは theme.json で定義したパレットを CSS 変数で利用できます:
     var(--wp--preset--color--navy)
     var(--wp--preset--color--gold)
     var(--wp--preset--color--green)
   ========================================================= */

/* トップページ：ゴールドの英字タグ（幅を内容に合わせる） */
.uenotax-tag {
	display: inline-block;
	width: auto;
}

/* トップページ：選ばれる理由の番号バッジ（正方形に近い小さめのboxに） */
.uenotax-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	padding: 0 !important;
}

/* =========================================================
   Contact Form 7 — 縦積みの整ったフォーム
   ========================================================= */
.wpcf7 label {
	display: block;
	margin-bottom: 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
.wpcf7 .req {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--green);
	border-radius: 3px;
	vertical-align: middle;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 10px 12px;
	font-size: 15px;
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border-gray);
	border-radius: 4px;
	box-sizing: border-box;
}
.wpcf7 textarea { min-height: 150px; }
.wpcf7 .wpcf7-submit {
	display: inline-block;
	width: auto;
	margin-top: 8px;
	padding: 14px 44px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--gold);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	transition: filter .2s ease;
}
.wpcf7 .wpcf7-submit:hover { filter: brightness(1.08); }

/* 任意バッジ（必須と対で表示する） */
.wpcf7 .opt {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--wp--preset--color--sub-gray);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border-gray);
	border-radius: 3px;
	vertical-align: middle;
}
/* フィールド下の補助テキスト */
.wpcf7 .hint {
	margin: -12px 0 18px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--wp--preset--color--sub-gray);
}
/* 送信ボタン下のリスク解除コピー */
.wpcf7 .submit-note {
	margin: 12px 0 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--wp--preset--color--sub-gray);
}

/* =========================================================
   下層ページ 共通 — Material Symbols アイコン
   ========================================================= */
.material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

/* =========================================================
   下層ページ 共通 — カード（bento / お知らせ）ホバー演出
   ========================================================= */
.ueno-card {
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ueno-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 24px rgba(27, 58, 107, .10);
	border-color: var(--wp--preset--color--navy) !important;
}
.ueno-news-item {
	transition: border-color .25s ease, box-shadow .25s ease;
}
.ueno-news-item:hover {
	border-color: var(--wp--preset--color--navy) !important;
	box-shadow: 0 4px 16px rgba(27, 58, 107, .08);
}

/* グリーンのピル型タグ（サービスタグ・カテゴリ） */
.ueno-pill {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	background: #eef5f2;
	color: var(--wp--preset--color--green);
}

/* 事務所紹介：勤続バッジ（30+ Years） */
.ueno-exp-badge {
	position: absolute;
	left: -12px;
	bottom: -16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 26px;
	background: var(--wp--preset--color--navy);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(19, 41, 75, .35);
}

/* 事務所紹介：写真の相対配置ラッパ */
.ueno-photo-wrap { position: relative; }

@media (max-width: 781px) {
	.ueno-exp-badge { left: 0; bottom: 8px; padding: 14px 18px; }
}

/* 事務所概要テーブル（ネイビーヘッダ＋ラベル列） */
.ueno-office-table table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border-gray);
	border-radius: 8px;
	overflow: hidden;
}
.ueno-office-table thead th {
	background: var(--wp--preset--color--navy);
	color: #fff;
	text-align: left;
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 700;
}
.ueno-office-table tbody th {
	background: #f4f6f9;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	text-align: left;
	padding: 14px 20px;
	width: 28%;
	white-space: nowrap;
	border: none;
}
.ueno-office-table tbody td {
	padding: 14px 20px;
	color: var(--wp--preset--color--ink);
	border: none;
	line-height: 1.8;
}
.ueno-office-table tbody tr { border-top: 1px solid #e3e7ee; }
@media (max-width: 600px) {
	.ueno-office-table tbody th { white-space: normal; width: 34%; }
}

/* =========================================================
   お知らせ — ページ送り（ページネーション）を見やすく
   ========================================================= */
.wp-block-query-pagination {
	gap: 8px;
	margin-top: 8px;
}
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--navy);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border-gray);
	border-radius: 6px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wp-block-query-pagination .page-numbers:hover {
	background: #f4f6f9;
	border-color: var(--wp--preset--color--navy);
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}
.wp-block-query-pagination .page-numbers.dots {
	min-width: auto;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--sub-gray);
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border-gray);
	border-radius: 6px;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: #f4f6f9;
	border-color: var(--wp--preset--color--navy);
}

/* ページ送り：テーマ既定の色を確実に上書き（現在ページを反転で明示） */
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
	color: var(--wp--preset--color--navy) !important;
	background-color: #fff !important;
	border: 1px solid var(--wp--preset--color--border-gray) !important;
	border-radius: 6px !important;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers:hover {
	background-color: #f4f6f9 !important;
	border-color: var(--wp--preset--color--navy) !important;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	color: #fff !important;
	background-color: var(--wp--preset--color--navy) !important;
	border-color: var(--wp--preset--color--navy) !important;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.dots {
	color: var(--wp--preset--color--sub-gray) !important;
	background-color: transparent !important;
	border: 0 !important;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	color: var(--wp--preset--color--navy) !important;
	background-color: #fff !important;
	border: 1px solid var(--wp--preset--color--border-gray) !important;
	border-radius: 6px !important;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background-color: #f4f6f9 !important;
	border-color: var(--wp--preset--color--navy) !important;
}

/* ヘッダー：追従（sticky）
   ※内側の .uenotax-header に付けると「親＝<header>ラッパーの高さ内」でしか
     効かず固定されないため、外側の template-part <header> に指定する。
     header.wp-block-template-part はヘッダーのみに一致（フッター=footer / CTA=div）。 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ヘッダー：電話番号の前に電話アイコン（Material Symbols / tel:リンクに付与）
   PCヘッダー・モバイル下部固定バーの両方の電話番号に表示される。 */
.uenotax-header a[href^="tel:"]::before {
	font-family: 'Material Symbols Outlined' !important;
	content: "\e0b0"; /* call（電話）アイコン */
	font-weight: 400;
	font-variation-settings: 'FILL' 1;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	font-size: 1.1em;
	line-height: 1;
	vertical-align: -3px;
	margin-right: 6px;
	text-decoration: none;
}

/* =========================================================
   レスポンシブ（〜781px）
   ・ヘッダー上部＝社名（左）＋ハンバーガー（右）／左右12px
   ・電話番号＋ボタン＝画面最下段に固定バー／左右12px
   ※ブロックは変更せず、構造セレクタでCSSのみ再配置
   ========================================================= */
@media (max-width: 781px) {
	/* ナビをハンバーガー表示に統一（既定600px以下→781pxまで拡張） */
	.uenotax-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.uenotax-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* --- コンテンツの左右に12pxの余白（wp-block-group 全般） --- */
	.wp-block-group {
		padding-left: 12px;
		padding-right: 12px;
	}
	/* ★背景付きグループ（トップの全幅色帯／CTA／フッター／ヘッダー）は、テーマの
	   `:is(.wp-block-group):where(.has-background){padding:0}` リセット（詳細度0,1,0）に
	   後勝ちで打ち消される。詳細度を上げた(0,2,0)で左右12pxを確実に効かせる。
	   ※カード等のinline padding(24px)はinlineが優先されるため保持される。 */
	.wp-block-group.has-background {
		padding-left: 12px;
		padding-right: 12px;
	}
	/* 全幅ラッパー(main)とキービジュアル(cover alignfull is-layout-custom)内は
	   二重inset・全幅崩れを避けるため除外 */
	main.wp-block-group,
	.wp-block-cover .wp-block-group {
		padding-left: 0;
		padding-right: 0;
	}
	/* ヘッダーは外側(.uenotax-header)だけ12px。内側の入れ子は二重にしない
	   （社名＋ハンバーガーが左右12pxで揃う。下部固定バーは後段で個別指定） */
	.uenotax-header .wp-block-group {
		padding-left: 0;
		padding-right: 0;
	}

	/* 電話番号＋ボタンのまとまりを画面最下段へ固定／左右12px */
	.uenotax-header > .wp-block-group > .wp-block-group > .wp-block-group {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		width: 100%;
		margin: 0;
		padding-top: 10px;
		padding-right: 12px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		padding-left: 12px;
		background: #fff;
		border-top: 1px solid var(--wp--preset--color--border-gray);
		box-shadow: 0 -2px 12px rgba(19, 41, 75, 0.10);
		display: flex;
		align-items: center;
		gap: 10%;                 /* 電話とボタンの間に10%の余白 */
	}
	/* 電話番号：左半分・左寄せ・1行 */
	.uenotax-header > .wp-block-group > .wp-block-group > .wp-block-group > p {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
		text-align: left;
		white-space: nowrap;
	}
	/* ボタン枠：右半分（電話と等幅） */
	.uenotax-header > .wp-block-group > .wp-block-group > .wp-block-group .wp-block-buttons {
		flex: 1 1 0;
		min-width: 0;
	}

	/* 固定バーに本文末尾が隠れないよう下部に余白を確保 */
	.wp-site-blocks {
		padding-bottom: 76px;
	}

	/* --- ボタンは（ヘッダー以外）縦積みで各行フル幅に。
	   複数ボタンのブロック（ヒーロー/CTA等）も折り返して1行1つ＝フル幅になる --- */
	.wp-block-buttons > .wp-block-button {
		flex-basis: 100%;
		max-width: 100%;
	}
	.wp-block-buttons > .wp-block-button > .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
	/* ※下部固定バーのボタンも共通ルールで枠幅100%・文字中央にする
	   （バー内で電話とボタンは flex:1 の等幅、ボタンはその枠いっぱい） */

	/* --- フッター：.uenotax-footer は上の .wp-block-group ルールで左右12pxが入る
	   （ネイビー背景は全幅のまま、内容だけ12px内側へ） --- */
}

/* =========================================================
   CTA帯（テンプレートパーツ）を左右いっぱいの全幅背景に
   ・下層ページでは本文コンテナ(.entry-content)内に置かれ、ラッパー
     (.wp-block-template-part)に max-width:1280px が掛かって帯が中央1280に
     制限される → 制限を解除して背景を全幅化（フッターと同じ見え方に）。
   ・中身(見出し/本文/ボタン)は 1280px 中央寄せを維持。
   ========================================================= */
.wp-block-template-part:has(.uenotax-cta) {
	max-width: none;
}
.uenotax-cta > * {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================
   reCAPTCHA v3 — バッジ非表示と帰属表記
   Google の規約上、右下バッジを非表示にする場合はフォーム内に
   帰属表記の掲出が必須。表記は CF7 フォーム本文の
   .recaptcha-note に記載している。
   ========================================================== */
.grecaptcha-badge {
	visibility: hidden;
}

.recaptcha-note {
	margin: 16px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--wp--preset--color--sub-gray);
}

.recaptcha-note a {
	color: inherit;
	text-decoration: underline;
}