/*
Theme Name: Piyo Labs
Theme URI: https://piyolabs.com
Author: Piyo Labs
Author URI: https://piyolabs.com
Description: Piyo Labs公式サイト用のブロックテーマ。研究支援ソフトウェア「rVAS」の紹介・マニュアル・リソース記事・サポート情報を、Gutenbergブロックエディター中心の構成で提供します。Elementor等のページビルダーは使用していません。
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.1.54
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: piyolabs
Tags: block-theme, full-site-editing, custom-colors, custom-menu, translation-ready

このテーマは現行Next.js版Piyo Labsサイト(色・フォント・余白・角丸・レイアウト)を
WordPressブロックテーマとして再現するためのものです。デザイントークンの大部分は
theme.json側で管理しています。このファイルはWordPressがテーマとして認識するために
必須のヘッダーコメントと、theme.jsonだけでは表現しきれない補助的なスタイル
(スクリーンショットギャラリーのスクロールスナップ、カードのホバー効果、
FAQの詳細/概要ブロックの見た目、スキップリンク等)のみを保持します。
*/

/* ------------------------------------------------------------------ */
/* アクセシビリティ: スキップリンク                                     */
/* ------------------------------------------------------------------ */
.piyolabs-skip-link {
	position: absolute;
	top: -999px;
	left: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
	border-radius: 0 0 var(--wp--custom--radius--md) 0;
	text-decoration: none;
}
.piyolabs-skip-link:focus {
	top: 0;
}

/* ------------------------------------------------------------------ */
/* カード(core/group の "card" スタイルバリエーション)                  */
/* ------------------------------------------------------------------ */
.wp-block-group.is-style-piyolabs-card {
	background-color: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	padding: var(--wp--custom--spacing--card);
	transition: border-color 0.2s ease;
}
.wp-block-group.is-style-piyolabs-card:hover,
.wp-block-group.is-style-piyolabs-card:focus-within {
	border-color: var(--wp--preset--color--brand);
}

/* ------------------------------------------------------------------ */
/* ボタン: アウトラインスタイル (core/button の register_block_style)  */
/* ------------------------------------------------------------------ */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--brand);
	border: 1px solid var(--wp--preset--color--border);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--brand);
}

/* ==================================================================== */
/* AppsページのアプリカードCTA領域 (fix/phase5-gutenberg-apps-cta-serialization) */
/*                                                                      */
/* 【背景 — 使い捨てローカルWordPressでの実Gutenbergエディタ検証で確定】   */
/* content-dataがこれまで持っていた形                                    */
/*   <!-- wp:buttons --><div class="wp-block-buttons">                  */
/*     <!-- wp:button -->…プライマリ「製品ページを見る」…<!-- /wp:button -->*/
/*     <!-- wp:button {"className":"is-style-outline"} -->              */
/*     <div class="wp-block-button … is-style-outline">                 */
/*       <div class="wp-block-button__link …">[piyolabs_app_store_button]</div>*/
/*     </div><!-- /wp:button -->                                        */
/*   </div><!-- /wp:buttons -->                                         */
/* は、core/buttonブロックのJSON属性(text/urlを持たない)と実際に保存      */
/* されているinner HTML(<a>ではなく生のショートコード文字列を含む<div>)   */
/* が一致せず、Gutenbergエディタのクライアント側バリデータが不正と判定    */
/* する(実機確認済み)。                                                 */
/*                                                                      */
/* 【採用した構造】このファイル内の.piyolabs-rvas-hero-actionsセクション  */
/* (rVAS Hero CTA)で既に検証済みの「standalone core/shortcodeブロックを   */
/* 専用ラッパーgroup内へ、core/buttonsの外側の兄弟として配置する」パターン */
/* をそのまま適用した(wordpress-plugin/piyolabs-importer/includes/       */
/* content-data/pages-ja.php・pages-en.php、Appsページのアプリカード参照)。*/
/*   core/group (.piyolabs-apps-card-actions)                           */
/*     ├─ core/buttons … プライマリ「製品ページを見る」ボタン(1個)       */
/*     └─ core/shortcode … App Store CTA                                */
/*                                                                      */
/* 【表示順がrVAS Heroと逆順である理由】rVAS Heroはshortcode(App Store)   */
/* が先・core/buttons(Pricingボタン)が後だが、こちらはTrack 2の           */
/* includes/apps-store-button-repair.phpが確認済みの既存本番表示順        */
/* (プライマリの「製品ページを見る」が先・App Storeボタンが後)を保つため、*/
/* core/buttonsを先・core/shortcodeを後の順にした(content-data側の       */
/* ブロック順そのものが表示順を決める)。                                 */
/*                                                                      */
/* 【レイアウト】rvas-hero-actionsと異なり、常に縦積み・常にカラム幅      */
/* いっぱい(現在の本番Track 2修復後の見た目、および隣接するプライマリ     */
/* ボタンの`has-custom-width wp-block-button__width-100`と同じ意図)を     */
/* 維持すればよく、rVAS Heroにあるような640px以上での横並び切り替えは     */
/* 不要(このカード自体がwp:columnsの30%幅カラム内という狭い文脈のため)。 */
/* そのためgrid-template-columnsはrvas-hero-actionsのminmax(0,max-content)*/
/* (コンテンツ幅に合わせる)ではなく、minmax(0,1fr)(コンテナ幅いっぱい)を  */
/* 使う。                                                                */
/*                                                                      */
/* 【App Storeボタンのoutline見た目について】[piyolabs_app_store_button]  */
/* ショートコード(includes/shortcodes.php)は、URL設定時は素の               */
/* <a class="wp-block-button__link wp-element-button">を返すだけで        */
/* is-style-outlineクラスは付けない(pending時のみ自前でis-style-outline   */
/* を付ける)。旧構造ではこれをis-style-outlineクラスを持つ                */
/* `.wp-block-button`のdivでラップしていたためアウトライン見た目を得て    */
/* いたが、新構造はstandalone core/shortcodeのためそのラッパー自体が無い  */
/* (do_blocks()はcore/shortcodeブロックをラップ用divなしの生テキストとして*/
/* 出力する)。見た目を変えないため、このラッパーgroup直下の素の           */
/* .wp-block-button__linkに対して、直前のグローバルルール                 */
/* .wp-block-button.is-style-outline .wp-block-button__link(このファイル */
/* 60行目)と同じ値を明示的に指定する。`>`(直下の子)セレクタを使うことで、  */
/* プライマリボタン側の入れ子の深い<a>(.wp-block-buttons > .wp-block-     */
/* button > a)には影響しない。                                          */
/*                                                                      */
/* 【配置場所について】このブロックはrVASページ専用CSSのセクション        */
/* (このファイル内でさらに後方、rVASページ静的セクションパリティ対応の     */
/* 見出しコメント以降の範囲。tests/rvas-static-sections-parity-test.jsが   */
/* そのセクション内の全ルールに#piyolabs-main.piyolabs-rvas-page・         */
/* #pricing・.piyolabs-rvas-heroのいずれかによるスコープを要求している)    */
/* より前に置く。Appsページ専用でrVASページとは無関係なため、そのテストの  */
/* 対象範囲に含めるべきではない(意図的にこの見出しコメントの文言そのもの  */
/* を引用しない。同テストが単純な文字列検索でセクション境界を判定して      */
/* いるため、引用すると誤って境界が前倒しされてしまう)。                  */
/* ==================================================================== */
.piyolabs-apps-card-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}
.piyolabs-apps-card-actions > * {
	margin-block-start: 0;
}
.piyolabs-apps-card-actions .wp-block-buttons,
.piyolabs-apps-card-actions .wp-block-button,
.piyolabs-apps-card-actions .wp-block-button__link {
	width: 100%;
}
.piyolabs-apps-card-actions > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	color: var(--wp--preset--color--brand);
	border: 1px solid var(--wp--preset--color--border);
}
.piyolabs-apps-card-actions > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--brand);
}
.piyolabs-apps-card-actions > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* FAQ: core/details (詳細/概要) の見た目調整                          */
/* ------------------------------------------------------------------ */
.piyolabs-faq-item.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: 1rem 1.25rem;
	background-color: var(--wp--preset--color--card);
}
.piyolabs-faq-item.wp-block-details + .piyolabs-faq-item.wp-block-details {
	margin-top: 0.75rem;
}
.piyolabs-faq-item .wp-block-details__summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
}
.piyolabs-faq-item[open] .wp-block-details__summary {
	color: var(--wp--preset--color--brand);
}

/* ------------------------------------------------------------------ */
/* 注意事項ボックス (notice パターン)                                   */
/* ------------------------------------------------------------------ */
.piyolabs-notice {
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--highlight);
	background-color: var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--md);
}

/* ------------------------------------------------------------------ */
/* スクリーンショットギャラリー                                        */
/* PC: 上(メイン画像)/下(5枚のサムネイル横並び1行)の縦積み見た目。        */
/* サムネイルのクリック/Enter・Spaceでメイン画像・キャプションが切り替わる  */
/* (assets/js/screenshot-gallery.jsの小さなvanilla JSで実装)。         */
/* モバイル: 横スクロールカルーセル(CSSのscroll-snapのみ、JS不使用)。    */
/*                                                                      */
/* [fix/home-card-and-gallery-sizing] メイン/サムネイル/モバイル各       */
/* アイテムとも、既存の<figure class="wp-block-image">を新規markup無しで  */
/* 固定比率の表示枠として使う。imgはwidth/height:100%+object-fit:contain */
/* とし、切り抜き・引き伸ばし無しでこの枠に収める。枠の余白はHeroフレーム */
/* と同じ--wp--preset--color--cardで塗り、境界線は枠側にのみ持たせる     */
/* (imgには付けない、二重線を避けるため)。枠のサイズはサムネイル切替の    */
/* 前後で変わらないため、ギャラリー全体の縦位置は動かない。実画像(5枚とも */
/* 幅1000px、高さ604〜750px、横縦比1.33〜1.66)を確認した結果、           */
/* 4:3(1.33)だと最も横長のresult-excel.pngのレターボックスが約20%に      */
/* なるため、3:2(1.5)を採用した(最悪ケースが約11%に収まりバランスが良い)。*/
/* この採用理由・実測値はPR #32時点のもので、今回のレイアウト変更         */
/* (左右分割→上下積み、サムネイル4枚→5枚)でも変わらず有効。               */
/*                                                                      */
/* [fix/rvas-desktop-gallery-return-to-initial]                        */
/* 実運用のConoHa上ではメイン画像(VAS回答画面)に対応するPCサムネイルが    */
/* 元々1枚も無く(assets/js/screenshot-gallery.jsが実行時に不足分を       */
/* 合成する、詳細は同ファイル先頭のコメント参照)、初期表示のメイン画像と  */
/* 選択中サムネイルが一致しない・元の状態に戻す手段が無いという           */
/* UXバグがあった。この修正に合わせて、5枚のサムネイルを1行に収める前提で */
/* レイアウトを左右分割から上下積みへ変更した(左右分割のままだと、右側の  */
/* 1列(旧1fr分)に5枚を詰め込むことになり手狭になるため)。メイン画像側の   */
/* aspect-ratio:3/2・object-fit:containの枠組みそのものはPR #32/#33から  */
/* 変更していない。max-width:900pxは実ブラウザ確認で妥当と判断した値      */
/* (contentSize:1120pxの内側で、左右に十分な余白を残しつつメイン画像が    */
/* 間延びしない大きさ)。                                                */
/* ------------------------------------------------------------------ */
.piyolabs-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	max-width: 900px;
	margin-inline: auto;
}
.piyolabs-gallery__main figure.wp-block-image,
.piyolabs-gallery__thumb figure.wp-block-image {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: var(--wp--preset--color--card);
	border-radius: var(--wp--custom--radius--lg);
	border: 1px solid var(--wp--preset--color--border);
}
.piyolabs-gallery__main img,
.piyolabs-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.piyolabs-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
}
.piyolabs-gallery__thumb {
	cursor: pointer;
	border-radius: var(--wp--custom--radius--lg);
	border: 2px solid transparent;
	padding: 2px;
	transition: border-color 0.15s ease;
}
/* [fix/home-products-track2-and-gallery-grid、fix/rvas-desktop-gallery-
   return-to-initialで5枚化に合わせて訂正]
   .piyolabs-gallery__thumbs はwp:groupブロックに"layout"を明示していない
   (既定のflowレイアウト、WordPressコアがis-layout-flowクラスを付与する)
   ため、コアの既定blockGap機構(このファイル冒頭の.piyolabs-header__bar
   > * や下部「section間の余白(blockGap)の除去」節と同じ、PR #24-28
   以来この構成で繰り返し対処してきた問題と同じクラスのもの)により、
   DOM順で最初の.piyolabs-gallery__thumb以外の全て(2〜5枚目)へ
   margin-block-startが自動的に注入される。JS側が対応サムネイル不足を
   検知して合成する場合(assets/js/screenshot-gallery.jsの
   synthesizeMissingMainThumb)、合成した1枚は必ずサムネイル行の先頭
   (.piyolabs-gallery__thumbsのthumbsWrap.insertBefore(…,
   thumbsWrap.firstElementChild))へ挿入されるため、DOM順は常に
   「1枚目=合成分(合成が発生した場合)、2〜5枚目=既存(native)の
   サムネイル」であり、合成分が2〜5枚目側に来ることはない。
   (初期状態でどのサムネイルがis-active/aria-pressed="true"になるかは
   これとは別に、メイン画像と同じ画像を指すサムネイルをJS側が突き合わせて
   決定しており、挿入位置=DOM順とは独立している。詳細はscreenshot-
   gallery.jsのfindMatchingThumbIndexを参照。)
   この節は元々サムネイル4枚・2列×2行グリッドの時点で
   発見・対処したものだが(当時ConoHa実機で1枚目と2〜4枚目の外枠高さの
   差として実測、詳細はPR #32のコミット履歴参照)、今回のレイアウト変更
   (5枚・1行のみのグリッドへ)後は、5枚全員が同じ1本の行トラックを共有
   するため、CSS Gridの既定stretchにより外枠の高さ自体は仮にこの
   margin-block-start:0が無くても揃う(1枚目だけ短い行トラックになる、
   という2×2グリッド特有の不揃いはもう起こらない)。ただしmarginが
   残ったままだと2〜5枚目の中身(figure・キャプション)が1枚目より
   margin分だけ下にずれた状態のまま等しい高さの外枠に収まることになり、
   見た目上の天面が揃わない。このルールはその中身のずれを防ぐために
   今回のレイアウトでも変更せず残している。

   figureのaspect-ratio:3/2固定(このファイル上部の.piyolabs-gallery__
   main figure.wp-block-image, .piyolabs-gallery__thumb figure.wp-block-
   image ルール)により、5枚それぞれの画像部分の高さはこのmargin
   打ち消し以前から既に完全に揃っている(JS側で合成される分も既存
   サムネイルをcloneNodeして作るため、同じCSSクラス・同じマークアップ
   構造を持つ)。PCでは後述のメディアクエリで各説明文を非表示にするため、
   説明文用の固定heightやline-clampは持たせない。
   そのため必要な追加宣言はこのmargin-block-start:0のみと判断した。
     - height:100%やgrid-auto-rows:1frは、上記の通り5枚の内容自体が
       既に等しい高さのため追加効果が無く、採用しない。
     - align-items:stretchも明示しない。CSS Gridの既定値normalは、
       グリッドアイテム自身(.piyolabs-gallery__thumb)がaspect-ratioを
       持たない限りstretchと等価に振る舞うため(aspect-ratioは子孫の
       figureにのみ設定されており、.piyolabs-gallery__thumb自身には
       無い)、明示しても実質無変更。
     - box-sizing:border-boxも、この打ち消しには不要(paddingの2pxは
       5枚とも同一値であり、高さの不揃いの原因ではない)。

   .is-active切替時にこのルールは一切変化しないため、is-active
   トグルによる高さ変化は発生しない。hover/focus-visible/is-activeの
   境界線ルール(上のborder-color宣言群)、および3:2フレーム+
   object-fit:containのfigure/imgルールにも一切触れない。

   [未検証] 5枚化後の実測値は、このPRではNode組み込みのfetch/WebSocketで
   駆動するheadless Chromeフィクスチャ上でのみ確認しており(PR本文参照)、
   ConoHa実機での再測定はできていない。フィクスチャでの実測: 5枚とも
   外枠高さ180.8pxで完全一致(差0.00px、1440px幅)。ただしこのフィクスチャは
   テーマのstyle.cssのみを読み込み、WordPress本体のwp-block-library CSS
   (figure.wp-block-imageのUA既定margin: 1em 40pxを打ち消す0リセットを含む)
   を読み込んでいないため、メイン画像のfigure実測幅は820px(期待値900pxから
   left/right各40pxのUA既定marginぶん差し引かれた値、getComputedStyleで
   確認済み)だった。wp-block-library CSSが常にエンキューされる実際の
   WordPress環境では、この40px×2のmarginは(PR #32/#33が採用した既存の
   frame技法と同様に)core側で0にリセットされるため、実際のメイン画像幅は
   900px近辺(枠線1px×2を除く)になる想定だが、これもConoHa実機で未確認。 */
.piyolabs-gallery__thumbs > .piyolabs-gallery__thumb {
	margin-block-start: 0;
}
.piyolabs-gallery__thumb:hover {
	border-color: var(--wp--preset--color--brand);
}
.piyolabs-gallery__thumb.is-active {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--secondary);
}
.piyolabs-gallery__thumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

@media (max-width: 781px) {
	.piyolabs-gallery {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem;
		padding-bottom: 0.5rem;
		-webkit-overflow-scrolling: touch;
	}
	.piyolabs-gallery__main,
	.piyolabs-gallery__thumbs {
		display: none;
	}
	.piyolabs-gallery__mobile-item {
		flex: 0 0 85%;
		scroll-snap-align: center;
	}
	.piyolabs-gallery__mobile-item figure.wp-block-image {
		aspect-ratio: 3 / 2;
		overflow: hidden;
		background-color: var(--wp--preset--color--card);
		border-radius: var(--wp--custom--radius--lg);
		border: 1px solid var(--wp--preset--color--border);
	}
	.piyolabs-gallery__mobile-item img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}
@media (min-width: 782px) {
	/* PCでは縦方向の表示領域を抑えるため、メイン画像とサムネイルの
	   画像下の説明文を非表示にし、その固定高さもレイアウトから
	   完全に除外する。DOM上の文言は残し、モバイル表示には影響させない。 */
	.piyolabs-gallery {
		gap: 1rem;
	}
	.piyolabs-gallery__main > p,
	.piyolabs-gallery__thumb > p {
		display: none;
	}
	.piyolabs-gallery__mobile-item {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* ヘッダー (parts/header.html)                                        */
/* Next.js版 components/site/site-header.tsx / logo.tsx を唯一の正解と  */
/* して再現する。wp-adminの「ナビゲーション」投稿には一切依存せず、      */
/* ロゴ・ナビゲーション・モバイルメニュートグルはすべて                  */
/* wordpress-plugin/piyolabs-core/includes/shortcodes.php のショート    */
/* コードが組み立てる(「ヘッダー(parts/header.html)向けショートコード群」*/
/* セクション参照)。開閉状態はassets/js/header-nav.jsがis-openクラスの  */
/* 付け外しで切り替える。                                              */
/*                                                                    */
/* [Phase 2.1 / fix/header-responsive-foundation]                     */
/* デスクトップ/モバイルの境界は、旧実装のTailwind lg(1024px)を機械的に */
/* 流用せず、実際のロゴ+6ナビリンク(ja/en)+言語切替の必要幅を計算して   */
/* 1120px に決定した(算出根拠はPRの説明を参照)。コンテナ最大幅          */
/* (piyolabs-header__container/piyolabs-header-mobile-panelのcontentSize)*/
/* と同じ値に意図的に揃えている。                                      */
/* (スクリーンショットギャラリー節の781pxブレークポイントとは無関係)。   */
/* ------------------------------------------------------------------ */

/* sticky headerのcontaining block/実DOM構造について。

   [Phase 4 / fix/header-wrapper-sticky-and-rvas-icon-size 訂正]
   PR #18は「templates/*.html側のwp:template-part呼び出しから
   tagName:"header"を削除すればWordPressが生成する外側ラッパー要素
   自体が無くなる」という理解のもとで9テンプレート全てを修正したが、
   これは誤りだった。実際にはこのテーマのtheme.jsonがheaderテンプレート
   パートを"area":"header"で登録しているため、WordPress core側の
   render_block_core_template_part()は呼び出し側のtagName属性の有無に
   関わらず、登録されたエリアに対応するタグ(headerエリア→header要素)で
   常にラップする(area-tag fallback)。そのためPR #18適用後も実際の
   DOMは変わらず二重のheader要素のままであり、sticky要素の"stickできる
   範囲"を決めるcontaining blockの高さが実質ゼロになる不具合(ConoHa
   実機で「headerがスクロールで流れていく」)は解消されていなかった。

   このPRでは、このarea-tag fallbackを消せない前提を受け入れ、逆に
   WordPressが必ず生成するこの外側header要素そのものをsticky targetと
   して正式に採用する。9テンプレート全てのwp:template-part呼び出しに
   明示的に"tagName":"header","className":"piyolabs-site-header"を
   指定し(templates/*.html参照)、position:sticky/top/z-indexを次の
   .piyolabs-site-headerセレクタに対してのみ宣言する。parts/header.html
   自身の外側ブロックはもうheader要素を持たない(tagName削除・
   className を piyolabs-header__surface へ変更、詳細はparts/header.html
   側のコメント参照)ため、header要素はページ全体でここ1箇所のみになる。 */
.piyolabs-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	margin-block-start: 0;
}

/* ヘッダーバー本体(surface div): 半透明背景・backdrop-filter・下境界線。
   sticky位置指定は上の.piyolabs-site-header(実際のheader要素)側にのみ
   持たせ、このsurface div側には一切持たせない(sticky宣言は常に単一の
   要素にとどめ、外側/内側の両方に重複させない)。has-background-
   background-color クラスはWordPressコアが!important付きで背景色を
   指定するため、半透明背景で上書きするにはこちらも!importantが必要
   になる。 */
.piyolabs-header__surface {
	background-color: rgba(255, 255, 255, 0.9) !important; /* Next.js版 bg-background/90 の近似値(background=#ffffffのためrgba直書き) */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ログイン中の管理者/編集者がフロントエンドを閲覧する場合、WordPressコアが
   body要素に.admin-barクラスを付与し、ビューポート最上部に固定の管理者
   ツールバー(#wpadminbar、デスクトップ高さ32px/782px以下では46px、
   非常に高いz-index)を重ねて表示する。このヘッダーもtop:0でstickyに
   固定しているため、そのままでは管理者ツールバーの下に隠れる/重なって
   しまう。WordPressコア自身がbody.admin-bar時の固定要素に対して採用して
   いる標準的な対処(ツールバーの実高さぶんtopをずらす)にならい、
   ここでも同じブレークポイント(782px)で.piyolabs-site-headerのtopを
   オフセットする。 */
body.admin-bar .piyolabs-site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .piyolabs-site-header {
		top: 46px;
	}
}

/* ------------------------------------------------------------------ */
/* サイト全体のheader→main(および main→footer)間の隙間解消              */
/* (Phase 4A.7 / feat/global-shell-and-footer-parity)。                 */
/*                                                                      */
/* [背景] PR #27(feat/common-page-header-and-rvas-top-seam)は、           */
/* `body.piyolabs-has-page-header #piyolabs-main, #piyolabs-main.        */
/* piyolabs-rvas-page { margin-block-start: 0; }`(このファイル下部の      */
/* 「PageHeader対象ページのtarget/non-target CSS分岐」節参照)という        */
/* スコープ付きルールで、PageHeader対象6コンテキストとrVASページに限って   */
/* header直下の隙間を解消した。しかしホーム(front-page.html)や index/     */
/* 404/single-manual/single-resource等、このスコープに該当しない他の      */
/* テンプレートの<header>と<main>の間には、同種の隙間が残ったままだった    */
/* (テンプレート一式を確認した限り、front-page.htmlの<main id=            */
/* "piyolabs-main">を含め、#piyolabs-mainは全9テンプレート共通で           */
/* ルート直下に出力されており、PageHeader対象ページに限定される属性では    */
/* ない)。                                                               */
/*                                                                      */
/* [根本原因の理解・確信度] このファイル下部「1) section間の余白           */
/* (blockGap)の除去」節、およびPR #27の隙間修正コメントと同じ、静的な      */
/* コードリーディングに基づく判断であり、ConoHa実機・実ブラウザでの        */
/* 検証はできていない(【未検証】)。WordPressコアはブロックテンプレートの   */
/* ルートマークアップ全体を`<div class="wp-site-blocks">...</div>`で      */
/* ラップする(wp-includes/template.php の get_the_block_template_html()、 */
/* WordPress 5.9のフルサイト編集導入以来の中核実装として広く知られている   */
/* 挙動だが、WordPress本体のソース自体はこのリポジトリに同梱されておらず   */
/* 直接確認はできていない)。theme.jsonのstyles.spacing.blockGap(1.5rem)   */
/* は、このルートコンテナ直下の兄弟ブロック同士(<header>・<main>・        */
/* <footer>というtemplates/*.htmlのルートレベルの兄弟)にも、post-content  */
/* 内のsection同士と同じ:where()ラップされた自動margin-block-startとして  */
/* 適用されうる、というのがPR #27から引き継いだ仮説であり、このPRでは      */
/* その仮説を「PageHeader/rVASページに限らずサイト全体で起こりうる」       */
/* ものとして扱い、対応範囲を広げる。                                     */
/*                                                                      */
/* [対応方針] 「main全般」「section全般」に一律ゼロを当てるのではなく、    */
/* 実際に隙間が起こりうる直接の兄弟関係(header+main、main+footer)だけを   */
/* 直接子コンビネータ(>)と隣接兄弟結合子(+)の組み合わせでピンポイントに   */
/* 指定する。#piyolabs-main は全9テンプレート共通のid、.piyolabs-site-     */
/* header/.piyolabs-site-footer も全9テンプレート共通のクラス(前者は       */
/* 既存、後者はこのPRのPart 2で新規付与、templates/*.html・               */
/* parts/footer.html参照)のため、この2ルールだけでホームを含む全ページに   */
/* 一律に効く。                                                          */
/*                                                                      */
/* 負のmarginは使わない。header自身の高さ・sticky位置・admin-barオフセット */
/* ロジックには一切触れない(margin-block-start:0を隣接要素側に与える      */
/* だけで、header側のposition:sticky/top/z-index、.piyolabs-site-header   */
/* 自体のCSSは無変更)。mainがheaderの下に潜り込む(overlap/tuck)ことは     */
/* ない(marginを0にするだけで、位置をずらしたり負の値にしたりはしない     */
/* ため)。                                                               */
/*                                                                      */
/* PR #27のPageHeader/rVAS専用ルール(下部「PageHeader対象ページの         */
/* target/non-target CSS分岐」節)は、このサイトワイドなルールと対象が      */
/* 重複することになるが、削除はせずそのまま残す(片方が実機で何らかの       */
/* 理由で効かなくてももう片方が効く、defense-in-depth。テスト結果に        */
/* 差分が出なければ、あえて統合・削除する積極的な理由も無いと判断した)。   */
/* ------------------------------------------------------------------ */
.wp-site-blocks > .piyolabs-site-header + #piyolabs-main {
	margin-block-start: 0;
}
.wp-site-blocks > #piyolabs-main + .piyolabs-site-footer {
	margin-block-start: 0;
}

/* ヘッダー本体・モバイルパネルの水平方向のボックスモデル補助。
   実際の左右padding(Next.js版Containerと同等: 16px/24px)は、この2つの
   セレクタ自身には存在しない。詳細は次のとおり。

   [Phase 2.3 / fix/header-responsive-foundation 訂正]
   以前のコメントは、"align":"full"がheader自身をroot-padding-aware-
   alignments(.has-global-padding付与)の対象から除外する、という誤った
   理解に基づいており、そのためこの2セレクタに独自のpadding-left/right
   (1rem、640px以上で1.5rem)を明示し、それを唯一の水平padding発生源だと
   説明していた。この理解はレビューにより誤りと判明した。

   実際のWordPressの挙動は、"layout":{"type":"constrained"}を持つ
   ブロックに.has-global-paddingクラスを付与し、対応するCSSルールが
   theme.json由来のCSSカスタムプロパティ(--wp--style--root--padding-
   left/right、このファイル640px以上のオーバーライド参照)経由で
   padding-left/rightを"そのブロック自身"に直接適用する、というもの。
   "align":"full"は別の独立した機構(ビューポート全幅化+alignfullな
   子孫のためのnegative-margin脱出)であり、align:fullとlayout:
   constrainedを同時に持つブロック自身から.has-global-padding資格を
   奪うものではない。

   parts/header.htmlの.piyolabs-header__surface(外側group、[Phase 4]
   でtagName:"header"を外しdivになった。詳細はheader.html側のコメント
   参照)は"align":"full"と"layout":{"type":"constrained"}を意図的に
   両方持たせており、この要素自身が.has-global-paddingによる左右padding
   (16px/640px以上24px)を直接受け取る唯一の発生源になっている。そのため、
   その子孫である下のpiyolabs-header__container/piyolabs-header-mobile-
   panelには独自のpadding-left/rightを一切持たせない(surface divが
   既に持つpadding済みの内側スペースを継承するだけでよいため)。
   box-sizing:border-boxのみ、将来的な境界線・paddingの追加に備えた
   ボックスモデルの安全策として残す。 */
.piyolabs-header__container,
.piyolabs-header-mobile-panel {
	box-sizing: border-box;
}

/* ヘッダーバー(ロゴ/デスクトップナビ/モバイルトグルの横並び行)。
   以前はこのグループのwp:group自体が"layout":{"type":"flex",...}を
   宣言し、WordPressが自動生成する.is-layout-flexクラス+それに紐づく
   グローバルCSS(display:flexをサイト全体に強制、メディアクエリなし)に
   依存していた。これがstyle.css側の.piyolabs-header-nav-desktopの
   display:noneをカスケードで上書きし、モバイルでもデスクトップナビが
   消えない不具合(症状3/4)の原因だった。parts/header.html側は
   "layout":{"type":"default"}(WordPress生成のdisplay強制CSSを一切
   出さないプレーンなflowレイアウト)に変更済みで、実際の横並びflex挙動は
   ここで完全に自前定義する。WordPressのレイアウトシステムには一切
   依存しない。 */
.piyolabs-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	gap: 1rem;
}
/* flowレイアウト("layout":{"type":"default"})は既定でWordPressが
   子要素間にmargin-block-start(theme.json直下のstyles.spacing.blockGap
   由来、既定1.5rem)を注入する。header.html側でこのグループの
   spacing.blockGapを"0"に明示して無効化済みだが、念のための保険として
   ここでも直接の子要素のmarginを明示的に0にリセットしておく
   (横並びflexである以上、縦方向マージンは不要なため)。 */
.piyolabs-header__bar > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* ロゴ。中身は単一の<img>のみ(ロゴ画像自体には2行折り返しの概念がなく、
   flex-shrink:0でヘッダーバー内で縮まないようにするだけでよい)。 */
.piyolabs-header-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}
.piyolabs-header-logo__image {
	display: block;
	height: 2rem;
	width: auto;
}

/* デスクトップ用ナビ+言語切替のまとまり(1120px未満は非表示)。
   Bug 1(WordPressの.is-layout-flexグローバルCSSがdisplay:noneを
   上書きしていた不具合)の再発防止の保険として、この表示/非表示の
   2つの宣言(このルールと直下の.piyolabs-header-menu-toggleの
   対応ルール)に限定して!importantを付与する
   (「必要なら限定的にimportantを使用する」の合意に基づく、
   相互排他なshow/hide宣言以外にはimportantを広げない)。
   ブレークポイント値は.piyolabs-header-menu-toggle側と必ず同じ数値を
   使うこと(表示・非表示が同時に起きたり、両方消えたりする幅が
   生まれないようにするための構造的保証)。 */
.piyolabs-header-nav-desktop {
	display: none !important;
	align-items: center;
	flex-wrap: nowrap;
	gap: 1rem;
}
@media (min-width: 1120px) {
	.piyolabs-header-nav-desktop {
		display: flex !important;
	}
}

/* ナビゲーションリンク本体([piyolabs_header_nav]ショートコード出力)。
   デスクトップ/モバイルで見た目が異なるため、親クラス
   (.piyolabs-header-nav--desktop / --mobile)で出し分ける。 */
.piyolabs-header-nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.piyolabs-header-nav__link {
	display: inline-flex;
	align-items: center;
	border-radius: var(--wp--custom--radius--md);
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.piyolabs-header-nav--desktop .piyolabs-header-nav__link:hover {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
}
.piyolabs-header-nav--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.piyolabs-header-nav--mobile .piyolabs-header-nav__link {
	min-height: 2.75rem;
	padding: 0 0.5rem;
	font-size: 16px;
	color: var(--wp--preset--color--foreground);
}
.piyolabs-header-nav--mobile .piyolabs-header-nav__link:hover {
	background-color: var(--wp--preset--color--muted);
}

/* モバイルメニュートグルボタン(ハンバーガー⇄×、1120px未満のみ表示、
   タップ領域2.75rem四方)。ブレークポイントは.piyolabs-header-nav-desktop
   と同じ1120pxで揃える(上記コメント参照)。同じ理由で表示/非表示の
   2宣言に限定して!importantを付与する。 */
.piyolabs-header-menu-toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: none;
	border-radius: var(--wp--custom--radius--md);
	background: transparent;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
}
@media (min-width: 1120px) {
	.piyolabs-header-menu-toggle {
		display: none !important;
	}
}
.piyolabs-header-menu-toggle__icon {
	width: 1.5rem;
	height: 1.5rem;
}
.piyolabs-header-menu-toggle__icon--close {
	display: none;
}
.piyolabs-header-menu-toggle.is-open .piyolabs-header-menu-toggle__icon--open {
	display: none;
}
.piyolabs-header-menu-toggle.is-open .piyolabs-header-menu-toggle__icon--close {
	display: block;
}

/* モバイルメニューパネル(既定は非表示、is-openクラスが付いた時のみ表示。
   1120px以上ではis-openが付いていても常に非表示に強制する
   =Next.js版のlg:hiddenに相当)。デスクトップナビ/トグルボタンと同じ
   1120pxブレークポイントに揃える(必須要件ではないが、一貫性のため)。 */
.piyolabs-header-mobile-panel {
	display: none;
	flex-direction: column;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--background);
}
.piyolabs-header-mobile-panel.is-open {
	display: flex;
}
@media (min-width: 1120px) {
	.piyolabs-header-mobile-panel.is-open {
		display: none;
	}
}
.piyolabs-header-mobile-panel__lang {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ------------------------------------------------------------------ */
/* rVASアプリアイコン                                                  */
/* (Phase 3 / fix/sticky-header-and-rvas-icon-shape、                   */
/*  Phase 4 / fix/header-wrapper-sticky-and-rvas-icon-size で60px化)     */
/*                                                                    */
/* トップ/rVAS/Apps/Aboutの各ページで「rVAS」「VAS計測」等の見出し・     */
/* 段落の直前に置かれる小さなrvas-icon.png(10箇所)は、旧デザインでは    */
/* inline styleでborder-radius:9999px(完全な円形)を持っていた。         */
/* 製品要件は角丸正方形(Next.js版rounded-2xl相当)であり、                */
/* 円形は誤りだった(Phase 3で解消済み)。                                */
/*                                                                    */
/* [Phase 4] さらにアイコンは1.5rem/2rem/2.25rem/2.5rem(24-40px)という   */
/* 4種類のばらばらな小サイズで使われていたが、製品要件によりiPhone       */
/* ホーム画面アプリアイコンのスケール感に近い60px×60pxの固定サイズへ     */
/* 統一する。ここでいう60pxはあくまで論理(CSS)ピクセル基準の目安値で     */
/* あり、実機の物理サイズ(mm)をデバイス・ピクセル密度・ブラウザズーム    */
/* をまたいで正確に再現すると主張するものではない。                     */
/*                                                                    */
/* この修正は引き続き2トラックで構成される。                            */
/*                                                                    */
/* Track 1(将来/新規インポート向け): wordpress-plugin/piyolabs-importer/*/
/* includes/content-data/pages-ja.php・pages-en.phpの該当10箇所の        */
/* inline width/heightを60px/60pxへ更新済み(class="piyolabs-rvas-app-  */
/* icon"は既にPhase 3で付与済み)。これは今後新規にインポート(新規WP     */
/* 環境構築、または将来的な理由での本番再インポート)した場合にのみ      */
/* 効果を持つ。                                                        */
/*                                                                    */
/* Track 2(このCSSルール、実際にConoHa本番の既存ページへ効かせる本体):  */
/* importer側の safe_update は、管理者がwp-adminで「本番インポート実行」*/
/* を手動で再実行しない限り、既にDBへ保存済みのpost_contentを書き換え   */
/* ない。つまりTrack 1だけでは、コードをデプロイしただけでは既存の      */
/* ConoHaページの見た目は一切変わらない(製品要件により再インポートは   */
/* 必須にできない)。そこで、新旧どちらのマークアップにも実レンダリング  */
/* 時に効くCSSルールとして、new class(.piyolabs-rvas-app-icon)と        */
/* 旧マークアップ用のsrc部分一致セレクタ(img[src*="rvas-icon"])の       */
/* 両方をここで指定する。src*="rvas-icon"は、WordPressのメディアURL     */
/* (ファイル名重複時の-1/-2サフィックスやsrcset由来の-150x150等の       */
/* レスポンシブサイズサフィックスが付いても)常に"rvas-icon"という       */
/* 部分文字列を含むことを根拠にした、後方互換のための緩いフォールバック  */
/* セレクタ(wordpress-plugin/piyolabs-importer/includes/content-data/   */
/* media-ja.php・media-en.phpのtarget_name一覧を確認済み、"rvas-icon"を */
/* 部分文字列に持つ他の画像ファイル名は存在しない)。                    */
/* width/height/border-radiusの!importantは、旧・既存インポート済み     */
/* コンテンツがinline styleでこれらのプロパティを持っており(旧サイズの  */
/* width/height、border-radius:9999px)、inline styleは通常どのような    */
/* 外部スタイルシートの詳細度よりも強いため、それに打ち勝つために        */
/* 必要(このファイル内でこの用途以外に!importantを広げないこと)。      */
/*                                                                    */
/* max-width:noneは、サイト全体のオーバーフロー安全策(本ファイル内の    */
/* img,video,iframe { max-width:100% } ルール)からこの要素だけを        */
/* 意図的に除外する。60px固定という明示サイズを本要素に対しては安全と    */
/* 判断した根拠: 実際の10箇所いずれも見出し/段落の直前にテキストと      */
/* 並んで置かれるだけであり、幅390pxのビューポート(左右パディング       */
/* 16px、実効幅358px)でも「rVAS」(4文字)・「VAS計測」/「VAS               */
/* Measurement」程度のテキストと60pxアイコン+隙間を合わせても余裕を     */
/* 持って収まる(独立して検証。テキストが極端に長い将来のコンテンツ変更  */
/* があった場合はこの前提が崩れる可能性があるため、その際は改めて確認   */
/* が必要)。                                                           */
/*                                                                    */
/* [fix/sticky-header-and-rvas-icon-shape 由来: 固定rem値 → %指定]       */
/* border-radiusは固定長ではなく要素幅に対する相対値(22%)を採用して     */
/* いる。旧実装は複数の固定サイズを使っていたため相対値が必須だったが、  */
/* Phase 4で60px単一サイズに統一した後も同じ22%指定を維持している       */
/* (値を変える理由が無いため。App Storeアイコン風の「丸すぎない角丸     */
/* 正方形」に近い見た目)。 */
.piyolabs-rvas-app-icon,
img[src*="rvas-icon"] {
	width: 60px !important;
	height: 60px !important;
	max-width: none;
	object-fit: cover;
	border-radius: 22% !important;
	flex: 0 0 60px;
	display: inline-block;
	vertical-align: middle;
}

/* 「VAS計測」/「VAS Measurement」小段落ケース(has-small-font-sizeの
   14px本文)専用の追加レイアウト調整。

   このアイコンが使われる10箇所のうち4箇所は見出し(h1/h2/h3)で、
   theme.jsonのフォントサイズプリセットではh1が36-48px・h2が28-32px・
   h3が18-20pxである。60pxアイコンはこれらの見出しフォントサイズより
   大きいが、インライン画像がテキストの行の高さより高い場合、ブラウザは
   その行のline boxをインライン画像の高さに合わせて自動的に押し広げる
   のがCSSインライン整形の標準動作であり、テキストを潰したり画像と
   重ねたりすることはない。vertical-align:middle(上のルールに追加済み、
   かつcontent-data側のinline styleにも指定済み)でアイコンとテキストの
   視覚的な中心を合わせれば、見出し4箇所は追加のCSSなしで意図した見た目
   になる。

   一方、残り1箇所(段落"VAS計測"/"VAS Measurement")は14pxの小さい本文
   フォントサイズに対して60pxアイコンが極端に大きく、vertical-align:
   middle頼みでは行が不自然に間延びし、アイコンとテキストの左右バランス
   も崩れる。ここでは「アイコン+テキストの横並びrow」に変える必要がある
   (製品要件: "a natural product-header-style row")。

   このp要素は新規インポート分・ConoHa本番の既存post_contentのいずれも
   「imgの直後に裸のテキストノードが続くだけ」という構造(テキストを
   囲むwrapper要素が無い)であり、DOM構造を書き換えられない既存データに
   対してCSSだけで対応する必要がある。CSS :has()セレクタでアイコンを
   含むp要素自体を検出してdisplay:flexにすれば、裸のテキストノードは
   CSS仕様上flexコンテナの直接の子になった時点で自動的に匿名flex
   アイテムとして扱われるため、追加のwrapper要素なしに新旧どちらの
   マークアップに対しても同一のCSSだけでflex row化できる。:has()は
   Chrome/Edge 105+・Safari 15.4+・Firefox 121+ で利用可能であり、
   このプロジェクトが対象とする現行evergreenブラウザでは実用上問題ない
   と判断した。

   [訂正] :has(> .piyolabs-rvas-app-icon) だけを唯一のセレクタとしていた
   版には不具合があった。このクラスはTrack 1(content-data/pages-ja.php・
   pages-en.php)でPhase 3以降にのみ付与されたものであり、上の
   .piyolabs-rvas-app-icon, img[src*="rvas-icon"] ルールの説明と同じ理由
   により、ConoHa本番へ既にインポート済みの古いpost_contentはこの
   クラスを持たない(imgにclass属性自体が無い、旧マークアップ)。その
   結果、クラスベースのセレクタだけでは実機の該当p要素がdisplay:flexに
   ならず、60px化されたアイコンがinline margin-right:0.4remを保持した
   まま14pxテキストへそのまま埋め込まれ、この修正がそもそも解消しようと
   していた崩れた見た目が再現してしまっていた(実機での不具合として指摘
   済み)。そのため、ここでも上のwidth/height/border-radiusルールと同じ
   src部分一致の後方互換セレクタ(img[src*="rvas-icon"])をpの直接の子に
   対して追加し、new class(.piyolabs-rvas-app-icon)を持つ新規マークアップと
   class無しの旧マークアップの両方を独立して:has()に照合させる。 */
p:has(> .piyolabs-rvas-app-icon),
p:has(> img[src*="rvas-icon"]) {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* content-data側のinline style(旧マークアップは margin-right:0.4rem、
   新マークアップも将来同種の値を持ち得る)がgapと二重に効いて間隔が
   意図せず広がらないよう、このflex row内でのみinline margin-rightを
   打ち消す。inline styleに勝つためにはここでも!importantが必要
   (このセレクタは.piyolabs-rvas-app-iconまたはimg[src*="rvas-icon"]を
   含むpの直接の子img限定に絞っており、他の場所のmargin-rightには一切
   影響しない)。上のdisplay:flexルールと同じく、新マークアップ
   (.piyolabs-rvas-app-icon)・旧マークアップ(img[src*="rvas-icon"])の
   両方に対してそれぞれ独立してmargin-right:0を効かせる必要がある。 */
p:has(> .piyolabs-rvas-app-icon) > .piyolabs-rvas-app-icon,
p:has(> img[src*="rvas-icon"]) > img[src*="rvas-icon"] {
	margin-right: 0 !important;
}

/* ------------------------------------------------------------------ */
/* 言語切替 (shortcodeブロック経由で出力される要素の見た目)              */
/* ------------------------------------------------------------------ */
.piyolabs-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.125rem;
	font-size: 0.75rem;
	font-weight: 500;
}
.piyolabs-lang-switcher a,
.piyolabs-lang-switcher span {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--muted-foreground);
}
.piyolabs-lang-switcher a:hover {
	color: var(--wp--preset--color--foreground);
}
.piyolabs-lang-switcher .piyolabs-lang-current {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary-foreground);
}

/* ------------------------------------------------------------------ */
/* サイト全体の左右パディング(root-padding-aware-alignments)           */
/* [Phase 2.1 / fix/header-responsive-foundation]                     */
/*                                                                    */
/* Bug 2: theme.json の styles.spacing に padding キー自体が存在せず、  */
/* useRootPaddingAwareAlignments:true が設定されていても実際には        */
/* 左右パディングが一切生成されていなかった(=画面幅が1120pxを下回ると、 */
/* 制約幅コンテンツが画面端に直接接触していた)。theme.json側で         */
/* styles.spacing.padding.left/right を "1rem"(16px)に設定した        */
/* (これがWordPressの --wp--style--root--padding-left/right という     */
/* CSSカスタムプロパティとして出力される)。theme.json自体は            */
/* ブレークポイント条件付きの値を表現できないため、640px以上でのみ      */
/* 24px に引き上げるオーバーライドをここに追加する。これは              */
/* WordPress公式に説明されているroot padding をレスポンシブにする       */
/* 手法(theme.jsonで基準値を設定し、CSS側でカスタムプロパティ自体を    */
/* メディアクエリ内で上書きする)。 */
@media (min-width: 640px) {
	body {
		--wp--style--root--padding-left: 1.5rem;
		--wp--style--root--padding-right: 1.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* サイト全体のオーバーフロー安全策                                     */
/* [Phase 2.1 / fix/header-responsive-foundation]                     */
/* 実機(ConoHa)でページ全体がモバイル崩れするという報告を受け、         */
/* コンテナ/パディング/オーバーフロー防止の"土台"のみを対象に追加する   */
/* (配色・余白・タイポグラフィ・レイアウトそのもののデザイン変更は      */
/* このPRの範囲外)。html/bodyへのoverflow-x:hiddenは、実際の           */
/* オーバーフロー原因を隠してposition:stickyを壊しうる最終手段であり、  */
/* ここでは追加しない(具体的なオーバーフロー原因が見つからなかった     */
/* ため、最終手段自体が不要だった)。 */
img,
video,
iframe {
	max-width: 100%;
	height: auto;
}
/* このテーマは現状どのテンプレート/パターンでもcore/tableブロックを
   使っていない(wordpress-theme/piyolabs/templates・patterns配下を
   grep済み、0件)。WordPressコア自体がcore/tableブロックにどの程度の
   オーバーフロー対策CSSを標準搭載しているかはこの環境(WP本体のソースが
   手元にない)では確認できなかったため、将来使われた場合の保険として
   明示的に指定しておく(コアの挙動と重複しても害はない)。 */
.wp-block-table table {
	display: block;
	overflow-x: auto;
}
.wp-block-buttons {
	flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* アンカー着地位置のsticky header分オフセット (scroll-margin-top)       */
/* [Phase 5A.1 / fix/sticky-header-anchor-offset]                      */
/*                                                                    */
/* サポートページ等の [piyolabs_link target='support' anchor='faq']    */
/* (PR #20 由来のリンク解決ショートコード)や、それ以外の素の              */
/* href="#faq" 的な同一ページ内アンカーリンクをクリックすると、対象の    */
/* 見出しがビューポート最上部にジャンプする。しかしheaderは              */
/* position:sticky(.piyolabs-site-header、本ファイル上部参照)で常に     */
/* ページ内容の上に重なっているため、ジャンプ直後は見出しの上部が        */
/* headerの下に隠れてしまう(FAQに限らず、#contact/#pricing/#usage等    */
/* main内の全アンカー対象で同じ問題が起きる)。                          */
/*                                                                    */
/* JavaScriptを一切使わず、CSSのscroll-margin-topだけで解決する。        */
/* 値はheaderの実際の高さを本ファイル内の実測CSS値から積み上げて         */
/* 算出したものであり、目分量ではない(算出根拠はPRの説明を参照)。        */
/*                                                                    */
/* [デスクトップ(1120px以上、.piyolabs-header-nav-desktopが表示される時)]*/
/* .piyolabs-header__barの上下padding(0.75rem=12pxずつ、本ファイル上部  */
/* の.piyolabs-header__bar参照)に対し、中身の候補のうち最も高いものは    */
/* .piyolabs-header-nav__link(ナビリンク)である。                       */
/*   ロゴ画像(.piyolabs-header-logo__image): height: 2rem = 32px         */
/*   ナビリンク: 上下padding 0.5rem×2=16px                              */
/*     + font-size 0.875rem(14px)×行間1.9(theme.json styles.typography.*/
/*       lineHeight、サイト全体の既定値。ナビリンク/言語切替とも独自の   */
/*       line-height指定を持たないため継承される)=26.6px                */
/*     → 16px + 26.6px = 42.6px                                        */
/*   言語切替ピル(.piyolabs-lang-switcher): 外側border 1px×2+padding   */
/*     0.125rem×2(4px)+内側a/spanのpadding 0.25rem×2(8px)              */
/*     +font-size 0.75rem(12px)×1.9=22.8px → 6px+8px+22.8px=36.8px    */
/*   → 42.6px(ナビリンク)が最大。                                       */
/* header総高さ = padding-top(12px) + padding-bottom(12px)              */
/*   + 中身42.6px + border-bottom 1px(.piyolabs-header__surface参照)   */
/*   = 67.6px                                                          */
/*                                                                    */
/* [モバイル(1120px未満、ハンバーガートグルが表示される時)]              */
/* このとき.piyolabs-header-nav-desktopはdisplay:noneのため、           */
/* .piyolabs-header__bar内に残る中身はロゴとメニュートグルのみ。         */
/* メニュートグル(.piyolabs-header-menu-toggle): 2.75rem×2.75rem固定    */
/*   =44px四方(ロゴのワードマーク行の高さ約34.2pxより大きい)。           */
/* header総高さ = 12px + 12px + 44px + 1px = 69px                       */
/*                                                                    */
/* どちらも「headerに隠れない最低限の値」であり、見出し上に少し余白が   */
/* 残るよう+0.75rem(12px、要件の0.5rem〜1remの中間)を上乗せする。        */
/* デスクトップ: 67.6px + 12px = 79.6px → 安全側に切り上げて5rem(80px)。 */
/* モバイル: 69px + 12px = 81px = 5.0625rem(端数無しの値のためそのまま)。*/
/*                                                                    */
/* ユーザー提案値(4.5rem/5.25rem)との比較: 実測に基づく上記の値は        */
/* それぞれ5rem(80px)/5.0625rem(81px)となり、提案値の72px/84pxとは      */
/* 差がある。方向性(モバイル側がわずかに大きい)は一致するが、提案値は   */
/* 目安・概算であったと考えられる(本計算はborder-bottomの1pxや、        */
/* line-height 1.9がナビリンク/言語切替へ継承される点まで含めて          */
/* 積み上げた実測値であり、提案値がどの数値をどう見積もったかまでは      */
/* 逆算できないため、差の原因を断定はしない)。                          */
/*                                                                    */
/* #piyolabs-main はtemplates/*.html全9テンプレートのmain要素に共通で   */
/* 付与されているid(本ファイル冒頭のヘッダー節コメントとは別に、        */
/* wordpress-theme/piyolabs/templates/*.html参照)。ここへスコープする  */
/* ことで、header/footer内部が独自に持つid(例: 上のparts/header.html   */
/* にある#piyolabs-header-mobile-menu)を意図せず巻き込まない。          */
/* :where()で括り、詳細度をid結合子そのもの以上に上げないようにする     */
/* (他により詳細度の高いscroll-margin-top宣言と衝突しないため。         */
/* 本ファイル内に同種の宣言が他に無いことは確認済み)。                  */
/*                                                                    */
/* body.admin-bar時の32px/46px/782pxは、本ファイル内の既存の            */
/* body.admin-bar .piyolabs-site-header{top:32px}(782px以下は46px)と    */
/* 同じ理由(WordPressコア管理者ツールバーの実高さぶんのオフセット)を    */
/* そのまま踏襲する。 */
:root {
	--piyolabs-anchor-offset: 5rem;
}

@media (max-width: 1119px) {
	:root {
		--piyolabs-anchor-offset: 5.0625rem;
	}
}

#piyolabs-main :where([id]) {
	scroll-margin-top: var(--piyolabs-anchor-offset);
}

body.admin-bar #piyolabs-main :where([id]) {
	scroll-margin-top: calc(var(--piyolabs-anchor-offset) + 32px);
}

@media (max-width: 782px) {
	body.admin-bar #piyolabs-main :where([id]) {
		scroll-margin-top: calc(var(--piyolabs-anchor-offset) + 46px);
	}
}

/* ------------------------------------------------------------------ */
/* ホームヒーロー (Phase 4A / feat/phase4a-hero-parity)                  */
/* Next.js版 components/site/hero.tsx・components/site/vas-mock.tsx との */
/* デザイン差分のうち、次の3点だけを対象にした修正。                     */
/* rVAS紹介セクション(rvas-intro)以下は対象外(別タスク)。                */
/*                                                                    */
/* スコープ用セレクタの前提(レビュー後に全面差し替え):                   */
/*   .piyolabs-home-hero … ヒーローの最上位<section>に直接付与する専用   */
/*                       クラス(patterns/hero-home.php・content-data/   */
/*                       pages-ja.php・pages-en.phpの3箇所)。新規       */
/*                       インポート・パターン挿入で作られるヒーロー      */
/*                       (Track 1)は常にこのクラスを持つため、第一選択の */
/*                       セレクタとして使う。                            */
/*   body.home #piyolabs-main > .wp-block-post-content >                */
/*   section:first-of-type … 既にConoHaへインポート済みで.piyolabs-      */
/*                       home-heroクラスを持たない古いpost_content       */
/*                       (Track 2)向けのフォールバック。                 */
/*                       body.home … WordPressコアがis_front_page()時に  */
/*                       body要素へ自動付与するクラス(wp-includes/       */
/*                       post-template.php get_body_class()参照)。      */
/*                       #piyolabs-main … 全9テンプレート共通のmain要素  */
/*                       id(このファイル上部のアンカーオフセット節と同じ */
/*                       前提)。                                        */
/*                       > .wp-block-post-content … core/post-content    */
/*                       ブロック(templates/front-page.htmlの            */
/*                       <!-- wp:post-content /-->)がレンダリングする    */
/*                       ラッパー要素に付与される固定クラス名(WordPress  */
/*                       コアのrender_block_core_post_content()が        */
/*                       'entry-content wp-block-post-content ...'を     */
/*                       クラスとして持つ<div>を1つだけ出力する)。       */
/*                       #piyolabs-mainの直下の子はこの<div>1つだけなので */
/*                       直接子コンビネータ(>)で安全に絞れる。            */
/*                       > section:first-of-type … その中で最初に現れる  */
/*                       section要素は常にヒーロー自身(本文の一番上に    */
/*                       置かれる構成はTrack 1/Track 2で変わっていない)。 */
/*                       旧セレクタ`body.home #piyolabs-main             */
/*                       section:first-of-type`(直接子指定なし)は、      */
/*                       将来#piyolabs-mainの直下に別の中間要素が増えた   */
/*                       場合でもsection:first-of-typeという子孫指定の   */
/*                       広さゆえに意図しない要素まで拾う恐れがあったため、*/
/*                       直接子チェーンで絞ったこのセレクタに置き換えた。 */
/*                                                                    */
/* 【未検証】core/post-contentが実際に'wp-block-post-content'クラスを     */
/* 持つ<div>1つだけを#piyolabs-mainの直下に描画すること自体は、           */
/* WordPressコア(wp-includes/blocks/post-content.php)のrender_block_    */
/* core_post_content()の実装に基づく判断であり、このリポジトリには        */
/* WordPress本体のソースが同梱されていないため、静的なコードの読解のみで  */
/* 確認した内容(実際にレンダリングして確認したものではない)。Polylangの  */
/* 言語別フロントページ解決を含め、ConoHa実機・実ブラウザでのbody.home    */
/* クラス・.wp-block-post-contentクラスの実出力(ja/en双方)・見た目は     */
/* 本セッションでは確認できていない。デプロイ後、`/`と`/en/`双方の        */
/* ページソースで<body>要素にhomeクラスが、#piyolabs-main直下の<div>に    */
/* wp-block-post-contentクラスが付いているか、下記1・3の見た目           */
/* (アクセントバー・タブレット幅での縦積み)を目視確認すること。           */
/*                                                                    */
/* [feat/unify-rvas-screenshot-frame で撤去] 上記「次の3点」のうち        */
/* 2)ヒーロー画像の「端末フレーム」は、Next.js版vas-mock.tsx(VasMock)を   */
/* 枠なし表示(画像自体にrounded-2xlの角丸だけを適用)へ簡素化したのに      */
/* 合わせ、このPRで対応するCSS(旧classNameのpiyolabs-hero-frame及びその   */
/* Track 2フォールバック)を全面撤去した。ホーム・rVAS両ページ、JA/EN両     */
/* ロケールで画像の見た目を統一する取り組みの一環(詳細はrVAS Hero画像の   */
/* 角丸節・content-data/pages-ja.php・pages-en.php・                     */
/* patterns/hero-home.php側の変更を参照)。1)アクセントバー・              */
/* 3)ブレークポイント調整はこのPRの対象外でそのまま有効。 */
/* ------------------------------------------------------------------ */

/* 1) ヒーロー最上部の4px(0.25rem)黄色(--highlight)アクセントバー。
   Next.js版 <div className="absolute inset-x-0 top-0 h-1 bg-highlight" /> に相当。
   Tailwindのh-1は0.25rem(4px)であり、h-px(1px)ではない点に注意
   (レビューにより1px表記の誤りを訂正)。
   Track 1は.piyolabs-home-heroクラスで、Track 2は直接子チェーンの
   フォールバックセレクタで、それぞれ同じ見た目になるようにする。 */
.piyolabs-home-hero,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type {
	position: relative;
}
.piyolabs-home-hero::before,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 0.25rem;
	background-color: var(--wp--preset--color--highlight);
	pointer-events: none;
}

/* 1.5) ヒーローのアクセントバーのfull-bleed化 (Phase 4A.2 /
   feat/phase4a-hero-full-bleed。Phase 4A.4でヒーロー「背景」側のルールは
   下記の「サイト共通セクション背景のfull-bleed化」節に統合・撤去した)。

   [Phase 4A.4 / feat/sitewide-section-background-full-bleed での統合]
   このブロックには元々、ヒーローの薄い水色(surface)背景と黄色
   アクセントバーの両方をfull-bleed化するbox-shadow/clip-pathルールが
   あった。今回のPRでヒーロー以外の背景付きトップレベルsectionにも同じ
   full-bleed処理をサイト共通で適用するにあたり、ヒーローの<section>自体も
   Track 1側でpiyolabs-full-bleed-sectionクラスを追加で持つようになった
   (patterns/hero-home.php・content-data/pages-ja.php・pages-en.php)。
   その結果、下記「サイト共通セクション背景のfull-bleed化」節の
   `.piyolabs-full-bleed-section.has-surface-background-color`
   （Track 1）・
   `#piyolabs-main > .wp-block-post-content > section.wp-block-group.has-surface-background-color`
   （Track 2、旧ConoHaインポート済みのヒーローも当時からhas-surface-
   background-colorクラスを持っていたため、alignfullクラスの有無に
   関わらずこの構造セレクタにマッチする)が、ヒーローの背景にも
   自動的にマッチするようになった。よって、ここに個別にあった
   .piyolabs-home-hero / body.home #piyolabs-main > .wp-block-post-content
   > section:first-of-type 向けの背景box-shadow/clip-pathルール(surface
   色)は、サイト共通ルールと完全に重複するため撤去し、サイト共通ルール
   1本に一本化した(最終的な見た目・CSSの効果は変わらない。詳細な採用
   技術・:not(.alignfull)ガード撤廃の経緯は、下の共通ルール側の
   コメントを参照)。

   アクセントバー(黄色・highlight色)のfull-bleed化は、他のどのセクションも
   持たないヒーロー専用の装飾であるため、このブロックに残したまま変更して
   いない。 */
.piyolabs-home-hero::before,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type::before {
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--highlight);
	clip-path: inset(0 -100vmax);
}

/* ------------------------------------------------------------------ */
/* サイト共通セクション背景のfull-bleed化 (Phase 4A.4 /
   fix/sitewide-section-background-full-bleed)。

   PR #24(Phase 4A.2/4A.3)では、ホームHeroセクションの背景・アクセント
   バーだけをfull-bleed化した。しかしサイト内には、背景色付きの
   トップレベルsectionがHero以外にも複数存在する(このPR #25適用当時の
   ホームは、ProductsShelf・Principles・Support、/rvasページのHero・機能・
   スクリーンショットギャラリー・料金、Aboutページの「大切にしていること」・
   「現在の製品」、Supportページの「rVASの操作を知る」・「お問い合わせ」、
   rVASマニュアルトップの3カード導線セクション)。これらは従来、背景色が
   1120px(theme.json settings.layout.contentSize)のコンテンツ幅で止まって
   おり、画面の広い場面では左右に白い余白が残っていた。このPRでは、
   「post-content直下の直接の子であり、tagName:sectionであり、
   backgroundColorを持つ」トップレベルsectionだけを対象に、Hero同様の
   full-bleed処理をサイト共通で適用する(ネストしたカード・「Coming soon」
   ラベル・ボタン・FAQ項目・ヘッダー/フッター・法的文書本文などは対象外。
   詳細な対象一覧はPR説明を参照)。

   [Phase 4A.5 / fix/home-section-rhythm-and-tones での訂正] 上記の
   ホーム構成一覧は本PR(#25)適用当時のものである。後続のPhase 4A.5で、
   ホームのセクションリズム(不要な白い隙間)と交互背景の分かりにくさを
   解消するため、ホームのPrinciples・SupportからbackgroundColor(surface)を
   外して白(background)に戻し、代わりにResourcesへbackgroundColor:surfaceを
   新規付与した。そのため現在のホームで背景色を持つトップレベルsectionは
   Hero(surface)・ProductsShelf(muted)・Resources(surface)の3つのみであり、
   Principles・SupportはbackgroundColorを持たない(以降の本節の説明・下記の
   full-bleedルール自体は、この新しい構成にもそのままTrack 1/Track 2共通で
   適用される。詳細はPhase 4A.5専用の節を参照)。

   [Track 1] 対象sectionのwp:groupブロックコメントに"align":"full"を追加し、
   className に piyolabs-full-bleed-section を追加(既存classNameがあれば
   スペース区切りで結合)、<section>タグにも alignfull・
   piyolabs-full-bleed-section クラスを追加した(content-data/pages-ja.php・
   pages-en.php・patterns/hero-home.php・patterns/rvas-intro.php・
   patterns/pricing-trial.php・patterns/cta.php)。layout.typeはconstrained
   のまま変更していないため、Hero同様、内側のカラム・カードは1120pxで
   中央寄せされたまま、背景だけが画面幅いっぱいに広がる
   (Track 1の仕組み自体はPR #24のHero実装と同一)。

   [Track 2] 既にConoHaへインポート済みの旧post_content(上記の新規
   クラスを持たない、DBスナップショット時点のフローズンコンテンツ)には、
   post_content自体を書き換えず(再インポート無し)、構造フォールバック
   セレクタ`#piyolabs-main > .wp-block-post-content > section.wp-block-group`
   に、背景色クラス(has-<slug>-background-color)を組み合わせた
   セレクタで、CSSのみで視覚的なfull-bleed補正を後付けする。この
   構造セレクタは、Hero専用だった旧body.home限定のセレクタと異なり、
   body.homeへの依存が無いため、front-page.html・page.html・
   page-rvas.html・page-manual.htmlのいずれのテンプレートでも同じ
   仕組みで機能する(ホームページに限定されない)。

   ネストしたカード(is-style-piyolabs-cardなど)も背景色クラス
   (has-card-background-colorなど)を持ちうるが、直接子コンビネータ
   (#piyolabs-main > .wp-block-post-content > section.wp-block-group)は
   post-content直下のsection要素にしかマッチせず、その内側にネストされた
   カードのdiv要素には一切マッチしないため、意図せずカードの背景まで
   full-bleed化される心配はない。

   採用した技術はPR #24のHero実装と同じ: box-shadow(0 0 0 100vmaxで
   背景色を水平方向に大きく広げる)+ clip-path: inset(0 -100vmax)
   (縦方向は0=セクション自身の上下端で切り、横方向だけ-100vmaxで実質
   無制限に見せる)。100vw+negative-marginは横スクロールが発生する
   リスクがあるため採用せず、html/bodyへのoverflow-x:hidden/clipも
   追加していない。

   背景色ごとに1組ずつ、Track 1(クラスベース)・Track 2(構造+背景色
   クラスベース)のセレクタをカンマ区切りでまとめ、同一の宣言ブロックを
   共有する。値は必ずtheme.json由来のCSSカスタムプロパティ
   (var(--wp--preset--color--<slug>))を参照し、16進数のハードコードや
   currentColorによる代用は行っていない。今回の監査で見つかった背景色は
   surface・muted・primaryの3種類(surfaceが最多で、Hero・/rvasのHero/
   機能/ギャラリー、About「大切にしていること」/「現在の製品」、Support
   「rVASの操作を知る」/「お問い合わせ」、rVASマニュアルの3カード導線が
   該当。mutedはホームProductsShelf・/rvas料金の2箇所。primaryは
   現時点でどのページ本文にも実際には挿入されていないpatterns/cta.php
   のみだが、監査対象に含まれているため同様に対応した)。 */
.piyolabs-full-bleed-section.has-surface-background-color,
#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group.has-surface-background-color {
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface);
	clip-path: inset(0 -100vmax);
}

.piyolabs-full-bleed-section.has-muted-background-color,
#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group.has-muted-background-color {
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--muted);
	clip-path: inset(0 -100vmax);
}

.piyolabs-full-bleed-section.has-primary-background-color,
#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group.has-primary-background-color {
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--primary);
	clip-path: inset(0 -100vmax);
}
/* ------------------------------------------------------------------ */

/* 3) 2カラム→縦積みのブレークポイントをNext.js版(1024px)に合わせる。
   Next.js版はTailwindのlg:grid-cols-2(min-width:1024px)で初めて2カラムに
   なり、それ未満は常に1カラム(縦積み)。一方WordPressコアのcore/columns
   ブロックは782px(WordPress全体共通の固定ブレークポイント、
   wp-includes/blocks/columns/style.css参照)で2カラム化するため、
   782〜1023pxのタブレット帯だけWordPress側が横並びになり、Next.js版と
   食い違う。

   この差を、782〜1023pxの範囲に限り、ヒーローの wp:columns インスタンス
   だけに絞って上書きし縦積みへ戻す。スコープの絞り方は1)のアクセントバー
   と同じ考え方(.piyolabs-home-hero、またはTrack 2向けのbody.home +
   #piyolabs-main + 直接子チェーン)を再利用しており、サイト内の他の
   wp:columns(rvas-introや他ページのカラムレイアウトなど)には一切影響
   しない。

   コアの該当CSS(wp-includes/blocks/columns/style.css、いずれも
   !important付き):
     .wp-block-columns { flex-wrap: wrap !important; }                 (既定=モバイル)
     @media (min-width:782px) { .wp-block-columns { flex-wrap: nowrap !important; } }
     @media (max-width:781px) { …>.wp-block-column { flex-basis:100% !important; } }
     @media (min-width:782px) { …>.wp-block-column { flex-basis:0; flex-grow:1; }
       …[style*=flex-basis] { flex-grow:0; } }  (インラインstyleの%を尊重)

   これらはすべて `.wp-block-columns` 単体(クラス1つ、詳細度0,1,0)への
   宣言であるのに対し、下の上書きは `#piyolabs-main` というid付きセレクタ
   (詳細度に1,x,xのidを含む)、または`.piyolabs-home-hero`という専用クラス
   を含むため、!important同士が衝突しても常に詳細度でこちらが勝つ
   (style.cssの読み込み順序に依存しない)。各column要素はcontent-data側で
   style="flex-basis:55%"のようなインラインstyleを持つため、それに勝つ
   ためにも!importantが必要(コア自身も781px以下の縦積みで同じ理由により
   !importantを使っている)。

   【既知の限界】この上書きはヒーロー1箇所専用にスコープしており、同様の
   782〜1023px問題は他のセクション(rvas-intro等)のwp:columnsにも潜在的に
   存在するが、それらは今回のタスク範囲外(このPRはヒーローの3点のみに
   限定)であり、意図的に対応していない。 */
@media (max-width: 1023px) {
	.piyolabs-home-hero .wp-block-columns,
	body.home #piyolabs-main > .wp-block-post-content > section:first-of-type .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.piyolabs-home-hero .wp-block-columns > .wp-block-column,
	body.home #piyolabs-main > .wp-block-post-content > section:first-of-type .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------------------------ */
/* ホームrVAS紹介セクション (Phase 4A / feat/phase4a-rvas-intro-parity)   */
/* Next.js版 components/site/rvas-section.tsx との デザイン差分のうち、    */
/* 次の4点を対象にした修正。ヒーロー(piyolabs-home-hero関連、上の        */
/* ブロック)・ProductsShelf以下は対象外(別タスク)。                     */
/*                                                                    */
/* 対象<section>は id="rvas" を、Track 1(新規インポート/content-data)・  */
/* Track 2(既にConoHaへインポート済みの旧post_content)の双方とも         */
/* 最初期のインポート実装(コミット41b8b5b)の時点から一貫して持っている   */
/* ため、`#rvas` という単一のidセレクタをTrack 1/2共通のスコープ用       */
/* セレクタとして使う(ヒーローのような直接子チェーンの後方互換セレクタを */
/* 別途用意する必要がない)。                                            */
/* ------------------------------------------------------------------ */

/* 1) 「主な機能」リストの2カラム化 + チェックマークバッジ(Track 1/2共通)。
   Next.js版は <ul className="mt-4 grid gap-3 sm:grid-cols-2"> で、各<li>の
   先頭に size-5 (1.25rem) の円形バッジ(bg-secondary + lucide-reactの
   Checkアイコン)を置く(components/site/rvas-section.tsx)。

   レビュー指摘を受け、バッジ用の新規<span>マークアップは完全に廃止した。
   バッジ・チェックマークは<li>自体の::before/::afterで描画するため、
   新規マークアップ無しで両トラックに適用できる。

   セレクタは次の2つをカンマ区切りで束ね、宣言ブロックを共有する。
     - .piyolabs-feature-list
       Track 1(content-data/pages-ja.php・pages-en.php)の新規/将来分。
       <ul class="wp-block-list piyolabs-feature-list">というクラス付き。
     - #rvas > .wp-block-columns > .wp-block-column:last-child ul.wp-block-list
       Track 2(既にConoHaへインポート済みの旧post_content)向けの構造
       フォールバック。クラスは無いが、#rvasセクション自身のwp:columns
       (直接の子)の最後のカラム内にある<ul class="wp-block-list">という
       構造は、最初期のインポート実装時点から一貫して持っている。
       `#rvas > .wp-block-columns > .wp-block-column:last-child`まで
       id起点の直接子チェーンで絞り込んだ上でのul.wp-block-list(子孫)
       指定のため、FAQリストや他ページの<ul>/<li>には一切マッチしない。

   チェックマーク自体は、専用アイコンフォント/SVGアセットを追加せず、
   古典的な「正方形を45度回転し、右辺・下辺のborderだけを見せる」という
   CSSのみのテクニックで表現する(lucide-reactのCheckアイコンに似た
   見た目を、追加の画像リクエスト無しで再現するための選択。以前の
   span版で技術自体は検証済みのものを、li::afterへ retarget しただけ)。

   グリッドの2カラム化は、Next.js版のsm:grid-cols-2(Tailwindの
   sm=min-width:640px)にある実際のブレークポイント数値をそのまま
   採用する(ヒーローPRが782/1024pxというTailwindの実測値をそのまま
   採用したのと同じ考え方)。gap:0.75rem(gap-3)・バッジ-テキスト間
   gap:0.625rem(gap-2.5)・バッジ直径1.25rem(size-5)も、すべてNext.js版の
   Tailwindユーティリティ値をそのままrem換算した数値。

   [Phase 1 / feat/shared-visual-primitives-parity 追記]
   docs/VISUAL_PARITY_AUDIT.md 5.3節・3章課題1の指摘どおり、Apps
   AppCard特徴リスト(components/site/app-card.tsx 48〜58行)を確認した。

   【訂正】このコメントは以前、AppCardの特徴リストとrVAS紹介チェックマーク
   リストのTailwind仕様が「完全に同一」(byte-identical)であると記載して
   いたが、これは不正確だった。正確には次のとおり:
     - チェックマークバッジ自体(`inline-flex size-5 shrink-0 items-center
       justify-center rounded-full bg-secondary`+Checkアイコン)と、各<li>
       の`flex items-start gap-2.5`は、app-card.tsx(48〜58行)・
       rvas-section.tsx(63〜72行)の両方で実際に同一。
     - 一方、外側の<ul>のgapはNext.js側で異なる: app-card.tsxは
       `mt-5 grid gap-2.5 sm:grid-cols-2`(gap-2.5=0.625rem)なのに対し、
       rvas-section.tsxは`mt-4 grid gap-3 sm:grid-cols-2`(gap-3=0.75rem)。
       この.piyolabs-feature-list共有クラス自体のgapは0.75rem(下記ルール
       参照、PR #23でrvas-section.tsx側の値を採用したもの)であるため、
       Apps側で見ると実際には0.625remとの差(約2px)がある。
   デザイン仕様がバッジ含め完全一致すると「確認した」わけではなく、この
   ~2px差については、Home rVAS紹介セクション(PR #23で既にマージ・本番
   稼働中)のgap値を変更してAppsに合わせるリスクを冒すよりも、既存の
   共有primitiveをそのまま再利用してページ固有のgap上書きを増やさない
   ことを優先する、という意図的なトレードオフとして許容したものである
   (無理に新しいprimitiveクラスを作らず、この.piyolabs-feature-listを
   そのまま再利用する。Track1: content-data/pages-ja.php・pages-en.phpの
   Apps特徴リスト`<ul>`にclassName「piyolabs-feature-list」を追加。
   Track2: 既にConoHaへインポート済みのApps固定ページ本文向けに、下記の
   `body.piyolabs-page-context-apps …`構造セレクタを追加した。
   Apps固定ページの本文は「提供中のアプリ」(1番目のトップレベルsection)→
   「今後のアプリ」(2番目)の2つのみで、特徴リストは1番目のsection内に
   1つだけ存在するため、nth-of-type(1)+子孫ul.wp-block-listで一意に
   絞り込める。body.piyolabs-page-context-appsは
   wordpress-plugin/piyolabs-core/includes/page-header.phpの
   piyolabs_page_header_body_class()がApps固定ページに常に付与する
   安定したbodyクラス)。

   rVAS「データ管理とプライバシー」チェックリスト(app/rvas/page.tsx
   178〜186行、size-5 rounded-full bg-secondary)も同一クラス構成である
   ことを確認したが、そちらはPhase 4(feat/rvas-detail-sections-parity)の
   対象であり本PRのスコープ外のため、今回は変更しない。 */
.piyolabs-feature-list,
#rvas > .wp-block-columns > .wp-block-column:last-child ul.wp-block-list,
body.piyolabs-page-context-apps
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(1) ul.wp-block-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.piyolabs-feature-list,
	#rvas > .wp-block-columns > .wp-block-column:last-child ul.wp-block-list,
	body.piyolabs-page-context-apps
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(1) ul.wp-block-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
.piyolabs-feature-list li,
#rvas > .wp-block-columns > .wp-block-column:last-child ul.wp-block-list li,
body.piyolabs-page-context-apps
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(1) ul.wp-block-list li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	list-style: none;
}
.piyolabs-feature-list li::before,
#rvas > .wp-block-columns > .wp-block-column:last-child ul.wp-block-list li::before,
body.piyolabs-page-context-apps
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(1) ul.wp-block-list li::before {
	content: "";
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--secondary);
}
.piyolabs-feature-list li::after,
#rvas > .wp-block-columns > .wp-block-column:last-child ul.wp-block-list li::after,
body.piyolabs-page-context-apps
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(1) ul.wp-block-list li::after {
	content: "";
	position: absolute;
	left: 0.44rem;
	top: 0.465rem;
	width: 0.3rem;
	height: 0.55rem;
	border-right: 2px solid var(--wp--preset--color--secondary-foreground);
	border-bottom: 2px solid var(--wp--preset--color--secondary-foreground);
	transform: rotate(45deg);
}

/* 2) 見出し(rVAS)のフォントサイズ。
   Next.js版はtext-3xl md:text-4xl(=30px→768px以上で36px、Tailwindの
   固定2段階切り替えであり、なめらかなfluid clampではない)。一方
   theme.jsonのfontSizeプリセットはx-large(28-32px fluid)とxx-large
   (36-48px fluid、ヒーローh1用)の間に30-36pxちょうどのプリセットが
   存在せず、どちらを流用しても数pxずれる。

   ヒーローh1はtext-4xl md:text-5xl(36px→48px)がxx-large(36-48px)と
   完全に一致していたため、フォントサイズの上書きは不要だった
   (ヒーローPRに同種の前例なし)。今回はプリセットの流用ではなく、
   Next.js版のTailwind実装をそのまま(なめらかなclampを新たに考案する
   のではなく)ハードな768pxブレークポイントで30px/36pxを直接指定する
   scoped CSSで再現する。ブロック側の"fontSize":"x-large"属性・
   has-x-large-font-sizeクラスはエディター上の見た目・互換性のために
   そのまま残すため、WordPressコアがhas-x-large-font-sizeに付与する
   !important付きルールに打ち勝つ必要があり、こちらも!importantを使う
   (idセレクタ#rvas > タグセレクタh2という特異度がクラス単体より
   常に高いため、!important同士でも安定してこちらが勝つ)。

   Track 1/2ともh2.wp-block-heading自体の構造(クラス名含む)は
   変わっていないため、`#rvas h2`というidベースのセレクタは
   両トラックに共通して効く。 */
#rvas h2 {
	font-size: 1.875rem !important; /* 30px */
}
@media (min-width: 768px) {
	#rvas h2 {
		font-size: 2.25rem !important; /* 36px */
	}
}

/* 3) セクションの上下パディング。
   Next.js版の<Section>共通コンポーネントはpy-16 md:py-24で、ヒーロー・
   rVAS紹介を含むホーム全セクションが共有する。ヒーローPRでは
   theme.jsonのspacingプリセットx-large(clamp(4rem,3rem+4vw,6rem)、
   custom.spacing.sectionと数値としては同一)を"var:preset|spacing|
   x-large"としてブロック属性に指定した。今回はタスク指示に合わせ、
   同じ数値を持つcustom.spacing.sectionトークンを"var:custom|spacing|
   section"として直接参照する(値はヒーローと完全に同一のclamp(4rem,
   3rem+4vw,6rem)であり、見た目の差はない。参照するトークン名だけが
   異なる)。

   [Track 1] content-data/pages-ja.php・pages-en.phpのrvas
   <section>ブロック属性・インラインstyleを、固定2rem(spacing--large)
   からこのfluidトークンへ変更済み。

   [Track 2] 既にConoHaへインポート済みのpost_contentは、rvasの
   <section>に固定のpadding-top/bottom:var(--wp--preset--spacing--large)
   というインラインstyleを直接持っている。インラインstyleは通常の
   外部スタイルシートのセレクタでは(特異度に関わらず)上書きできない
   ため、!importantを使って#rvas自体に直接上書きする。この1ルールは
   Track 1(インラインstyleが既にfluidトークンになっている)にも
   同じ値で重ねて効くため、実害なく両トラックに安全に適用できる。 */
#rvas {
	padding-top: var(--wp--custom--spacing--section) !important;
	padding-bottom: var(--wp--custom--spacing--section) !important;
}

/* Home body sections vertical spacing (compact)                       */
/* (fix/home-section-density-and-support-tone)                         */
/*                                                                      */
/* Hero・rVAS紹介は「導入セクション」として、引き続きvar(--wp--custom--   */
/* spacing--section)(64〜96pxのfluid spacing、下記#rvasルール参照)を     */
/* 維持する。このルールでは変更しない。                                  */
/*                                                                      */
/* 一方ProductsShelf・Principles・Resources・Supportは「情報閲覧          */
/* セクション」であり、導入セクションと同じ広いspacingを適用する必要は    */
/* ない。直前のPR(feat/home-wide-rhythm-and-support-tone)ではHero・      */
/* rVAS紹介と同じvar(--wp--custom--spacing--section)(96px desktop/64px  */
/* mobile)を4セクションへ適用したが、production verificationで実機確認   */
/* した結果、間延びして見え、特にResources→Supportのセクション境界が      */
/* 知覚しづらくなることが判明した。64px(desktop)/48px(mobile)のpreviewと */
/* 比較した結果、その方が情報密度・section識別・Home全体のバランスの面    */
/* で自然だったため、この4セクション専用のよりcompactな値へ変更した。     */
/* Next.js/Vercel参照実装のpy-16 md:py-24(64→96px)への数値的な一致より、  */
/* production実機での可読性を優先した判断(Intentional deviationとして    */
/* まだ確定はしていない)。                                              */
/*                                                                      */
/* clamp(3rem, 2.5rem + 2vw, 4rem)は、既存のvar(--wp--custom--spacing--  */
/* section): clamp(4rem, 3rem + 4vw, 6rem)と全く同じ遷移区間(400px〜     */
/* 1200pxのビューポート幅で滑らかに変化)を保ったまま、振れ幅だけ半分に    */
/* した値。この値は現時点でHome中盤以降専用の局所的な値であり、サイト     */
/* 全体で再利用するdesign tokenとして一般化する根拠がまだないため、       */
/* theme.jsonへは追加せずstyle.cssへ直接記述し、この1ルールでのみ使用     */
/* する(重複記述しない)。                                               */
/*                                                                      */
/* セレクタ自体(#products・Principles/Resources/Supportのposition-       */
/* independent構造セレクタ)は変更しない。詳細な選定理由は直前のPRの       */
/* コミット履歴を参照。                                                  */
/* ------------------------------------------------------------------ */
#products,
.piyolabs-home-principles,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a)),
.piyolabs-home-resources,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"]),
.piyolabs-home-support,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href^="mailto:"]) {
	padding-top: clamp(3rem, 2.5rem + 2vw, 4rem) !important;
	padding-bottom: clamp(3rem, 2.5rem + 2vw, 4rem) !important;
}

/* 4) rVASセクション自身の外側2カラム(45%/55%)のブレークポイントを
   Next.js版(1024px)に合わせる。
   Next.js版はlg:grid-cols-[1fr_1.15fr](Tailwindのlg=min-width:1024px)で
   初めて2カラムになり、それ未満は常に1カラム(縦積み)。一方WordPressコアの
   core/columnsブロックは782pxで2カラム化するため、782〜1023pxの
   タブレット帯だけWordPress側が横並びになり、Next.js版と食い違う
   (ヒーローPRで対応済みの同種の782/1024px問題と同じ原因だが、あちらは
   ヒーローの wp:columns インスタンスにしかスコープしておらず、rvas-intro
   側のこの問題には効かない。今回改めてrvas-intro専用にスコープして
   別途対応する)。

   `#rvas > .wp-block-columns`という直接子チェーンで、#rvas自身が持つ
   外側のwp:columnsだけに絞る。ProductsShelf・Principlesなど他の
   wp:columns、および既にヒーロー専用にスコープされているヒーローの
   1024pxルールには一切影響しない(重複させない)。1024px以上では
   このメディアクエリ自体が効かなくなるため、既存の45%/55%分割は
   そのまま保たれる。 */
@media (max-width: 1023px) {
	#rvas > .wp-block-columns {
		flex-wrap: wrap !important;
	}
	#rvas > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------------------------ */
/* ホームのセクションリズムと交互背景の整理 (Phase 4A.5 /
   fix/home-section-rhythm-and-tones)。

   背景: PR #25(Phase 4A.4)は、背景色付きのトップレベルsectionをすべて
   full-bleed化した。これによりホーム固有の2つの問題が顕在化した。
     (1) WordPressコアの既定blockGap(theme.json styles.spacing.blockGap:
         "1.5rem")が、隣接するトップレベルsection同士の間に意味のない
         白い隙間を生む(各sectionは自身の上下paddingで十分な余白を
         既に持っているため、この隙間は二重の余白になり、full-bleed化に
         よってその不要な白い帯がより目立つようになった)。
     (2) ProductsShelf(muted)とPrinciples(surface)が背景色付きで隣接する
         際、mutedとsurfaceの見た目が近く、セクションの切れ目が
         知覚しづらい。

   このPRはホームの6トップレベルsectionの背景色配分と、section間の
   余白だけを対象とする(カード・見出し・本文・padding量は一切変更しない)。

   最終的な背景色の割り当て(上から順、交互になるよう調整):
     1. Hero        … surface(変更なし)
     2. rVAS紹介    … background(白、backgroundColorなし。変更なし)
     3. ProductsShelf … muted(変更なし)
     4. Principles  … background(白)に変更。旧surfaceを撤去。
     5. Resources   … surface に変更。旧・背景色なしから新規追加。
     6. Support     … background(白)。[feat/home-wide-rhythm-and-
        support-tone → fix/home-section-density-and-support-tone]
        一時surfaceへ変更したが、production verificationでResources・
        Supportのsurface連続がHome全体の交互トーンリズムを崩すことが
        判明したため、白へ戻した(詳細は下記「4) Support」節を参照)。
   結果: surface(Hero)→白(rVAS)→muted(Products)→白(Principles)→
   surface(Resources)→白(Support) の交互になる。

   [Track 1] content-data/pages-ja.php・pages-en.phpの該当4セクションに
   専用クラスを追加した。
     - Products: 既存の"align":"full"・piyolabs-full-bleed-section・
       backgroundColor:muted・has-muted-background-colorはそのまま維持し、
       classNameにpiyolabs-home-productsを追加しただけ(見た目は無変更、
       Track 2フォールバックをclassベースへ将来移行しやすくするための
       目印)。
     - Principles: ブロックコメントから"align":"full"・
       backgroundColor:surfaceを削除し、classNameをpiyolabs-full-bleed-
       sectionからpiyolabs-home-principlesへ差し替えた。<section>タグ
       からもalignfull・piyolabs-full-bleed-section・has-surface-
       background-color・has-backgroundを外し、piyolabs-home-principles
       のみを残した。layout.type:"constrained"は変更していない。
     - Resources: ブロックコメントに"align":"full"・
       className:"piyolabs-home-resources piyolabs-full-bleed-section"・
       backgroundColor:surfaceを新規追加した。<section>タグにも
       alignfull・piyolabs-home-resources・piyolabs-full-bleed-section・
       has-surface-background-color・has-backgroundを追加した。
       layout.type:"constrained"は変更していない。
     - Support: Principlesと同じ要領で"align":"full"・
       backgroundColor:surface・piyolabs-full-bleed-sectionを外し、
       piyolabs-home-supportのみを残した。

     Products/Principles/Resources/Supportが新たに持つ
     piyolabs-home-*クラスにより、Track 1の新規インポートコンテンツは
     以降クラスベースのセレクタで直接スコープできる(下記ルール参照)。
     Resources・Products(muted)は、Track 1では既存の「サイト共通
     セクション背景full-bleed化」節(このファイル上の
     .piyolabs-full-bleed-section.has-<slug>-background-color
     ルール)が既にbox-shadow/clip-pathを提供し、背景色自体はWordPress
     コアのhas-<slug>-background-colorユーティリティクラス(コア側で
     !important付与)が提供するため、下記Phase 4A.5専用ルールの大半は
     実質Track 2(既存ConoHaインポート済みコンテンツ)向けのフォール
     バックとして機能する(Track 1側では二重適用となるが、値が完全に
     一致するため実害はない)。

   [Track 2] 既にConoHaへインポート済みの旧post_content(上記の新規
   クラスを持たない、DBスナップショット時点のフローズンコンテンツ)向けに、
   ホームの6トップレベルsectionが必ずこの順序(Hero→rVAS→Products→
   Principles→Resources→Support)で並ぶという構造的事実(このPR作業時に
   pages-ja.php・pages-en.phpの変更前の内容から確認済み)を利用し、
   `body.home #piyolabs-main > .wp-block-post-content >
   section.wp-block-group:nth-of-type(N)`という構造セレクタで、CSSのみで
   視覚的な補正を後付けする。post_content自体は書き換えない
   (再インポート無し)。

   Track 1のpiyolabs-home-*クラスとTrack 2のnth-of-type構造セレクタは、
   同じ宣言ブロックをカンマ区切りで共有する(このファイルの他のPhase節
   と同じ手法)。 */

/* 1) section間の余白(blockGap)の除去。
   theme.jsonのstyles.spacing.blockGap:"1.5rem"はグローバル設定であり、
   WordPressコアはこれを、layout.type:"constrained"を持つブロックの
   直接の子要素に対して`:where(.is-layout-constrained) > * + *`の
   ような形で(:where()によりこの部分の詳細度は常にゼロ)自動的な
   margin-block-startとして適用する(該当ブロックの最初の子要素だけは
   margin-block-start:0にリセットされる)。詳細度が実質ゼロの:where()
   ラップであるため、以下の(body.homeスコープ+idを含む)セレクタは
   !important無しで確実に上回る。

   【未検証】WordPressコアの実際の:where()ラップ済みblockGapグローバル
   ルールの生成ロジック(wp-includes側の実装)は、このリポジトリに
   WordPress本体のソースが同梱されていないため、静的な知識に基づく判断
   であり、ConoHa実機・実ブラウザでの検証は行っていない(このファイルの
   他のPhaseと同様の限界)。仮に想定と異なり詳細度で負ける場合でも、
   影響は「ホームのsection間に余分な余白が残る」という見た目上の問題に
   留まり、レイアウト崩壊やコンテンツ消失には至らない。

   この1ルールはbody.home配下のpost-content直下の直接の子である
   section.wp-block-groupだけに適用され、.wp-block-post-content自身の
   margin、他ページのsection、記事本文・法的文書本文中の要素、
   ネストしたカード(is-style-piyolabs-cardなど)には一切影響しない
   (直接子コンビネータによる絞り込みのため)。 */
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* 2) Principles(ホームの4番目のトップレベルsection)を白(background)へ戻す。
   Track 2の旧post_contentは、PR #25適用時点のalignfull・
   piyolabs-full-bleed-section・has-surface-background-color・
   has-backgroundクラスをまだ持っているため、何もしなければ
   このファイル上の「サイト共通セクション背景のfull-bleed化」ルール
   (.piyolabs-full-bleed-section.has-surface-background-color, …)と、
   WordPressコア自身のhas-surface-background-colorユーティリティ
   クラス(背景色をbackground-color:...!importantで指定)により、
   引き続きsurface背景・full-bleedのまま表示されてしまう。

   background-colorはコアが!important付きで指定しているため、それに
   打ち勝つにはこちら側もbackground-colorにだけ!importantを使う
   (このファイル冒頭の.piyolabs-header__surfaceと同じ理由・同じ手法)。
   一方box-shadow/clip-pathはコア側ではなくこのファイル自身が定義した
   通常優先度のルールであり、下記Track2構造セレクタ(idを含むため詳細度は
   サイト共通ルールの詳細度(1,3,1)相当を確実に上回る)により、
   !important無しで確実に上回る。

   【Track2セレクタの位置非依存化(本PR)】従来はnth-of-type(4)という
   「ホームの4番目のトップレベルsection」という並び順のみに基づく識別
   だったが、本PRでproduction実機(https://piyolabs.com/・/en/)を
   Playwrightで検証し、Principlesセクションが構造的に
   「.wp-block-columns内の.is-style-piyolabs-cardが最初の子として
   p.has-secondary-background-color(01/02/03バッジ)を持ち、かつカード内に
   <a>を含まない」という他セクションに無い特徴を持つことを確認した
   (:has()の判定材料)。ProductsShelfセクションも同じバッジ構造を持つが
   カード内に<a>を持つため、:not(:has(...))で除外する必要がある
   (:not()を外すとJA/ENともにProducts+Principlesの2件にマッチしてしまう
   ことを実機で確認済み)。.piyolabs-badge-square(Track 1専用class)は
   production側のpost_contentが凍結されており存在しないため候補から除外した
   (詳細はこのファイル下部「1) 01/02/03固定サイズ正方形バッジ」節参照)。

   background-colorの値はtransparentを採用した(theme.jsonの
   styles.color.backgroundは既にvar(--wp--preset--color--background)を
   body自身に適用済みのため、transparentのままで「白(background色)」が
   透けて見える。ハードコードされた16進色は使っていない)。

   .piyolabs-home-principlesクラス(Track 1、新規インポート分)は現在の
   マークアップではbackgroundColor自体を持たないため実際にはこのルールが
   適用されても何も上書きしない(元から透明)が、Track 1/Track 2で同じ
   見た目になることを保証するため、優先セレクタとして併記している。 */
.piyolabs-home-principles,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a)) {
	background-color: transparent !important;
	box-shadow: none;
	clip-path: none;
}

/* 3) Resources(5番目のトップレベルsection)にsurface背景+full-bleedを
   新規付与する。

   Track 2の旧post_contentは、PR #25時点ではbackgroundColorを持たない
   プレーンな<section class="wp-block-group">のままであり、背景色付きの
   ルールと競合する既存宣言が存在しないため、!important無しでそのまま
   background-color・box-shadow・clip-pathを新規に指定するだけでよい。

   Track 1(新規インポート分)は既にbackgroundColor:surface・
   has-surface-background-color・piyolabs-full-bleed-sectionクラスを
   持つため、コアのhas-surface-background-colorユーティリティ(背景色)と
   このファイル上の「サイト共通セクション背景のfull-bleed化」ルール
   (box-shadow/clip-path)により既に同じ見た目になっている。ここで
   .piyolabs-home-resourcesを併記するのは、Track 1側にも同一の値を
   重ねて適用するためで、実害はない(Track 1/Track 2の見た目を完全に
   一致させる狙い)。

   [PR #59マージレビュー反映] 当初はnth-of-type(5)という位置依存の
   Track2セレクタを使っていたが、Home ResourcesはPhase 3B(「Home
   Resources インタラクションパリティ」節参照)で既に
   `section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card
   a[href*="/resources/"])`という構造セレクタへ位置非依存化済みだった
   ため、このtoneルールも同じセレクタへ揃えた。宣言値
   (background-color/box-shadow/clip-path)は変更していない。 */
.piyolabs-home-resources,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"]) {
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface);
	clip-path: inset(0 -100vmax);
}

/* 4) Support(6番目のトップレベルsection)。
   [fix/home-section-density-and-support-tone での再変更]
   直前のPR(feat/home-wide-rhythm-and-support-tone)でSupportをsurface
   トーンへ変更したが、production verificationの結果、Resources
   (surface)と隣接してsurfaceが2セクション連続し、Home全体の交互トーン
   リズム(Hero=surface→rVAS=白→Products=muted→Principles=白→
   Resources=surface→Support=白→footer=濃紺)が崩れて見えることが判明
   した。Next.js参照実装への数値的な一致よりHome全体としての読みやすさ・
   一貫したリズムを優先し、Phase 4A.5時点の判断(Principlesと同じ
   background/白)へ戻す。

   セレクタ(.piyolabs-home-support / a[href^="mailto:"]をkeyにした
   position-independent構造セレクタ)は変更しない。宣言値のみを
   transparent/none/noneへ戻す。 */
.piyolabs-home-support,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href^="mailto:"]) {
	background-color: transparent !important;
	box-shadow: none;
	clip-path: none;
}
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* ホーム「Piyo Labsのプロダクト」カード寸法統一 (fix/home-card-and-      */
/* gallery-sizing)                                                      */
/*                                                                      */
/* wp:columns自体はコアのflexで既に等高だが、内側の.is-style-piyolabs-    */
/* cardはそのカラムいっぱいに伸びていなかったため、カード外枠(border)の  */
/* 高さが2カラムで揃っていなかった。カラムをflex-direction:columnに、    */
/* カードをflex:1にして解決する(中身は上詰めのまま、justify-content等    */
/* での引き伸ばしはしない)。782px未満はコアがカラムを1本ずつ折り返す     */
/* (flex-wrap:wrap)ため、この等高化は自然に効かなくなり各カードは        */
/* コンテンツ量なりの高さに戻る(モバイル専用の打ち消しCSSは不要)。       */
/*                                                                      */
/* [Track 2 追記 / fix/home-products-track2-and-gallery-grid]            */
/* 上記PR時点では、Products sectionの専用クラスpiyolabs-home-products     */
/* (Track 1、content-data/pages-ja.php・pages-en.php側で付与済み)だけを   */
/* スコープとしていた。しかしConoHa実機を確認したところ、既に             */
/* インポート済みで現在ライブ稼働中のpost_content(DBスナップショット      */
/* 時点でフローズン、このPRでは再インポートしない)にはこのクラスが        */
/* 付いておらず、id="products"のみを持つ状態だった(このクラス自体は       */
/* 追加されているが、ライブDBの当該レコードが生成された時点より後に        */
/* 追加されたため反映されていない)。そのため上記2ルールのセレクタが        */
/* ライブサイトでは一切マッチせず、カード等高化が本番で全く効いていない    */
/* ことを確認した(実測: rVASカード約315px、次のアプリカード約266px)。     */
/*                                                                      */
/* 対処として、id="products"自体は再インポートせずとも変わらず存在する     */
/* 安定した構造(このファイル上の「section間の余白(blockGap)の除去」節    */
/* などで既に確立しているTrack 1/Track 2併記パターンと同じ考え方)なので、  */
/* #productsを起点とする構造セレクタをTrack 2として追加し、Track 1の      */
/* クラスセレクタとカンマ区切りで同じ宣言ブロックを共有する。id           */
/* セレクタのため、他の#付きセクションや他ページの.is-style-piyolabs-     */
/* card(価格・Apps・Supportなど)には一切影響しない。                     */
/*                                                                      */
/* 下の「次のアプリ」カードの破線境界ルールはTrack 2を追加していない。     */
/* そのコメントが説明する通り、破線は元々ブロック自身のインラインstyle    */
/* (border-style:dashed)で決まっており、クラスの有無(Track 1/Track 2)   */
/* に関わらず既にライブでも正しく表示されているため、対象外とする。       */
/* ------------------------------------------------------------------ */
.piyolabs-home-products .wp-block-columns > .wp-block-column,
#products > .wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
}
.piyolabs-home-products .wp-block-columns > .wp-block-column > .is-style-piyolabs-card,
#products > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	/* [feat/home-products-shelf 追記] カード全体クリック化(stretched-link
	   技法)の::afterの位置決め基準。下の「ProductsShelf インタラクション
	   パリティ」節で追加する #products 起点の <a>::after が、この
	   position:relativeな祖先を基準にカード全体へ広がる。共通クラス
	   .is-style-piyolabs-card自体(他ページのカード)は変更していない。 */
	position: relative;
}

/* 「次のアプリ」カード(2カラム目)の破線境界。実際にはpages-ja.php/
   pages-en.php側のブロックに既にインラインstyle(border-style:dashed)が
   付いており、見た目上はそちらが優先されて効いている(インラインstyleは
   同じ重要度の外部/内部スタイルシートより常に優先されるため)。この
   ルール自体は現在のDOMに対しては効果を持たないが、将来サイトエディタ
   での編集等でインラインstyleが失われた場合の保険として残しておく。
   太さ・色は既存の.is-style-piyolabs-card基本ルール(1px solid
   var(--border))をそのまま使う。既存のhoverルールはborder-colorしか
   変えないため、破線は追加のhover用ルール無しでも維持される。
   (上のコメント通り、この保険ルールにTrack 2の#products版は追加しない)。 */
.piyolabs-home-products .wp-block-columns > .wp-block-column:last-child > .is-style-piyolabs-card {
	border-style: dashed;
}

/* 「Coming soon」ラベル。core/paragraph + has-backgroundは既定で
   ブロック幅いっぱいの横長バンドになるため、内容幅のみの丸ピルに
   変更する。
   [Track 2追記] 上と同じ理由(ライブpost_contentにpiyolabs-home-products
   クラスが無い)で、#products起点のTrack 2セレクタを併記する。 */
.piyolabs-home-products .wp-block-columns > .wp-block-column:last-child > .is-style-piyolabs-card > p.has-secondary-background-color:first-child,
#products > .wp-block-columns > .wp-block-column:last-child > .is-style-piyolabs-card > p.has-secondary-background-color:first-child {
	display: inline-flex;
	align-items: center;
	align-self: flex-start; /* カードがflex-direction:columnのため、既定のstretchで
		幅いっぱいに広がるのを防ぐ(上のカード等高化ルールとの組み合わせで必要) */
	padding: 0.25rem 0.75rem;
	border-radius: var(--wp--custom--radius--xxl);
}
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* ProductsShelf インタラクションパリティ (Phase 3開始 /                 */
/* feat/home-products-shelf)                                           */
/*                                                                      */
/* Next.js参照実装(components/site/products-shelf.tsx)のProductsShelfは  */
/* カード列を横スクロール棚(overflow-x-auto + ul.flex snap-x snap-       */
/* mandatory、カード幅280px/sm:320px固定・flex-shrink無し)にし、          */
/* カード全体(アイコン・タイトル・本文・余白含む)がクリック可能。          */
/* Coming Soonカードは破線のまま非インタラクティブ。                      */
/*                                                                      */
/* 現在の本番post_content(production DOM、Content Importer再実行禁止・    */
/* 既存本文の再インポート禁止)はGutenbergのwp:columnsによる固定2カラムで、 */
/* クリック可能なのはrVASカード内の生の<a href="/rvas">詳しく見る →</a>   */
/* のみ、Coming soonカードにはリンクが無い。この節はTrack 2(#products     */
/* 起点の構造セレクタ、1739行目以降の既存コメント参照)のみで、             */
/* post_content自体を一切変更せずにNext.js版の挙動へ近づける。             */
/* 新しい<a>要素の追加はしていない(既存の<a href="/rvas">をそのまま       */
/* stretched-linkの基点として使う)。                                     */
/*                                                                      */
/* 【A: 横スクロール化(flex-wrap上書き)】WordPressコアのcore/columns      */
/* ブロックは既定で782px未満flex-wrap:wrap !important・782px以上          */
/* flex-wrap:nowrap !important(wp-includes/blocks/columns/style.css、    */
/* 1266行目以降の既存コメント参照。ヒーローセクションでは逆に「782〜      */
/* 1023pxだけ縦積みに戻す」ために同じ仕組みを利用している)を持つ。ここでは */
/* 逆に「常にnowrap(横並び)」にしたいため、#products > .wp-block-columns  */
/* というid起点セレクタ(詳細度1,1,0)を、メディアクエリを使わない単一      */
/* ルールとして定義しflex-wrap:nowrap !importantを指定する。詳細度が      */
/* コアの.wp-block-columns単体セレクタ(0,1,0)より常に高いため、           */
/* 782px未満・以上いずれの画面幅でもコアのどちらの!importantルールにも    */
/* 勝てる(!important同士の対決は詳細度で決着し、メディアクエリの有無・    */
/* 読み込み順序には依存しない)。                                        */
/*                                                                      */
/* カード幅はNext.js版と同じ280px(640px以上は320px)の固定値にし、         */
/* flex: 0 0 <width> !importantでflex-shrink:0(伸縮無し)にする。          */
/* !importantが必要な理由は上と同じで、コアが782px未満で                  */
/* flex-basis:100% !importantを、782px以上でflex-basis:0;flex-grow:1を    */
/* (importantなしで)強制するため、いずれにも勝つ必要があるため。          */
/* 1440/1024/768pxではcontentSize(1120px)に対してカード2枚+gapが十分      */
/* 収まるため、横スクロール自体そもそも発生しない(Next.js版も横スクロール */
/* 領域自体は常に存在するが、コンテンツがコンテナ幅に収まる場合はスクロール*/
/* バーが出ないだけで同じ挙動)。390pxではカード2枚の合計幅がコンテナ幅を  */
/* 超えるため実際に横スクロール可能になる。                              */
/*                                                                      */
/* JavaScriptによる独自スクロール処理は追加しない(素のCSSのoverflow-x +   */
/* scroll-snapのみ)。横スクロールは#products > .wp-block-columns自身の    */
/* overflow-xで完結させ、ページ全体(body/html)の横スクロールを           */
/* 引き起こさない(この要素の外側の幅制約は変更していない)。               */
/*                                                                      */
/* padding-top/padding-bottomは、下の:focus-visibleで付けるカード全体の   */
/* フォーカスリング(outline-offset 2px)が、overflow-x:autoによって        */
/* (CSSの仕様上overflow-yも自動的にvisible以外へ計算されるため)上下を     */
/* 切り取られないための余白。合わせてbottomはスクロールバー分の余白も     */
/* 兼ねる。                                                              */
/*                                                                      */
/* 【F: 縦積み+カード高さ不一致の解消】782px未満でコアがflex-wrap:wrapに   */
/* 切り替えていたことが、モバイルでの「カードが縦積みになり、かつ1780行目 */
/* 以降の等高化ルール(align-items:stretchに依存)が効かなくなる」問題の    */
/* 原因だった。Aで常にnowrap(横一列)にしたことで、この節を追加しなくても  */
/* 782px未満を含む全幅で1780行目以降の既存ルールがそのまま効くようになり、 */
/* 縦積み・高さ不一致は自然に解消される(F専用の追加CSSは無い)。           */
/* ------------------------------------------------------------------ */
#products > .wp-block-columns {
	flex-wrap: nowrap !important;
	column-gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-top: 0.25rem;
	padding-bottom: 0.5rem;
}
/* column-gapはNext.js参照実装(components/site/products-shelf.tsx、35行目    */
/* ul.flex snap-x snap-mandatory gap-4 md:gap-6)に一致させる。768px未満は    */
/* 1rem(16px、gap-4)、768px以上は1.5rem(24px、gap-6、下の@mediaで上書き)。   */
/* md:はTailwind既定の768pxブレークポイントであり、直上の「カード幅280px/   */
/* 640px以上320px」で使っている640pxブレークポイントとは別物(混同しない)。  */
/*                                                                      */
/* [カスケードの根拠] この#products > .wp-block-columnsが束ねるwp:columns    */
/* インスタンス自体は、content-data/pages-ja.php・pages-en.php側で           */
/* style.spacing.blockGapをカスタム指定していない(margin.topのみ指定)。     */
/* そのためWordPressコア側はこのブロックインスタンス専用のインラインgap     */
/* ルールを生成せず(wp-includes/block-supports/layout.phpのwp_get_          */
/* layout_style()は、ブロック自身のblockGap値が未設定だとgap宣言を          */
/* スキップする)、代わりにグローバルな.is-layout-flex向けの既定gapルール    */
/* (詳細度を持たない:where()でラップされる、コアの一般的な実装パターン)     */
/* 経由でtheme.jsonのstyles.spacing.blockGap(1.5rem、この後ろの行を         */
/* grep `"blockGap": "1.5rem"`で参照)が適用されるだけになる。#products      */
/* > .wp-block-columnsというid起点セレクタ(詳細度1,1,0)は、このような       */
/* 詳細度0のグローバル既定ルールに対して!importantを付けずとも常に勝てる    */
/* ため、column-gapには!importantを付けていない(直後のflex-wrap            */
/* !importantは、コアが782px内外でそれぞれ!important付きのflex-wrap        */
/* ルールを持つために対抗上必要だったのであり、gapとは事情が異なる)。       */
@media (min-width: 768px) {
	#products > .wp-block-columns {
		column-gap: 1.5rem;
	}
}
#products > .wp-block-columns > .wp-block-column {
	flex: 0 0 280px !important;
	scroll-snap-align: start;
}
@media (min-width: 640px) {
	#products > .wp-block-columns > .wp-block-column {
		flex: 0 0 320px !important;
	}
}

/* 【B: カード全体クリック化(stretched-link技法)】3100行目以降の           */
/* .piyolabs-resource-archive-card__linkと同じ技法(先例として精読済み)。   */
/* 相違点は、resource-cardのリンクには専用class                          */
/* (.piyolabs-resource-archive-card__link)があるのに対し、production DOM  */
/* の「詳しく見る →」リンクはclassの無い生の<a>であること(production DOM  */
/* をそのまま利用するため新しいclassを付与できない)。そのため#products    */
/* 起点の構造セレクタでこの<a>を特定する。カード内にリンクを持つのは       */
/* rVASカードのみ(Coming soonカードにはリンクが存在しない)ため、この      */
/* 構造セレクタが誤って他要素を拾う心配はない(実際のDOM構造は             */
/* browser_evaluate等で事前確認済み)。position:relativeの基準は<a>自身    */
/* ではなく、上の「カード寸法統一」節で追記した.is-style-piyolabs-card側   */
/* のposition:relative(1780行目以降)を使う。                             */
/*                                                                      */
/* resource-cardの<a>と異なり、この「詳しく見る →」リンクはNext.js版でも  */
/* 見える形の独立したCTAテキスト(text-brand)であるため、色・下線を        */
/* inherit/none化してプレーンテキストへ溶け込ませることはしない(意図的な */
/* 差分。resource-cardの<a>はタイトル全体を包むため見た目をプレーン       */
/* テキスト化する必要があったが、ここではリンクらしい見た目のまま         */
/* クリック領域だけをカード全体へ拡張する)。 */
#products > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
/* 【D・E: キーボードフォーカス表示】キーボード操作時のみ(:focus-visible  */
/* のみを対象にし、マウスクリック直後の:focusでは表示しない)、カード全体  */
/* にブランドカラー(--wp--preset--color--brand)のフォーカスリングを       */
/* 表示する。<a>要素自身のブラウザ既定focus outline(テキスト範囲だけの    */
/* 狭いリング)は明示的に消し、::after側(inset:0でカード全体に重なる)にだけ*/
/* outlineを与える(3270行目以降の既存パターンと同一の技法)。 */
#products > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card a:focus-visible {
	outline: none;
}
#products > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* 【C: Coming soonカードを誤ってinteractiveにしない】共通の.is-style-    */
/* piyolabs-cardには、45行目以降のグローバルルールとして「hover/focus-    */
/* within時にborder-colorをbrandへ変える」という「押せそうな」エフェクト  */
/* が既に定義されている(このグローバルルール自体はここでは変更しない)。   */
/* rVASカードはstretched-linkでクリック可能なので望ましい効果だが、       */
/* Coming soonカードには<a>が存在せず非インタラクティブであるべきなので、  */
/* このエフェクトが誤って出ないよう:has()でリンクの有無を判定し、         */
/* #productsスコープ内でborder-colorを既定値(--wp--preset--color--border) */
/* へ戻す。:focus-within側は、Coming soonカードがそもそも内部にフォーカス */
/* 可能な要素を持たないため実際には発火しないが、hover側と対称的に        */
/* 念のため揃えておく。 */
#products > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card:not(:has(a)):hover,
#products > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card:not(:has(a)):focus-within {
	border-color: var(--wp--preset--color--border);
}
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Home Resources インタラクションパリティ (Phase 3B /                    */
/* feat/home-resources-parity)                                         */
/*                                                                      */
/* Next.js参照実装(components/site/resources.tsx)のHome Resourcesは、     */
/* カード3枚をmd:grid-cols-3(768px以上3列・768px未満1列)で並べ、各カード   */
/* はgroup flex flex-col rounded-2xl border border-border bg-card p-6の   */
/* リンク(<a>)そのもので、カード全体がクリック可能。excerpt <p>は          */
/* flex-1で伸び、CTA(続きを読む)はカード下端付近に揃う。カード最上部       */
/* には aria-hidden の <span class="h-1 w-8 rounded-full bg-primary" />   */
/* (アクセントバー)がある。                                              */
/*                                                                      */
/* 現在の本番post_content(production DOM、Content Importer再実行禁止・    */
/* 既存本文の再インポート禁止)はGutenbergのwp:columnsによる3カラムで、     */
/* カード自身は<div class="wp-block-group is-style-piyolabs-card">、      */
/* クリック可能な要素はカード内のタイトル<a>(<h3>直下)と「続きを読む →」  */
/* <a>(2番目の<p>直下、同一href)の2つの独立したリンク。この節は            */
/* Track1(.piyolabs-home-resourcesクラス、pages-ja.php/pages-en.phpの     */
/* 新規インポート向け)とTrack2(旧post_content向け)の両方を併記する。       */
/* post_content自体は一切変更しない(新しい<a>要素の追加はしていない)。     */
/*                                                                      */
/* 【Track2セレクタに:has()を使う理由】旧post_content向けのTrack2は        */
/* 以前`body.home #piyolabs-main > .wp-block-post-content >              */
/* section.wp-block-group:nth-of-type( 5 )`(5番目のトップレベルsection)   */
/* で識別していたが、これはホームページのセクション構成(追加・削除・       */
/* 並べ替え)が変わると簡単に壊れる位置依存のセレクタだった。代わりに、     */
/* Resources固有の構造的特徴──カード(.wp-block-columns > .wp-block-column */
/* > .is-style-piyolabs-card)の中に、hrefが`/resources/`(スラッシュ+     */
/* 記事slug)を含むリンクを持つ──を`:has()`で検出し、position(nth-of-      */
/* type)の代わりに使う。実際にPlaywrightで本番JA                          */
/* (https://piyolabs.com/)・EN(https://piyolabs.com/en/)のDOMを確認し、   */
/* ホームの他の5セクション(Hero: /rvas,/about・rVAS紹介: /rvas,            */
/* /rvas#pricing・ProductsShelf: /rvas・Principles: リンク無し・            */
/* Support: /support#faq,/rvas/docs,mailto:…)のいずれにも                */
/* `/resources/`を含むリンクが存在しないこと、EN版も同様のドメイン外       */
/* (/en/rvas-app,/en/rvas-app#pricing,/en/help#faq,/en/rvas-app/manual)   */
/* であることを確認済み。また見出し下の「記事の一覧を見る →」リンクは      */
/* href="/resources"(EN: "/en/resources")と末尾スラッシュが無く、          */
/* `a[href*="/resources/"]`にはマッチしないため、カード内の個別記事        */
/* リンクだけを条件にできる(このリンク自体はカード外・.wp-block-columns    */
/* の外にあるため、いずれにせよ:has()の対象には含まれない)。               */
/* 記事詳細ページの関連記事コンポーネント([piyolabs_related_resources]、   */
/* wordpress-plugin/piyolabs-core/includes/related-resources.php)にも     */
/* `/resources/`を含むリンクがあるが、`.piyolabs-related-resources__card`  */
/* という別クラス体系で`.wp-block-columns`/`.is-style-piyolabs-card`を     */
/* 使わないため構造的に重ならず、かつbody.homeスコープの外(そのページの     */
/* bodyクラスはpiyolabs-page-context-resources等)なのでそもそも対象外。    */
/* 見出しの文言(「リソース」/"Resources")や個別記事のslugには一切依存      */
/* しないため、記事が増減・入れ替わっても、ホームの他セクションが          */
/* 増減・並べ替えされても壊れない。                                       */
/*                                                                      */
/* 【canonical linkの選定】カード内の2つの<a>のうち、タイトルの<a>(h3の    */
/* 直下)をstretched-linkの基点に選ぶ。「続きを読む →」の<a>は引き続き      */
/* 独立したTab到達可能な要素として残り、同じURLへの重複リンクになる        */
/* (production post_contentを変更しないという制約上、CSS/markupだけでは   */
/* 解消できない既知の制約。今回は対応しない)。                            */
/* ------------------------------------------------------------------ */

/* 【①カード高さ/stretch構造】wp:columns自体は既にflexでalign-items:       */
/* 既定値(normal、視覚的にはstretchと同じ)のため、768px以上で同一行の     */
/* .wp-block-columnの高さは揃う。この高さを内側の.is-style-piyolabs-card  */
/* まで伝える(display:flex; flex-direction:column + flex:1 1 auto、       */
/* ProductsShelf 1780行目以降と同じ技法)。メディアクエリでの分岐は無い:    */
/* 768px未満はコアの既定挙動(flex-wrap:wrap)で1カラムずつ折り返され、      */
/* 各行にカードが1枚しか無いため、このstretchの影響が実質発生せず、        */
/* 自然に内容量なりの高さになる(実機Playwright確認で、375px幅時に3枚の    */
/* カードがそれぞれ異なる高さ(229px/203px/227px)のまま縦積みになることを  */
/* 確認済み)。 */
.piyolabs-home-resources > .wp-block-columns > .wp-block-column,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column {
	display: flex;
	flex-direction: column;
}
.piyolabs-home-resources > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	position: relative; /* 下のstretched-link(タイトル<a>::after)の位置決め基準 */
}

/* excerpt段落(muted-foreground色の<p>)にflex:1を与え、Next.js版
   (mt-2 flex-1 text-sm leading-relaxed text-muted-foreground)と同様に
   CTA「続きを読む」をカード下端付近へ揃える。production DOMのカード内
   2つの<p>のうち、excerptはhas-muted-foreground-color/has-text-color
   クラスを持つ(CTA側の<p>はhas-small-font-sizeのみで持たない)ため、
   この組み合わせで一意に特定できる。 */
.piyolabs-home-resources > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card > p.has-muted-foreground-color,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card
	> p.has-muted-foreground-color {
	flex: 1;
}

/* 【③カード上部アクセントバー】Next.js版の
   <span aria-hidden="true" class="h-1 w-8 rounded-full bg-primary" />を、
   production post_contentへ新しい要素を追加せずに.is-style-piyolabs-
   card::before(生成コンテンツ)で再現する。::beforeはカードの実際の
   最初の子要素(<h3>)の直前に視覚的に挿入される。margin-bottomは、
   Next.js版でバー自身にはmarginが無くタイトル<h3>側がmt-4(1rem)を
   持つことに合わせた値(実機確認でこのテーマのh3見出しは独自の
   margin-topを持たない(0px)ため、この値がそのまま見た目のgapになる)。 */
.piyolabs-home-resources > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card::before,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card::before {
	content: "";
	display: block;
	width: 2rem; /* Next.js版 w-8 */
	height: 0.25rem; /* Next.js版 h-1 */
	border-radius: 9999px; /* Next.js版 rounded-full */
	background-color: var(--wp--preset--color--primary); /* Next.js版 bg-primary */
	margin-bottom: 1rem; /* Next.js版タイトル側のmt-4(1rem)相当 */
}

/* 【⑧padding】共通の.is-style-piyolabs-cardはfluidな
   var(--wp--custom--spacing--card)(clamp(1.5rem,1.3rem+1vw,2rem)=
   24〜32px)を使うが、Next.js版(rounded-2xl border border-border
   bg-card p-6)のp-6は固定24pxでありfluidな値ではない
   (.piyolabs-resource-card、3339行目以降の既存コメントと同じ理由)。
   Home Resourcesスコープでのみ固定1.5rem(24px)へ上書きする(共通
   ルール自体、他ページ(Products・Principles・About・Support・rVAS等)の
   カードは変更しない)。
   [!importantが必要な理由] production DOMのカード<div>自身が
   style="padding:var(--wp--custom--spacing--card)"というインライン
   styleを持つ(実機Playwright確認で確認済み、wp:groupブロックの
   style.spacing.padding属性がそのままインラインstyleへシリアライズ
   されるため)。インラインstyleは、!important無しの外部スタイル
   シートのルールよりセレクタの詳細度に関わらず常に優先されるため、
   このHome Resourcesスコープのルールにも!importantが必要。 */
.piyolabs-home-resources > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card {
	padding: 1.5rem !important;
}

/* 【⑥hover背景色】共通ルール(45-55行目)は既にhover/focus-withinで
   border-colorをbrand色へ変える(このグローバルルール自体は変更せず、
   そのまま活用)。Next.js版のhover:bg-accent/50相当のbackground-color
   変化のみ、Home Resourcesスコープで追加する。rgba値は
   .piyolabs-resource-card:hover(3363行目以降)と同じ、accent #eef2f6の
   alpha 0.5を再利用する。Home Resourcesの3枚は全カードがリンク付き
   (ProductsShelfのComing soonカードのような非interactiveカードは
   存在しない)ため、:not(:has(a))のような抑制ルールは不要。 */
.piyolabs-home-resources > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card:hover,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card:hover {
	background-color: rgba(238, 242, 246, 0.5); /* accent #eef2f6 のalpha 0.5(Next.js版 hover:bg-accent/50) */
}

/* 【②カード全体クリック(stretched-link)】canonical linkはタイトルの<a>
   (h3の直下、production DOMで確認済み)。::afterでカード全体
   (position:relativeな.is-style-piyolabs-cardを基準にinset:0)を覆う。 */
.piyolabs-home-resources > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card > h3 > a::after,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card
	> h3
	> a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* 「続きを読む →」の<a>(2番目の<p>直下)に position:relative; z-index:1;
   を与え、上のstretched-link::after(z-index:auto)より手前の
   スタッキングコンテキストに置く。これにより、カード全体はタイトル
   リンクのクリック領域として機能しつつ、「続きを読む」自身の上を
   クリック/タップした場合はそのリンク自身が(同じURLへ)反応する
   (見た目・ポインター操作ともに壊れない)。「続きを読む」は引き続き
   独立したTab到達可能な要素として残り、同じURLへの重複リンクになる
   ことは解消しない(production post_content変更禁止のため、今回は
   対応しない既知の制約)。 */
.piyolabs-home-resources > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card > p > a,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card
	> p
	> a {
	position: relative;
	z-index: 1;
}

/* 【⑦focus-visible】タイトルの<a>自身の既定focus outlineを消し、::after
   側(カード全体、inset:0)にブランドカラーのフォーカスリングを表示する
   (ProductsShelf 1955行目以降と同じ技法)。「続きを読む」リンクの
   focus挙動は変更しない(ブラウザ標準のまま)。 */
.piyolabs-home-resources > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card > h3 > a:focus-visible,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card
	> h3
	> a:focus-visible {
	outline: none;
}
.piyolabs-home-resources > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card > h3 > a:focus-visible::after,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card
	> h3
	> a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* 【⑩768px以上で3列】WordPressコアのcore/columnsブロックは既定で
   782px未満flex-wrap:wrap !important・782px以上flex-wrap:nowrap
   !important(wp-includes/blocks/columns/style.css、ProductsShelf節の
   既存コメント参照)を持つ。Next.js版はmd:grid-cols-3(768px
   ブレークポイント)のため、768〜781pxの範囲で両者の列数が食い違う。
   この範囲を含め768px以上で確実に3列均等幅になるよう、flex-wrapと
   flex-basisを!important付きで上書きする(コア自身が!importantを
   使っているため対抗上必要。詳細度で勝つだけでは782px未満のコアの
   flex-wrap:wrap !importantには勝てないため、!important無しでは
   768〜781pxの範囲を救えない)。768px未満はコアの既定挙動(1列)を
   そのまま使い、追加のCSSは無い。 */
@media (min-width: 768px) {
	.piyolabs-home-resources > .wp-block-columns,
	body.home
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
		> .wp-block-columns {
		flex-wrap: nowrap !important;
	}
	.piyolabs-home-resources > .wp-block-columns > .wp-block-column,
	body.home
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href*="/resources/"])
		> .wp-block-columns
		> .wp-block-column {
		flex: 1 1 0 !important;
	}
}
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Home Support インタラクションパリティ (Phase 3F /                      */
/* feat/home-support-card-interaction)                                 */
/*                                                                      */
/* Home下部の6番目のトップレベルsection「サポート」(よくある質問/            */
/* ドキュメント・ヘルプ/お問い合わせの3カード)は、ProductsShelf(Phase 3     */
/* 開始 /feat/home-products-shelf、上の2041行目以降)・Home Resources        */
/* (Phase 3B /feat/home-resources-parity、上の2078行目以降)に既に施した    */
/* 「カード全体クリック可能化(stretched-link技法)」だけが、Home上で唯一     */
/* 未対応のまま意図的に後回しにされていた。今回このPhase 3Fでその差分を      */
/* 埋める。                                                              */
/*                                                                      */
/* 現在の本番post_content(production DOM、Content Importer再実行禁止・     */
/* 既存本文の再インポート禁止)を実機確認したところ、Supportの3カードは       */
/* いずれも構造が同一で、カード内に<a>が1つだけ(よくある質問/ドキュメント・  */
/* ヘルプは「見る →」の内部リンク、お問い合わせは「メールを送る →」の        */
/* a[href^="mailto:"])しか存在しない(Home Resourcesのようにタイトル<a>と    */
/* 「続きを読む」<a>が2つ独立して存在するケースとは異なる)。そのため         */
/* z-index調整(Home Resources 2277行目以降のような「2つ目のリンクを         */
/* stretched-linkより手前に出す」処理)は不要で、ProductsShelfと同様に        */
/* カード内の唯一の<a>にそのまま::afterを重ねるだけで、3カードとも           */
/* 「見る →」「メールを送る →」を含むカード全体がクリック可能になる。         */
/* post_content自体は一切変更しない(新しい<a>要素の追加はしていない)。      */
/*                                                                      */
/* 【スコープ選定】上の「4) Support」節(1805〜1827行目、Phase 4A.5/         */
/* fix/home-section-density-and-support-tone)で確定済みのTrack 1          */
/* (.piyolabs-home-supportクラス)+Track 2(お問い合わせカードの               */
/* a[href^="mailto:"]をkeyにしたposition-independent構造セレクタ)の         */
/* 組み合わせをそのまま再利用する。新しいセレクタは考案しない(nth-of-type    */
/* のような位置依存セレクタも使わない)。                                    */
/*                                                                      */
/* 【position:relativeの基準】ProductsShelf(1867行目以降)・Home Resources   */
/* (2146行目以降)と同じ技法で、.is-style-piyolabs-card自身にposition:       */
/* relativeを与え、::afterの位置決め基準にする。                           */
/*                                                                      */
/* 【意図的にやらないこと】共通ルール(45〜55行目)は既にhover/focus-within    */
/* 時にborder-colorをbrand色へ変える。Support3カードは全カードがリンク付き   */
/* (ProductsShelfのComing soonカードのような非interactiveカードは           */
/* 存在しない)であり、::afterがカード全体を覆うことで、この共通ルールが      */
/* カード全体のhoverでも:focus-withinでも変更なしにそのまま自然発火する。    */
/* そのためHome Resourcesの⑥のようなhover背景色の追加や、border-color       */
/* ルールの再宣言・上書きはここでは行わない(実装時に、この共通ルールが       */
/* 想定通り発火することをstyle.css読み合わせで確認済み)。                   */
/* ------------------------------------------------------------------ */

/* 【position:relative】stretched-linkの::afterの位置決め基準。 */
.piyolabs-home-support > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href^="mailto:"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card {
	position: relative;
}

/* 【カード全体クリック(stretched-link)】カード内の唯一の<a>(「見る →」/
   「メールを送る →」いずれも同じ構造)に::afterを重ね、カード全体
   (position:relativeな.is-style-piyolabs-cardを基準にinset:0)を覆う。 */
.piyolabs-home-support > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card a::after,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href^="mailto:"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card
	a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* 【キーボードフォーカス表示】ProductsShelf(2053行目以降)・Home Resources
   (2304行目以降)と同じ技法。<a>要素自身のブラウザ既定focus outlineは
   明示的に消し、::after側(inset:0でカード全体に重なる)にだけブランド
   カラーのフォーカスリングを表示する。 */
.piyolabs-home-support > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card a:focus-visible,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href^="mailto:"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card
	a:focus-visible {
	outline: none;
}
.piyolabs-home-support > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card a:focus-visible::after,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(.wp-block-columns .is-style-piyolabs-card a[href^="mailto:"])
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card
	a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Home Principles カードstretch/breakpoint/hover/padding/gapパリティ     */
/* (nth-of-type位置依存脱却)                                            */
/*                                                                      */
/* 【Track2セレクタ】上の「2) Principles(4番目のトップレベルsection)を    */
/* 白(background)へ戻す」節で確定した:has()/:not()構造セレクタ(カード内   */
/* に<a>を持たない、01/02/03バッジ構造を持つセクション)をここでも再利用    */
/* する。production実機(https://piyolabs.com/・/en/)でJA 1件・EN 1件      */
/* のみPrinciplesにマッチし、ProductsShelf等ホームの他セクションには       */
/* マッチしないことを確認済み(理由の詳細は同節コメント参照)。DOM構造は     */
/* section.wp-block-group > .wp-block-columns > .wp-block-column >        */
/* .is-style-piyolabs-card(content-data/pages-ja.php 290〜295行目、        */
/* production DOMともに一致、実機Playwright確認済み)。                    */
/* ------------------------------------------------------------------ */

/* 【カード等高化】Home Resources(2059行目以降)と同じ技法。768px以上で
   同一行3カードの.wp-block-columnとその中の.is-style-piyolabs-cardを
   display:flex; flex-direction:columnにし、flex:1 1 autoで高さを
   カードまで伝える。768px未満はコアの既定挙動(1カラムずつ折り返し)で
   各行にカードが1枚しか無いため実質影響せず、各カード自然高のままになる。 */
.piyolabs-home-principles > .wp-block-columns > .wp-block-column,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a))
	> .wp-block-columns
	> .wp-block-column {
	display: flex;
	flex-direction: column;
}
.piyolabs-home-principles > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a))
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* 【768px以上3列】WordPressコアのcore/columnsブロックは既定で782px未満
   flex-wrap:wrap !important・782px以上flex-wrap:nowrap !important
   (ProductsShelf・Home Resources節の既存コメント参照)を持つ。Next.js版
   基準の768pxとの差(768〜781px)を、Home Resources(2253行目以降)で確立
   済みのパターンをそのまま適用して吸収する。767px以下は独自の1列強制・
   3列化を追加せず、コアの既定挙動にそのまま委ねる。 */
@media (min-width: 768px) {
	.piyolabs-home-principles > .wp-block-columns,
	body.home
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:has(
			.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
		):not(:has(.wp-block-columns .is-style-piyolabs-card a))
		> .wp-block-columns {
		flex-wrap: nowrap !important;
	}
	.piyolabs-home-principles > .wp-block-columns > .wp-block-column,
	body.home
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:has(
			.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
		):not(:has(.wp-block-columns .is-style-piyolabs-card a))
		> .wp-block-columns
		> .wp-block-column {
		flex: 1 1 0 !important;
	}
}

/* 【hover/focus-within抑制】Principlesの3カードは<a>0件・<button>0件の
   非interactiveなカード(production実機確認済み)。共通ルール(45〜55行目)
   はhover/focus-withinでborder-colorをbrand色へ変えるが、Principlesは
   クリックできないカードのため通常のborder色へ戻す。共通ルール自体・
   cursor:pointer等のinteractive風スタイルは追加しない。 */
.piyolabs-home-principles > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card:hover,
.piyolabs-home-principles > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card:focus-within,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a))
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card:hover,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a))
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card:focus-within {
	border-color: var(--wp--preset--color--border);
}

/* 【padding】production DOMのカード自身がstyle="padding:var(--wp--
   custom--spacing--card)"というインラインstyleを持つ(実機Playwright
   確認済み、Home Resources 2136行目以降と同じ理由)ため!importantが
   必要。共通.is-style-piyolabs-cardのpadding自体は変更しない。 */
.piyolabs-home-principles > .wp-block-columns > .wp-block-column > .is-style-piyolabs-card,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a))
	> .wp-block-columns
	> .wp-block-column
	> .is-style-piyolabs-card {
	padding: 1.5rem !important;
}

/* 【gap】production DOMのwp:columnsインスタンス自身はblockGapをカスタム
   指定していない(実機確認: style属性はmargin-top:2.5remのみでgapは
   含まない)ため、id込みのこのセレクタは詳細度0のコア既定gapルールに
   !important無しで確実に勝つ(#products、1899行目以降と同じ理由)。 */
.piyolabs-home-principles > .wp-block-columns,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a))
	> .wp-block-columns {
	gap: 1.25rem; /* 20px, gap-5 */
}
/* ------------------------------------------------------------------ */

/* ==================================================================== */
/* 下層ページ共通PageHeader (Phase 4A.6 /                                 */
/* feat/common-page-header-and-rvas-top-seam)                           */
/*                                                                      */
/* [piyolabs_page_header] ショートコード(wordpress-plugin/piyolabs-core/  */
/* includes/page-header.php)が出力する<section class="piyolabs-page-     */
/* header">の見た目。Hero(上の「ホームHero」節)・rVASヒーロー(下の節)と   */
/* 同じ技術(box-shadow: 0 0 0 100vmax + clip-path: inset(0 -100vmax))で   */
/* surface背景・黄色アクセントバーをfull-bleed化する。                    */
/*                                                                      */
/* PageHeaderはGutenbergブロックではなく[piyolabs_page_header]が返す      */
/* 生HTMLであり、align:full・layout:constrainedいずれのブロック属性も     */
/* 持たない(親は#piyolabs-mainの直接の子であるプレーンなwp:shortcode      */
/* ブロック)。そのためWordPressコアのroot-padding-aware-alignments        */
/* (.has-global-padding)機構には依存せず、内側の.piyolabs-page-header__   */
/* inner自身がmax-width:1120px(theme.json settings.layout.contentSizeと   */
/* 同じ値)+margin-inline:autoで中央寄せ・幅制御を完結させる               */
/* (親から水平paddingを一切前提にしない自己完結型の構造)。                 */
/* ------------------------------------------------------------------ */

.piyolabs-page-header {
	position: relative;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface);
	clip-path: inset(0 -100vmax);
}
.piyolabs-page-header::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 0.25rem;
	background-color: var(--wp--preset--color--highlight);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--highlight);
	clip-path: inset(0 -100vmax);
	pointer-events: none;
}

/* 内側コンテンツ幅。縦paddingはHero/mainが使う共通のx-largeプリセット
   トークン(clamp(4rem, 3rem + 4vw, 6rem)、theme.json settings.spacing.
   spacingSizes参照)とは意図的に切り離し、PageHeader専用の固定値を使う。
   Next.js版 components/site/page-header.tsx の <Container className="py-12
   md:py-16"> と同じ py-12(3rem/48px)・md:py-16(4rem/64px、768px以上)を
   そのまま再現する(Hero等の他セクションとは異なる、PageHeader固有の
   縦paddingであることを明示するため、共有トークンは使わない)。 */
.piyolabs-page-header__inner {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
	padding-block: 3rem;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.piyolabs-page-header__inner {
		padding-block: 4rem;
	}
}

.piyolabs-page-header__kicker {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}
/* Next.js版 components/site/page-header.tsx の <h1 className="... text-4xl
   font-bold ... md:text-5xl"> と同じサイズを再現する(Tailwind text-4xl =
   2.25rem/36px、md:text-5xl = 3rem/48px、font-bold = 700)。font-familyは
   theme.json styles.typography.fontFamily(body全体でNoto Sans JPを継承)が
   既に効いているため、ここでは明示的に指定しない(Hero等の他の見出しも
   同様に個別のfont-family宣言を持たない)。 */
.piyolabs-page-header__title {
	margin-block: 0.5rem 0 0;
	font-size: 2.25rem;
	line-height: 1.15;
	font-weight: 700;
	/* [feat/resource-category-archive-header追記] resource_categoryタームの
	   表示名(例: "#DataOrganization")は、空白を含まない1語の長い英単語に
	   なり得る。Apps/About/Support等の既存タイトルは短い日本語句のため
	   これまで不要だったが、スマートフォン幅(390px)でこの種の長い1語が
	   コンテナ幅を超えてはみ出さないよう、既存ルールにoverflow-wrapのみを
	   追記する(新規セレクタは追加しない)。 */
	overflow-wrap: break-word;
}
@media (min-width: 768px) {
	.piyolabs-page-header__title {
		font-size: 3rem;
	}
}
.piyolabs-page-header__description {
	max-width: 40rem;
	margin-block: 1rem 0;
	color: var(--wp--preset--color--muted-foreground);
	font-size: 1rem;
	line-height: 1.7;
}
.piyolabs-page-header__meta {
	margin-block: 1rem 0;
	color: var(--wp--preset--color--muted-foreground);
	font-size: var(--wp--preset--font-size--small);
}

/* パンくず。色だけに頼らず、区切りにテキスト"/"を使い、現在地には
   aria-current="page"を付与する(includes/page-header.php参照)。 */
.piyolabs-breadcrumbs {
	margin-block-end: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
}
.piyolabs-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.piyolabs-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--wp--preset--color--muted-foreground);
}
.piyolabs-breadcrumbs__item a {
	color: inherit;
	text-decoration: none;
}
.piyolabs-breadcrumbs__item a:hover {
	color: var(--wp--preset--color--foreground);
	text-decoration: underline;
}
.piyolabs-breadcrumbs__item[aria-current="page"] {
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
}
.piyolabs-breadcrumbs__sep {
	color: var(--wp--preset--color--muted-foreground);
}

/* ------------------------------------------------------------------ */
/* PageHeader対象ページの target/non-target CSS分岐 (Step 4)。            */
/* body_class フィルター(piyolabs_page_header_body_class()、             */
/* includes/page-header.php)が付与する body.piyolabs-has-page-header /   */
/* body.piyolabs-page-context-{context} でスコープする。                  */
/* 対象外ページ(このクラスを持たない)には一切影響しない。                  */
/* ------------------------------------------------------------------ */

/* post-title(templates/page.htmlのwp:post-title)の非表示ルール。
   【重要】h1が2つ出力されるのを防ぐ実際の仕組みは、このCSSではなく
   wordpress-plugin/piyolabs-core/includes/page-header.php の render_block
   フィルター(piyolabs_page_header_suppress_post_title())側にある。対象ページ
   では core/post-title ブロックの出力そのものを空文字列にしているため、
   通常はこのセレクタに一致する要素自体がDOMに存在しない。
   このルールは、そのPHPフィルターが何らかの理由で効かなかった場合の
   見た目上のみのフォールバック(defense-in-depth)として残してあり、
   実害なく無害化されるだけの想定である。
   #piyolabs-mainのpadding-top(page.htmlのインラインstyle属性、
   var(--wp--preset--spacing--x-large))はインラインstyleのため、
   通常優先度のセレクタでは上書きできない。ここだけ!important を使う
   (このファイル冒頭の.piyolabs-header__surface・Principles/Support背景色
   上書きと同じ理由: コア/インラインの!importantクラスや属性に対抗する
   ための最小限の使用)。 */
body.piyolabs-has-page-header #piyolabs-main > .wp-block-post-title {
	display: none;
}
body.piyolabs-has-page-header #piyolabs-main {
	padding-top: 0 !important;
}

/* header→mainの隙間修正(発展版): <header>と<main>はいずれも
   templates/page.html・templates/page-rvas.htmlのルート直下の
   トップレベルの兄弟ブロックであり、WordPressコアのルートレベル
   blockGap機構(このファイル冒頭の「1) section間の余白(blockGap)の
   除去」節と同じ:where()ラップされた自動margin-block-start)は、
   post-content内の子要素だけでなく、テンプレートのルート階層にも
   同様に働きうる。これまでの修正(.piyolabs-rvas-hero・Track 2の
   section:first-of-typeへのmargin-block-start:0)は<main>の"最初の
   子要素"側だけを対象にしていたが、もし<main>自身(header直後の
   2番目のルート兄弟)にもルートレベルのblockGapがmargin-block-start
   として適用されていた場合、その修正だけでは隙間が解消されない
   可能性が残る。そのため、<main>自身にもmargin-block-start:0を
   明示的に適用する層を追加する(【未検証】実機・実ブラウザでの
   確認はできていないため、あくまで防御的な追加レイヤー)。
   既存の最初のsection単位のmargin-block-start:0リセット(直前の
   ブロック、およびrVASヒーロー節の.piyolabs-rvas-hero等)はそのまま
   残し、この<main>単位のルールを「その上にもう一段重ねる」形で
   併存させる(defense-in-depth、片方が何らかの理由で効かなくても
   もう片方が効く)。
   padding-top(直前のルール)とは別の問題(margin vs padding、
   header/main間の隙間 vs main内部の余白)のため、上の
   #piyolabs-main { padding-top: 0 !important; } とは独立したルールと
   する。ネガティブマージンは使わない・ヘッダーの高さ/sticky/
   admin-barオフセットのロジックには一切触れない・<main>が<header>の
   下に潜り込む(overlap/tuck)ことはない(margin-block-startを0にする
   だけで、位置をずらしたり負の値にしたりはしないため)。
   スコープはPageHeader対象6コンテキスト(body.piyolabs-has-page-header)
   とrVASページ(#piyolabs-main.piyolabs-rvas-page)のみで、ホームや
   他の対象外ページの#piyolabs-mainには一切影響しない。

   [Phase 4A.7 追記] このファイル上部に、`.wp-site-blocks >
   .piyolabs-site-header + #piyolabs-main { margin-block-start: 0; }`
   というサイトワイド(全9テンプレート共通)のルールを追加した。この
   ルールは#piyolabs-mainが全テンプレート共通のidであるため、実質的に
   このPageHeader/rVAS専用ルールが対象とする範囲を完全に包含する
   (=このルールは理論上は冗長になった)。それでもここでは削除せず
   そのまま残す。理由は、(1)このファイル全体の既存方針(defense-in-depth、
   片方が実機で何らかの理由で効かなくてももう片方が効く)に従うこと、
   (2)このルールを削除して実機で問題が起きた場合の切り分けが難しくなる
   ことを避けるため。実機・実ブラウザでの検証ができない環境である以上、
   「本当に冗長かどうか」自体も確定的には検証できていない。 */
body.piyolabs-has-page-header #piyolabs-main,
#piyolabs-main.piyolabs-rvas-page {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ */
/* Track 2: 既にConoHaへインポート済みのpost_content(Apps/About/Support)  */
/* が引き続き持つ、旧kicker+説明文の重複段落2つを非表示にする(Step 5)。   */
/* Track 1(新規インストール、content-data/pages-ja.php・pages-en.php)は  */
/* この2段落自体を既に削除済みのため、このルールは実質Track 2専用の       */
/* フォールバックとして機能する(Track 1に適用されても対象要素が存在せず   */
/* 実害はない)。#piyolabs-mainの.wp-block-post-content直接の子のみに      */
/* スコープし、ネストしたカード等の内部段落は対象にしない。               */
/* ------------------------------------------------------------------ */
body.piyolabs-has-page-header.piyolabs-page-context-apps
	#piyolabs-main
	> .wp-block-post-content
	> p:nth-child(-n + 2),
body.piyolabs-has-page-header.piyolabs-page-context-about
	#piyolabs-main
	> .wp-block-post-content
	> p:nth-child(-n + 2),
body.piyolabs-has-page-header.piyolabs-page-context-support
	#piyolabs-main
	> .wp-block-post-content
	> p:nth-child(-n + 2) {
	display: none;
}

/* Privacy/Terms: ユーザーの指摘どおり構造が異なる(kicker+説明文の2段落
   ではなく、「最終改定日」1段落のみが本文冒頭にある。
   wordpress-plugin/piyolabs-importer/includes/content-data/legal-render.php
   の piyolabs_importer_legal_page_html() 参照)。そのため上のApps/About/
   Supportと同じ「先頭2つ」ルールを流用せず、専用に「先頭1つ」だけを
   対象にする。 */
body.piyolabs-has-page-header.piyolabs-page-context-privacy
	#piyolabs-main
	> .wp-block-post-content
	> p:first-child,
body.piyolabs-has-page-header.piyolabs-page-context-terms
	#piyolabs-main
	> .wp-block-post-content
	> p:first-child {
	display: none;
}
/* ==================================================================== */

/* ==================================================================== */
/* rVASヒーロー上端の修正 (Phase 4A.6 / Step 7)                          */
/*                                                                      */
/* patterns/rvas-intro.php・content-data/pages-ja.php・pages-en.phpの    */
/* 最上部セクション(rVASのアイコン・タイトル・タグライン・概要文・CTA・   */
/* VAS画面を含む、align:full・piyolabs-full-bleed-section・              */
/* backgroundColor:surface)は、既に「サイト共通セクション背景の           */
/* full-bleed化」節(このファイル上部)の                                  */
/* .piyolabs-full-bleed-section.has-surface-background-color ルールで    */
/* 背景のfull-bleed化自体はカバーされている(Track 1・Track 2とも)。       */
/* このPRで新たに追加するpiyolabs-rvas-heroクラスは、まだ無かった         */
/* (1) 黄色アクセントバー、(2) 下端の境界線、の2点のみを追加する。         */
/* 技術はHero/PageHeaderと同じbox-shadow(100vmax)+clip-path方式。         */
/*                                                                      */
/* 【白い隙間(header直下)の実際の調査結果】                              */
/* ユーザーの想定(#piyolabs-mainのpadding-topが原因)を鵜呑みにせず、      */
/* templates/page-rvas.htmlを実際に読んで確認した: この<main>は           */
/* page.htmlと異なりpadding-top/bottomのstyle属性を最初から一切持たない   */
/* (前者は#piyolabs-mainにx-largeパディングを持つが、page-rvas.htmlは     */
/* 元から0)。また、theme.jsonのstyles.spacing.blockGap(1.5rem)による      */
/* margin-block-startは、WordPressコアのlayout(is-layout-constrained)     */
/* 標準機構により最初の子要素には適用されない(このファイル上部           */
/* 「1) section間の余白(blockGap)の除去」節のコメント参照、この前提は     */
/* ホームHeroにも共通)。theme.jsonのルート水平paddingもtop/bottomは0      */
/* (styles.spacing.padding.top/bottom)。以上の静的読解からは、            */
/* page-rvas.html自体に隙間の原因となる明示的なmargin/paddingは見当たら   */
/* ない。ただし実際のWordPressコアのブロックレイアウトCSS生成ロジックは   */
/* このリポジトリに同梱されておらず、実機・実ブラウザでの検証はできて     */
/* いない(【未検証】)。そのため、Home Hero節で既に採用されている         */
/* margin-block-start:0の明示リセットと同じ防御的な保険を、Track 1        */
/* (.piyolabs-rvas-hero)・Track 2(構造フォールバック)の両方に同様に       */
/* 適用しておく(仮に上記の想定が崩れていた場合の単一障害点を作らないため。 */
/* 対象要素が既に0の場合は無害)。100vw+negative-margin方式は使わず、      */
/* html/bodyへのoverflow-x変更も行わない。                                */
/* ------------------------------------------------------------------ */

.piyolabs-rvas-hero,
.piyolabs-rvas-page > .wp-block-post-content > section:first-of-type {
	position: relative;
	margin-block-start: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.piyolabs-rvas-hero::before,
.piyolabs-rvas-page > .wp-block-post-content > section:first-of-type::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 0.25rem;
	background-color: var(--wp--preset--color--highlight);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--highlight);
	clip-path: inset(0 -100vmax);
	pointer-events: none;
}
/* ==================================================================== */

/* ==================================================================== */
/* rVAS Hero画像の角丸 (feat/unify-rvas-screenshot-frame)                 */
/*                                                                      */
/* content-data/pages-ja.php・pages-en.phpのrVAS Hero画像ブロックは、     */
/* どちらもwp:groupコメントのJSON属性は同一の"style":{"border":           */
/* {"radius":"var:custom|radius|xxl"}}を持つ(byte-for-byte一致)。         */
/* ただし、そのすぐ下の実<img>タグ自体にはJA・ENどちらのソースにも        */
/* border-radiusのインラインstyleが書かれておらず(JSON属性と実HTMLが     */
/* 元々ズレている、このPR以前から存在するソース側の軽微な不備。新規       */
/* importでも再現する)、本番(ConoHa)の実際のpost_contentを直接確認した   */
/* ところ、JA側の/rvas/だけはこのズレとは別経路で角丸付き<img>を          */
/* 出力できている一方、EN側の/en/rvas-app/はそのまま角がとがった          */
/* <img>になっている。再インポートは行わない方針(標準運用)のため、       */
/* ソース側のJSON/HTMLのズレを直すのではなく、DB migrationでもなく、      */
/* CSS側だけでJA/ENとも確実に角丸を付ける形で解決する。                   */
/*                                                                      */
/* 上の「rVASヒーロー上端の修正」節で確立済みのTrack 1                    */
/* (`.piyolabs-rvas-hero`)・Track 2(`.piyolabs-rvas-page >               */
/* .wp-block-post-content > section:first-of-type`)の同じセレクタ対を、   */
/* Hero画像自身(2カラムのうち最後のカラムの                              */
/* `figure.wp-block-image > img`。ホームHeroのTrack 2フォールバックで      */
/* 使っているのと同じ構造上の絞り込み方)まで拡張する。JA側では既存の      */
/* インラインstyleと重複するだけで無害、EN側では実際に角丸を後付け        */
/* できる。スコープはHero画像の<img>1要素のみに絞ってあり、この           */
/* セクション内の他の画像(rVASアプリアイコン等)やページ全体には           */
/* 一切影響しない。角丸トークンはホームHero・rVAS Heroで共通の            */
/* var(--wp--custom--radius--xxl)を使う(新しいトークンは発明しない)。     */
/* ------------------------------------------------------------------ */
.piyolabs-rvas-hero > .wp-block-columns > .wp-block-column:last-child > figure.wp-block-image > img,
.piyolabs-rvas-page
	> .wp-block-post-content
	> section:first-of-type
	> .wp-block-columns
	> .wp-block-column:last-child
	> figure.wp-block-image
	> img {
	border-radius: var(--wp--custom--radius--xxl);
}
/* ==================================================================== */

/* ==================================================================== */
/* Phase 1: 共通の見た目パーツ(shared visual primitives)パリティ            */
/* (feat/shared-visual-primitives-parity)                               */
/*                                                                      */
/* docs/VISUAL_PARITY_AUDIT.md 5章の提案に基づく。サイト内の複数ページで     */
/* 繰り返し現れるNext.js/v0側の視覚パターンのうち、次の4つを再利用可能な     */
/* primitiveとして新設し、必須の5適用対象(Home Principles・rVAS「概要」・   */
/* rVAS「利用の流れ」・rVAS「補足機能」・Apps AppCard特徴リスト)、および     */
/* 確認済みの`SectionHeading`使用箇所全17箇所に適用する。                  */
/*                                                                      */
/* 4つのprimitive:                                                      */
/*   1. .piyolabs-badge-square    … 01/02/03固定サイズ正方形バッジ         */
/*   2. .piyolabs-section-heading--bar … 左端縦バー付きセクション見出し     */
/*   3. .piyolabs-step-list       … 丸番号バッジ付きステップカード(rVAS)   */
/*   4. .piyolabs-supporting-features … 補足機能カード化(rVAS)            */
/*                                                                      */
/* チェックマーク付きリスト項目(Apps AppCard特徴リスト)は、新規primitiveを */
/* 作らず既存の.piyolabs-feature-list(PR #23)をそのまま再利用した        */
/* (上の「ホームrVAS紹介セクション」節末尾の追記コメント参照。チェック     */
/* バッジと各liの構造はNext.js側と一致するが、外側<ul>のgap値は差分が     */
/* あり(Apps側0.625rem vs 共有クラス0.75rem)、その差は意図的に許容した   */
/* 上で既存primitiveを再利用するという判断をしている)。                  */
/*                                                                      */
/* Track1/Track2の考え方は、このファイル内の他のPhase節(Home section       */
/* rhythm・PageHeader等)と同じ: 新規インポート分(Track1、content-data/    */
/* pages-ja.php・pages-en.phpに新設classNameを付与)と、既にConoHaへ        */
/* インポート済みの旧post_content(Track2、post_content自体は書き換えず、   */
/* ページ内トップレベルsectionのnth-of-typeという構造的事実に基づくCSS      */
/* セレクタで後付けする)の両方をカンマ区切りで同じ宣言ブロックに束ねる。    */
/*                                                                      */
/* 【既知の未解決事項】About「大切にしていること」(2.7節)の5項目見出しは、  */
/* 現在も`<h3>✓ 研究者自身が自由に設計できること</h3>`のようにUnicode      */
/* チェックマーク文字がテキストノードそのものに埋め込まれたままである。     */
/* このPRはこの箇所を一切変更していない(CSSでは文字列除去ができず、Track2 */
/* が原理的に不可能なため、Hero端末フレーム(PR #22)と同種の「新規markupが */
/* 本質的に必要」なケースに該当する。安全な更新方法は別途検討が必要)。     */
/* 「大切にしていること」セクション自体の見出し(h2、テキストは「大切に     */
/* していること」のみでUnicode文字は含まない)には、下記の左端縦バー        */
/* primitiveを問題なく適用している(対象は5項目のh3ではなくセクション       */
/* 自体のh2)。 */

/* ------------------------------------------------------------------ */
/* 1) 01/02/03固定サイズ正方形バッジ (.piyolabs-badge-square)             */
/*                                                                      */
/* Next.js版 components/site/principles.tsx(33〜38行)・                */
/* app/rvas/page.tsx(85〜88行、概要3カード)がともに使う                  */
/* `inline-flex size-9 items-center justify-center rounded-lg           */
/* bg-secondary`(固定36×36px・角丸正方形)を再現する。                    */
/*                                                                      */
/* 対象の<p>はWordPressコアの`p.has-background`既定スタイルにより         */
/* `padding: 1.25em 2.375em`という横長パディングを持つため(このPRの       */
/* 実装前の見た目が「チップ状」になっていた直接の原因)、タグ+クラスの      */
/* p.piyolabs-badge-squareセレクタ(コアの`p.has-background`と同じ         */
/* 特異度、後方に読み込まれるテーマCSSとして上書きする)でこれを無効化し、   */
/* 固定サイズのinline-flexへ置き換える。!importantは使わない: テーマの      */
/* style.cssはWordPressコアのブロックライブラリCSSより後に読み込まれる     */
/* ため、同じ特異度(タグ+クラス)でも後勝ちで確実に上書きできる            */
/* (#rvas h2のようにコア自身が!importantを使っているケースとは異なる)。    */
/*                                                                      */
/* 【未検証】上記の「テーマCSSはコアのブロックライブラリCSSより後に        */
/* 読み込まれるため後勝ちで上書きできる」という判断は、標準的なWordPress   */
/* セットアップであれば理屈のうえでは正しいはず(p.piyolabs-badge-square・  */
/* p.has-backgroundは共に特異度(0,1,1)で並び、wordpress-theme/piyolabs/   */
/* functions.phpのスタイルenqueueには明示的な依存関係指定が無いが、        */
/* コアのブロックスタイルはwp-includes/default-filters.phpのフックで       */
/* それより先に登録されるため)。ただし、このファイルの他の箇所            */
/* (blockGap除去のコメント等)と同様、この読み込み順・カスケードに関する    */
/* 判断はこのセッション中に実際のWordPress/実ブラウザ環境で検証できて      */
/* いない(このリポジトリにWordPress本体は同梱されておらず、実機・実       */
/* ブラウザが無いため)。推論自体は妥当と考えているが、確認済みの事実       */
/* としては扱わないこと。                                                */
/*                                                                      */
/* [Track1] Home Principles(pages-ja.php 297行目以降・pages-en.php同型)  */
/* とrVAS「概要」(pages-ja.php 621行目以降)の01/02/03バッジ<p>に、        */
/* className「piyolabs-badge-square」を新設・付与した。                  */
/*                                                                      */
/* [Track2] 既にConoHaへインポート済みの旧post_content向けに、各カードが  */
/* `.is-style-piyolabs-card > p.has-secondary-background-color:first-   */
/* child`という構造(バッジ<p>は必ずカードグループの最初の子)を持つという  */
/* 事実を利用し、Home Principles・rVAS概要それぞれにスコープしたセレクタを */
/* 追加した。rVAS概要は引き続きnth-of-type(2)(#piyolabs-main.piyolabs-    */
/* rvas-pageの2番目のトップレベルsection)でスコープしているが、Home        */
/* Principlesは本PRでnth-of-type(4)位置依存を廃止し、上記1)の背景色ルール  */
/* と同じ:has()/:not()構造セレクタ(カード内に<a>を持たない、01/02/03      */
/* バッジ構造を持つセクション)でスコープするよう変更した(理由・実機検証    */
/* 結果の詳細は上記1)のコメント参照)。post_content自体は書き換えない。    */
p.piyolabs-badge-square,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a))
	.is-style-piyolabs-card
	> p.has-secondary-background-color:first-child,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(2)
	.is-style-piyolabs-card
	> p.has-secondary-background-color:first-child {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem; /* size-9 = 36px */
	height: 2.25rem;
	padding: 0;
	margin: 0;
	border-radius: var(--wp--custom--radius--lg);
	flex-shrink: 0;
	line-height: 1;
}

/* ------------------------------------------------------------------ */
/* 2) 左端縦バー付きセクション見出し (.piyolabs-section-heading--bar)      */
/*                                                                      */
/* Next.js版`SectionHeading`(components/site/container.tsx 70〜76行)は、 */
/* h2の直前に`<span aria-hidden className="h-6 w-1.5 shrink-0           */
/* rounded-full bg-primary md:h-7" />`を描画する。WordPress版は見出し     */
/* テキストがh2要素のテキストノードそのものであり(About「大切にしている  */
/* こと」のように別要素へ分離されていない)、新規<span>を追加する代わりに  */
/* h2自身を`display:flex`にし、`::before`生成コンテンツでバーを描画する    */
/* (PageHeaderの上部アクセントバー・.piyolabs-feature-listのバッジと      */
/* 同じ、新規DOM要素を追加しない疑似要素パターン)。                       */
/*                                                                      */
/* 適用対象は、docs/VISUAL_PARITY_AUDIT.md 2.1節末尾で`grep`により        */
/*確認済みの17箇所のみ(Home Principles + 以下16箇所)。h2以外の見出しや    */
/* このドキュメントに明記の無い箇所には一切適用しない:                    */
/*   - Home: ProductsShelf・Resources・Support(Principlesは別途対応済み) */
/*   - rVAS: 概要・主な機能・利用の流れ・アプリの画面・                   */
/*     データ管理とプライバシー・料金(6セクション)                        */
/*   - About: イントロ・大切にしていること・小規模な開発について・        */
/*     現在の製品(4セクション。About「お問い合わせ」セクションはaudit未    */
/*     確認のため対象外)                                                 */
/*   - Support: カテゴリから探す・使い方・FAQ(3セクション。Support        */
/*     「お問い合わせ」セクションはaudit未確認のため対象外)                */
/*                                                                      */
/* [Track1] 上記16箇所のh2に、className「piyolabs-section-heading--bar」 */
/* を新設・付与した(pages-ja.php・pages-en.php、同一位置)。Home           */
/* Principlesのh2にも同じクラスを追加済みだが、そちらは元々              */
/* .piyolabs-home-principlesという安定したセクションクラスを持つため、    */
/* `.piyolabs-home-principles h2`という既存クラス起点のセレクタのみでも   */
/* Track1コンテンツには効く(冗長だが実害はないため両方を列挙している)。   */
/*                                                                      */
/* [Track2] 既にConoHaへインポート済みの旧post_content向けに、各ページの  */
/* 本文が必ず一定の順序でトップレベルsectionを持つという構造的事実        */
/* (このPR作業時にpages-ja.php/pages-en.phpを直接確認・本節末尾のコメント */
/* 参照)を利用し、ページ別の安定したルート(`body.home #piyolabs-main`・   */
/* `#piyolabs-main.piyolabs-rvas-page`・                                */
/* `body.piyolabs-page-context-about #piyolabs-main`・                  */
/* `body.piyolabs-page-context-support #piyolabs-main`)+直接子           */
/* コンビネータ+ページ内トップレベルsectionのnth-of-type、という          */
/* Home Principles(PR #25/26)で確立済みのパターンでスコープした。         */
/* body.piyolabs-page-context-{about,support}は                         */
/* wordpress-plugin/piyolabs-core/includes/page-header.phpの             */
/* piyolabs_page_header_body_class()が該当ページに常に付与する安定した    */
/* bodyクラス。nth-of-typeは単独では使わず、必ず上記のページ別ルート       */
/* セレクタと組み合わせている。post_content自体は書き換えない。           */
/*                                                                      */
/* 【監査ドキュメントとの差異】docs/VISUAL_PARITY_AUDIT.md 2.2節の        */
/* rVAS「概要」バッジTrack2セレクタ案は`nth-of-type(2)`だったが、実際の    */
/* pages-ja.phpを本PRで直接確認した結果、rVASページのトップレベルsection  */
/* 順序は1=ヒーロー、2=概要、3=主な機能、4=利用の流れ、5=アプリの画面、   */
/* 6=データ管理とプライバシー、7=料金、8=もっと知りたいときは、で監査      */
/* ドキュメントの記述と一致することを確認済み。                          */
/*                                                                      */
/* 【Home Principlesのみ本PRで位置非依存化】rVAS/About/Supportは引き続き  */
/* nth-of-typeで並び順に依存しているが、Home Principlesだけは本PRで        */
/* 「1) Principles背景色ルール」と同じ:has()/:not()構造セレクタに置き換    */
/* えた(理由はそちらのコメント参照)。宣言値(display/align-items/gap)は   */
/* 変更していない。 */
.piyolabs-section-heading--bar,
.piyolabs-home-principles h2,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3) h2,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a)) h2,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(5) h2,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(6) h2,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(2) h2,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3) h2,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(4) h2,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(5) h2,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(6) h2,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(7) h2,
body.piyolabs-page-context-about
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(1) h2,
body.piyolabs-page-context-about
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(2) h2,
body.piyolabs-page-context-about
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3) h2,
body.piyolabs-page-context-about
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(4) h2,
body.piyolabs-page-context-support
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(1) h2,
body.piyolabs-page-context-support
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(2) h2,
body.piyolabs-page-context-support
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3) h2 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.piyolabs-section-heading--bar::before,
.piyolabs-home-principles h2::before,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3) h2::before,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:has(
		.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
	):not(:has(.wp-block-columns .is-style-piyolabs-card a)) h2::before,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(5) h2::before,
body.home
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(6) h2::before,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(2) h2::before,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3) h2::before,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(4) h2::before,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(5) h2::before,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(6) h2::before,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(7) h2::before,
body.piyolabs-page-context-about
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(1) h2::before,
body.piyolabs-page-context-about
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(2) h2::before,
body.piyolabs-page-context-about
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3) h2::before,
body.piyolabs-page-context-about
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(4) h2::before,
body.piyolabs-page-context-support
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(1) h2::before,
body.piyolabs-page-context-support
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(2) h2::before,
body.piyolabs-page-context-support
	#piyolabs-main
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3) h2::before {
	content: "";
	display: block;
	width: 0.375rem; /* w-1.5 */
	height: 1.5rem; /* h-6 */
	border-radius: 9999px;
	background-color: var(--wp--preset--color--primary);
	flex-shrink: 0;
}
@media (min-width: 768px) {
	.piyolabs-section-heading--bar::before,
	.piyolabs-home-principles h2::before,
	body.home
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(3) h2::before,
	body.home
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:has(
			.wp-block-columns .is-style-piyolabs-card > p.has-secondary-background-color:first-child
		):not(:has(.wp-block-columns .is-style-piyolabs-card a)) h2::before,
	body.home
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(5) h2::before,
	body.home
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(6) h2::before,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(2) h2::before,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(3) h2::before,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(4) h2::before,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(5) h2::before,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(6) h2::before,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(7) h2::before,
	body.piyolabs-page-context-about
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(1) h2::before,
	body.piyolabs-page-context-about
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(2) h2::before,
	body.piyolabs-page-context-about
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(3) h2::before,
	body.piyolabs-page-context-about
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(4) h2::before,
	body.piyolabs-page-context-support
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(1) h2::before,
	body.piyolabs-page-context-support
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(2) h2::before,
	body.piyolabs-page-context-support
		#piyolabs-main
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(3) h2::before {
		height: 1.75rem; /* md:h-7 */
	}
}
/* ------------------------------------------------------------------ */
/* 3) rVAS「利用の流れ」: カード化+丸番号バッジ (.piyolabs-step-list)      */
/*                                                                      */
/* Next.js版(app/rvas/page.tsx 140〜150行)は5列グリッドのカード          */
/* (`rounded-2xl border border-border bg-card p-5`)、各カードに          */
/* `inline-flex size-8 items-center justify-center rounded-full         */
/* bg-primary`の丸番号バッジを持つ。WordPress版は現状`<ol><li><strong>   */
/* …</strong> — …</li></ol>`という装飾のない箇条書きのみ                 */
/* (pages-ja.php 815〜833行目付近、確認済み)。                          */
/*                                                                      */
/* 各<li>は既に個別要素として存在するため新規ラッパーmarkupは不要。       */
/* 番号バッジは`.piyolabs-feature-list`(PR #23)と同じ「生成コンテンツで  */
/* 装飾要素を描画する」手法を使うが、今回はチェックマークではなく実際の    */
/* 連番を表示するため、`content: counter(list-item)`を使う。             */
/*                                                                      */
/* 【実機ヘッドレスChromeレンダリングで確認・修正済みのバグ】以前のこの    */
/* コメントは「list-itemカウンタはlist-styleの値に関わらず<li>へ暗黙に    */
/* 付与されるため、list-style:noneでマーカーを消してもcounter(list-item) */
/* は引き続き正しい連番を返す」と説明していたが、これは不正確だった。      */
/* list-style:noneが影響するのは可視マーカー(・や1.のようなグリフ)だけ    */
/* であり、暗黙のlist-itemカウンタ機構そのものには関係しない。実際に      */
/* 暗黙のcounter-incrementが発火する条件は「計算後のdisplay値がlist-item  */
/* であるボックス」であり、下の`.piyolabs-step-list li`ルールは           */
/* `display: flex;`で<li>のdisplay値を上書きしているため、暗黙の          */
/* list-itemカウンタは一切発火しない。結果としてcounter(list-item)は      */
/* 常に初期値の0を返し、バッジが1/2/3/4/5ではなく全て「0」と表示される    */
/* (実際にレビュアーがヘッドレスChromeでレンダリングして確認したバグ)。   */
/* 修正として、下の`.piyolabs-step-list li`ルールに明示的な                */
/* `counter-increment: list-item;`を追加し、display上書きで失われた       */
/* 暗黙のインクリメントを手動で復元した。これによりカードのflexレイアウト  */
/* を保ったまま1/2/3/4/5の正しい連番が描画される。                        */
/*                                                                      */
/* なお親要素である<ol>(この.piyolabs-step-list自身)側の                 */
/* `display: grid;`上書きは、この番号バグの原因ではない。list-itemの      */
/* カウンタ値は各<li>自身の暗黙counter-increment(今回は明示的に付与した   */
/* counter-increment)によって決まり、親<ol>のdisplay値には依存しない。    */
/* また、カウンタのスコープ自体はブラウザのUAスタイルシート               */
/* (`ol, ul, menu { counter-reset: list-item; }`)が<ol>要素に             */
/* counter-resetを設定することで作られており、これはdisplay値を問わず     */
/* 適用されるプロパティのため(<ol>がdisplay:noneでない限り)、<ol>を       */
/* display:gridにしても連番のリセット自体は問題なく機能する。             */
/*                                                                      */
/* [Track1] pages-ja.php・pages-en.phpの<ol>にclassName                 */
/* 「piyolabs-step-list」を新設・付与した。                              */
/*                                                                      */
/* [Track2] 既にConoHaへインポート済みの旧post_content向けに、           */
/* rVASページの4番目のトップレベルsection(利用の流れ)の直接の子である    */
/* <ol class="wp-block-list">という構造的事実(本PRで直接確認済み、        */
/* 監査ドキュメント2.2節の記述と一致)を利用したnth-of-typeセレクタを      */
/* 追加した。post_content自体は書き換えない。                            */
/*                                                                      */
/* レスポンシブ: このPRのタスク定義に明記の640/768/1024pxという           */
/* このプロジェクトの既存ブレークポイント慣例に合わせ、                   */
/* 1列(〜639px)→2列(640〜767px)→3列(768〜1023px)→5列(1024px〜)          */
/* と段階的に変化させる(5項目を2〜3列の中間帯で折り返す、というタスク     */
/* 要件を満たす具体的な割り当て)。各breakpointは、フッターグリッド        */
/* (.piyolabs-footer__nav-grid)など、このファイル内の既存グリッドと同じ   */
/* 慣例に合わせ`repeat(N, 1fr)`ではなく`repeat(N, minmax(0, 1fr))`を使う   */
/* (トラック内の最小コンテンツ幅(改行不可な長い単語・URL等)がトラック自体 */
/* を押し広げ、横スクロールの原因になることを防ぐため)。 */
.piyolabs-step-list,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(4)
	> ol.wp-block-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 2rem;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	.piyolabs-step-list,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(4)
		> ol.wp-block-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 768px) {
	.piyolabs-step-list,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(4)
		> ol.wp-block-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.piyolabs-step-list,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(4)
		> ol.wp-block-list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}
.piyolabs-step-list li,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(4)
	> ol.wp-block-list li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	list-style: none;
	/* display:flexで<li>の暗黙list-itemカウンタが発火しなくなるため、
	   明示的にcounter-incrementを付与して連番を復元する(詳細は上の
	   コメントブロック参照。list-style:noneはこの問題と無関係)。 */
	counter-increment: list-item;
	margin: 0;
	padding: 1.25rem; /* p-5 */
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xxl); /* rounded-2xl */
	background-color: var(--wp--preset--color--card);
}
.piyolabs-step-list li::before,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(4)
	> ol.wp-block-list li::before {
	content: counter(list-item);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem; /* size-8 = 32px */
	height: 2rem;
	margin-bottom: 0.75rem;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
	font-size: 0.875rem;
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 4) rVAS「補足機能」: カード化 (.piyolabs-supporting-features)          */
/*                                                                      */
/* Next.js版(app/rvas/page.tsx 125〜127行)は各項目が独立したカード       */
/* (`rounded-xl border border-border bg-card p-5`)。WordPress版は        */
/* カードスタイルを持たない、単なるwp:columns内のh4+pのみ                 */
/* (pages-ja.php 751〜798行目付近、確認済み)。                          */
/*                                                                      */
/* 4項目は既に`wp:columns`内の個別の`.wp-block-column`として独立した      */
/* ラッパー要素を持つため、新規ラッパーmarkupを追加せず、既存の            */
/* `.wp-block-column`自体にborder・背景色・paddingを直接適用する          */
/* (ユーザー指示「既存のwp-block-columnを利用し、新しいラッパーは          */
/* 追加しない」に従う)。列数のレイアウトはWordPressコアの                 */
/* `.wp-block-columns`既定flex挙動(782px単一ブレークポイントのみ)を       */
/* 上書きし、`display:grid`+640/1024pxの2段階ブレークポイントで           */
/* 「広い→4列・中間→2列・モバイル→1列」というタスク要件を満たす。         */
/* 各breakpointは.piyolabs-step-list・.piyolabs-footer__nav-gridと同じ     */
/* 慣例に合わせ`repeat(N, minmax(0, 1fr))`を使う(トラック内の最小        */
/* コンテンツ幅がトラックを押し広げ横スクロールの原因になることを防ぐ)。   */
/*                                                                      */
/* [Track1] pages-ja.php・pages-en.phpの該当wp:columnsブロックに          */
/* className「piyolabs-supporting-features」を新設・付与した。            */
/*                                                                      */
/* [Track2] 既にConoHaへインポート済みの旧post_content向けに、rVASページ  */
/* 3番目のトップレベルsection(主な機能)内の3番目の`.wp-block-columns`     */
/* (本PRで直接確認: 1番目=自由な実験設計/提示順序の管理、2番目=フリー     */
/* ハンドのVAS回答/XLSX形式で出力、3番目が実際の補足機能4項目)という       */
/* 構造的事実を利用したnth-of-typeセレクタを追加した。                    */
/*                                                                      */
/* 【監査ドキュメントとの差異】docs/VISUAL_PARITY_AUDIT.md 2.2節の        */
/* Track2セレクタ案は`.wp-block-columns:nth-of-type(2)`だったが、本PRで   */
/* pages-ja.phpを直接確認した結果、補足機能4項目は実際には3番目の         */
/* wp:columns(nth-of-type(3))であることを確認した(主な機能セクション内に  */
/* は補足機能を含めて計3つのwp:columnsが存在する)。監査ドキュメント側の   */
/* この1点の誤りを本PRで訂正し、nth-of-type(3)を採用している。            */
/* post_content自体は書き換えない。 */
.piyolabs-supporting-features,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3)
	> .wp-block-columns:nth-of-type(3) {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px) {
	.piyolabs-supporting-features,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(3)
		> .wp-block-columns:nth-of-type(3) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.piyolabs-supporting-features,
	#piyolabs-main.piyolabs-rvas-page
		> .wp-block-post-content
		> section.wp-block-group:nth-of-type(3)
		> .wp-block-columns:nth-of-type(3) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.piyolabs-supporting-features > .wp-block-column,
#piyolabs-main.piyolabs-rvas-page
	> .wp-block-post-content
	> section.wp-block-group:nth-of-type(3)
	> .wp-block-columns:nth-of-type(3)
	> .wp-block-column {
	flex-basis: auto;
	margin: 0;
	padding: 1.25rem; /* p-5 */
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl); /* rounded-xl */
	background-color: var(--wp--preset--color--card);
}
/* ==================================================================== */

/* ==================================================================== */
/* サイト共通フッター (Phase 4A.7 / feat/global-shell-and-footer-parity)  */
/*                                                                      */
/* Next.js版 components/site/site-footer.tsx を唯一の正解として再現する。 */
/* マークアップはPHP側(wordpress-plugin/piyolabs-core/includes/          */
/* footer.php の piyolabs_footer_render())が組み立てて返す               */
/* ([piyolabs_site_footer]ショートコード、parts/footer.html参照)。        */
/* WordPressコアのグローバルスタイル(wp:columnsのgap、リストのbullet、    */
/* リンク色・visited色)が漏れ込まないよう、色・フォントサイズ・余白・      */
/* list-style・text-decoration・visited色をすべてこのセクションの専用     */
/* クラスで明示的に上書きする(要件「CSS scoping discipline」)。           */
/* !importantは使わない(WordPressコアのbackground-colorユーティリティ    */
/* クラス(has-background)以外、ここで上書きが必要な!important付きコア     */
/* ルールは無いと判断したため。has-background自体は                       */
/* .piyolabs-footer__surface に対して背景色を単純に設定するだけで上書き    */
/* の必要が無いため、こちらも!important不要)。                            */
/* ------------------------------------------------------------------ */

/* 外側のsurface div(parts/footer.html参照)。実際の<footer>要素自体は     */
/* WordPressのarea-tag fallback経由でtemplates/*.html側が生成する         */
/* (Part 2、className:"piyolabs-site-footer")。ここでは背景色・文字色は    */
/* ブロックエディター側の属性(backgroundColor:"primary"・                 */
/* textColor:"primary-foreground")がhas-primary-background-color/         */
/* has-primary-foreground-color/has-text-color/has-backgroundとして        */
/* 既に出力するため、このセレクタ自体には追加のCSSは不要(将来ここに        */
/* 何かを足す場合の差し込み先として、意図的に空のセレクタを残す)。          */
.piyolabs-footer__surface {
}

.piyolabs-footer__inner {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
	padding-block: 3.5rem; /* Next.js版 py-14 */
	box-sizing: border-box;
}

.piyolabs-footer__main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2.5rem; /* Next.js版 gap-10 */
}
@media (min-width: 768px) {
	.piyolabs-footer__main {
		flex-direction: row;
		justify-content: space-between;
	}
}

.piyolabs-footer__brand {
	max-width: 24rem; /* Next.js版 max-w-sm */
}

/* ロゴ。フッターの背景色は既にprimary(濃紺)固定のため、暗い背景でも
   視認できるよう用意されたdark variant(includes/footer.php の
   piyolabs_footer_logo_html()が参照するpiyolabs-horizontal-dark.svg)を
   使う。ヘッダー側(通常のpiyolabs-horizontal.svg、明るい背景用)とは
   参照するSVGファイル自体が異なる。 */
.piyolabs-footer__logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}
.piyolabs-footer__logo-image {
	display: block;
	height: 2rem;
	width: auto;
}

.piyolabs-footer__description {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625; /* Next.js版 leading-relaxed */
	color: var(--wp--preset--color--primary-foreground);
	opacity: 0.7; /* Next.js版 text-primary-foreground/70 の近似(直接のopacity指定、
	                 【未検証】実際のTailwindのアルファ合成チャンネルと厳密に同一の
	                 色計算ではないが、単色テキストへの視覚効果としては同等と判断) */
}

.piyolabs-footer__nav-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem; /* Next.js版 gap-10 */
	width: 100%;
}
@media (min-width: 640px) {
	.piyolabs-footer__nav-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* 768px以上(.piyolabs-footer__mainがrow方向のflexコンテナになる幅、上の
   .piyolabs-footer__main側@media参照)では、Next.js版の実際のグリッド
   (className末尾がgap-10 sm:grid-cols-3で終わり、w-full相当の強制は
   持たない)に合わせ、width:100%の固定を外す。width:100%のままだと、
   flexコンテナ内でブランド列(.piyolabs-footer__brand、max-width:24rem)より
   ナビグリッド側が意図せず幅を専有し、ブランド列を必要以上に狭めてしまう
   (フッター全体の横幅が広いビューポートほど顕著)。flex: 0 1 auto を
   明示することで、flexアイテムとしての既定の伸長(flex-grow初期値である
   0自体は変えていないが、align-items:flex-startなflex-basis:autoの
   flexコンテナでwidth:100%が単独で残ることによる意図しない拡張を避け、
   グリッド自身のコンテンツ(3列ぶんのminmax(0,1fr))で幅が決まる
   auto sizingに委ねる)。 */
@media (min-width: 768px) {
	.piyolabs-footer__nav-grid {
		width: auto;
		flex: 0 1 auto;
	}
}

.piyolabs-footer__column {
	min-width: 0;
}

.piyolabs-footer__heading {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.025em; /* Next.js版 tracking-wide */
	color: var(--wp--preset--color--primary-foreground);
	opacity: 0.6; /* Next.js版 text-primary-foreground/60 の近似(上の
	                 .piyolabs-footer__description コメントと同じ考え方) */
}

.piyolabs-footer__list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* リンク色・hover・visited色。要件どおり:visitedを明示的にリセットし、
   ブラウザ既定(紫/青)にならないようにする。theme.jsonのグローバル
   リンク色(styles.elements.link、色はbrand・hoverはprimary)を
   このクラス自身が上書きする(class 1つの詳細度でも、WordPressコアが
   グローバルelementスタイルを:where()で出力する限り上回れる)。 */
/* [Phase 2D / feat/resource-related-content-phase2d]
   768px幅での横スクロール修正(min-width:768pxで.piyolabs-footer__mainが
   flex-direction:rowへ切り替わり、フッター「お問い合わせ」列に割り当てられる
   実際の横幅が縦積み時より大きく狭まるタイミングと一致)。
   実ブラウザ(Playwright、390/768/1024/1440px)で
   document.documentElement.scrollWidth/getBoundingClientRect()を使って
   実測したところ、原因は.piyolabs-footer__linkそのものの折り返し不能ではなく、
   お問い合わせ列のメールアドレスリンク(piyopy.lab@gmail.com、空白を含まない
   1つの連続したトークン)だけがoverflow-wrapを持たず、768px時点の列幅を
   右へはみ出していたことだった(実測: 右端822px、ビューポート幅768px、
   scrollWidth 821px。ナビ/規約列の各リンクは元々スペースを含む文言のため
   通常のwhite-space:normalの折り返しだけで収まっており、対象外)。
   .piyolabs-resource-category-pill a・.piyolabs-resource-toc__item a と
   同じ考え方(word-break:break-allは使わず、他に折り返せる場所が無い場合に
   限って単語内で折り返すoverflow-wrap:anywhereのみを使う)で、
   .piyolabs-footer__link自身にoverflow-wrap:anywhereを追加する。
   ナビ列・規約列など元々折り返し不要なリンクの見た目には影響しない
   (スペースの無い長いトークンを含むリンクにのみ効果を持つルールのため)。 */
.piyolabs-footer__link {
	font-size: 0.875rem;
	color: var(--wp--preset--color--primary-foreground);
	opacity: 0.85; /* Next.js版 text-primary-foreground/85 の近似 */
	text-decoration: none;
	transition: opacity 0.15s ease;
	overflow-wrap: anywhere;
}
.piyolabs-footer__link:visited {
	color: var(--wp--preset--color--primary-foreground);
}
.piyolabs-footer__link:hover {
	color: var(--wp--preset--color--primary-foreground);
	opacity: 1;
	text-decoration: none;
}

.piyolabs-footer__bottom {
	margin-top: 3rem; /* Next.js版 mt-12 */
	padding-top: 1.5rem; /* Next.js版 pt-6 */
	border-top: 1px solid rgba(255, 255, 255, 0.15); /* primary-foreground(#ffffff、
		theme.json参照)を15%不透明度にした近似値。primary-foregroundが常に
		#ffffffであることを前提にしたrgba直書き(.piyolabs-header__surfaceの
		rgba(255,255,255,0.9)コメントと同じ理由・同じ手法)。 */
}

.piyolabs-footer__copyright {
	margin: 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--primary-foreground);
	opacity: 0.6; /* Next.js版 text-primary-foreground/60 の近似 */
}
/* ==================================================================== */

/* ==================================================================== */
/* リソース記事詳細ページ ヒーロー帯                                      */
/* (Phase 2A / feat/resource-article-detail-parity-phase2a)              */
/*                                                                      */
/* [piyolabs_resource_breadcrumb]/[piyolabs_resource_excerpt]/           */
/* [piyolabs_resource_meta] ショートコード(wordpress-plugin/piyolabs-core/*/
/* includes/resource-meta.php)と、templates/single-resource.htmlの        */
/* .piyolabs-resource-heroグループ(既存のcontentSize:760pxグループ自身に   */
/* このクラスを追加、新規の__innerラッパーは作らない)の見た目。            */
/*                                                                      */
/* Next.js版 app/resources/[slug]/page.tsx の「記事上部」セクション        */
/* (66〜96行目、<section className="border-b border-border bg-surface">   */
/* <Container className="py-10 md:py-14">)を唯一の正解として再現する。     */
/* 下層ページ共通PageHeader(上の節、includes/page-header.php)と同じ       */
/* full-bleed技法(box-shadow: 0 0 0 100vmax + clip-path: inset(0 -100vmax))*/
/* をsurface背景に使うが、Next.js版のこのセクションはbg-surface border-bの */
/* みで、PageHeaderのような黄色アクセントバー(::before)を持たないため、    */
/* 意図的に::beforeは追加しない(参照に忠実に再現する)。                    */
/* 縦paddingもPageHeaderのpy-12/md:py-16とは異なるNext.js版py-10/md:py-14  */
/* を再現するため、共有トークンやPageHeader側の値を流用せず独立させる。     */
/* ------------------------------------------------------------------ */

.piyolabs-resource-hero {
	position: relative;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--surface);
	clip-path: inset(0 -100vmax);
	padding-block: 2.5rem; /* Next.js版 py-10(2.5rem/40px) */
}
@media (min-width: 768px) {
	.piyolabs-resource-hero {
		padding-block: 3.5rem; /* Next.js版 md:py-14(3.5rem/56px) */
	}
}

/* 記事タイトル(h1)。
   [Phase 2C / feat/resource-article-alignment-phase2c]
   .piyolabs-resource-heroのcontentSizeを760px→1120pxへ広げたことで、
   タイトル自体がコンテナ幅いっぱいまで伸びて読みにくくなるのを防ぐため、
   Next.js版 <h1 className="max-w-3xl ..."> (max-w-3xl=48rem/768px)に合わせ、
   コンテナではなく要素側にmax-widthを付けて行長のみを制御する
   (左端の位置は動かさない)。 */
.piyolabs-resource-hero .wp-block-post-title {
	max-width: 48rem;
}

/* リード文(抜粋)。Next.js版 <p className="mt-4 max-w-2xl text-[16px]
   leading-relaxed text-muted-foreground md:text-base"> を再現する
   (text-[16px]とmd:text-baseは実質どちらも16px相当のため、単一の
   font-size:1remで両方カバーする)。 */
.piyolabs-resource-hero__excerpt {
	margin-block: 1rem 0;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--wp--preset--color--muted-foreground);
}

/* メタ情報行(公開日・更新日・読了時間)。Next.js版 <div className="mt-5
   flex flex-wrap items-center gap-x-5 gap-y-2 text-sm text-muted-foreground">
   を再現する。 */
.piyolabs-resource-hero__meta {
	margin-block: 1.25rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1.25rem;
	row-gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted-foreground);
}

/* 読了時間項目のみ、時計アイコンとラベルを横並びにする
   (Next.js版 <span className="inline-flex items-center gap-1.5">)。 */
.piyolabs-resource-hero__meta-item--reading {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

/* 時計アイコン(装飾のみ、includes/resource-meta.php の
   piyolabs_resource_clock_icon_svg()参照)。装飾用インラインSVGの
   既存の作法どおり、SVG自体はwidth/height属性を持たずCSSでサイズ制御する
   (Next.js版 lucide-react Clockアイコンの size-3.5=0.875remを再現)。 */
.piyolabs-resource-hero__clock-icon {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
}
/* ==================================================================== */

/* ==================================================================== */
/* リソースカテゴリピル(カード内バッジ)の折り返し                          */
/* (feat/resource-category-archive-header PR #40 レビュー対応追記)         */
/*                                                                      */
/* .piyolabs-resource-category-pill は archive-resource.html・            */
/* taxonomy-resource_category.html・single-resource.htmlの3テンプレート    */
/* すべてのwp:post-termsブロック(resource_category)に共通で付与されている  */
/* クラスだが、これまで専用CSSが一切無く、WordPressコアのpost-terms        */
/* ブロック既定の見た目(各termを<a>としてそのまま出力するだけ)に            */
/* 依存していた。#DataOrganizationのような空白を含まない長い1語の英語      */
/* カテゴリ名が、390px幅の3カラムカードグリッド内でこの既定の見た目に       */
/* なると、折り返し先が無いためテキストがカード境界で視覚的に途切れる       */
/* (ページ全体が横スクロールするわけではなく、ピル自身の中で文字が          */
/* 見切れる)。#VAS・#データ整理のような短い/日本語のカテゴリ名は           */
/* 元々問題なく収まっているため、他のa要素・他のクラスには一切影響させず、  */
/* このクラス(と、その中の<a>)にだけ折り返しを許可する。                   */
/*                                                                      */
/* word-break: break-allは単語のどの位置でも構わず改行してしまい可読性を   */
/* 落とすため使わない。overflow-wrap: anywhereであれば、他に折り返せる     */
/* 場所(空白等)が無い場合に限って単語内で折り返すため、日本語・短い英語    */
/* カテゴリ名の見た目には影響しない。font-sizeを縮小して押し込む対応・      */
/* overflow: hiddenによる非表示・text-overflow: ellipsisによる省略は、     */
/* いずれもカテゴリ名の文字が最後まで読めなくなるため採用しない。           */
/* ------------------------------------------------------------------ */

.piyolabs-resource-category-pill {
	min-width: 0;
	max-width: 100%;
}

.piyolabs-resource-category-pill a {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}
/* ==================================================================== */

/* ==================================================================== */
/* リソース一覧(archive-resource.html・taxonomy-resource_category.html   */
/* 共通) 最終パリティ                                                     */
/* (Phase 2H / fix/resource-list-parity-phase2h、                        */
/*  Phase 2I / fix/resource-list-final-parity-phase2i で全面改訂)         */
/*                                                                      */
/* [piyolabs_resource_archive_grid]・[piyolabs_resource_archive_featured] */
/* ショートコード(wordpress-plugin/piyolabs-core/includes/                */
/* resource-archive-cards.php)が出力するHTMLへのCSS。Phase 2Iで、        */
/* これらのショートコードがgrid本体(<ul>+<li>+カード<div>)まで自前で      */
/* 組み立てる設計に変更したため(理由はresource-archive-cards.php冒頭の     */
/* docblock参照、wp:query/wp:post-templateブロックは使わなくなった)、      */
/* 以前WordPressコアのQuery Loopブロックが自動生成していたgrid本体・      */
/* カードのCSS(display:grid・gap・grid-template-columns・カード自身の     */
/* border/padding/background-color等)もこのセクションで自前定義する。     */
/*                                                                      */
/* 【カード高さ揃え(Phase 2H由来)】実機Playwright測定で、grid行の各      */
/* カードの可視高さが同一行内で最大約300px不揃いになる不具合を確認した     */
/* (原因: 画像スロットの有無・タイトル/抜粋の長さの違い)。Next.js版       */
/* (app/resources/page.tsx・app/en/resources/page.tsx)の一覧カードが      */
/* `flex flex-col`のリンク要素+`flex-1`の抜粋文<p>で実現しているのと同じ  */
/* 考え方を踏襲する: <li>はCSS Gridの既定align-items:stretchで行の高さ    */
/* まで揃い、カード自身(.piyolabs-resource-card)をheight:100%のflex      */
/* columnにしたうえで.piyolabs-resource-archive-card__excerptにflex:1を   */
/* 与えて余白を吸収させる。固定pxの高さ指定・JavaScriptによる高さ計測・    */
/* overflow:hiddenによる切り詰めはいずれも使わない。                      */
/*                                                                      */
/* 【grid列数・gap(Phase 2H由来、gapはコードレビュー指摘でPhase 2Iで修正)】*/
/* Next.js版は`grid gap-5 md:grid-cols-2 lg:grid-cols-3`(768px未満1列・    */
/* 768〜1023px2列・1024px以上3列、gap-5=1.25rem=20px)。Phase 2Hでは        */
/* WordPressコアのQuery Loopブロックが自動生成していたgap(1.5rem=24px)を   */
/* そのまま踏襲していたが、Next.js版のgap-5(1.25rem)とは一致していなかった */
/* ため、Phase 2Iのコードレビューで指摘され1.25remへ修正した。             */
/*                                                                      */
/* 【カード全体クリックの実現方法(stretched link技法、Phase 2I由来)】      */
/* Next.js版はカード全体を1つの<a>で包むが、includes/related-resources.php */
/* と同じ理由(<a>の中に<h3>/<p>のようなブロックレベル要素が入れ子になると  */
/* wpautop処理が<a>を破損させる実バグ、resource-archive-cards.php冒頭の    */
/* docblock参照)により、実際にクリック可能な要素はタイトル内の<a>          */
/* (.piyolabs-resource-archive-card__link)1つに絞り、position:relativeな   */
/* 親(.piyolabs-resource-card)に::afterで重ねてカード全体をクリック        */
/* 可能にする。                                                          */
/* ------------------------------------------------------------------ */

/* PageHeader直下〜resource一覧コンテンツ全体のSection相当の上下padding
   (コードレビュー(2回目)指摘で追加)。Next.js版 components/site/container.tsx
   のSectionコンポーネント(`py-16 md:py-24`)と同じ、mobile 64px・768px
   以上96pxのハード切り替え(theme.jsonのspacing"x-large"はfluid
   clamp(4rem,3rem+4vw,6rem)で連続的に変化するため、Next.js版の768px
   固定breakpointとは一致しない。そのため既存presetは再利用せず、
   Tailwindのmd:breakpoint(768px)と揃えたリテラル値を使う)。
   archive-resource.html専用のクラス名でscopeし、taxonomy-resource_category.html
   (category archive)には適用しない(Next.js版にcategory archiveページ
   自体の参照実装が無いため)。#piyolabs-main自身のbottom paddingは
   archive-resource.html側でこのwrapperと二重にならないよう0にしている
   (archive-resource.html側のコメント参照)。 */
.piyolabs-resource-archive-main {
	padding-top: 4rem; /* Next.js版 Section py-16 */
	padding-bottom: 4rem;
}
@media (min-width: 768px) {
	.piyolabs-resource-archive-main {
		padding-top: 6rem; /* Next.js版 Section md:py-24 */
		padding-bottom: 6rem;
	}
}

.piyolabs-resource-archive-grid {
	display: grid;
	align-items: stretch;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 768px) {
	.piyolabs-resource-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.piyolabs-resource-archive-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* <li>自身をflexコンテナにする(display:flex)。CSS Gridの自動行の高さ
   (grid-auto-rows:auto)は、パーセンテージ指定の高さを持つ子孫を無視して
   計算されるため、.piyolabs-resource-card側にheight:100%を使うと、
   行の自動高さ計算とその後のstretch適用の間で循環参照が生じ、実機
   Playwright測定でカード自身の可視高さが<li>の高さを約64px超えて
   はみ出す不具合を確認した。<li>をflexコンテナにし、カード側は
   height:100%ではなくflexboxの既定のalign-items:stretchで高さを
   決定させることで、この循環参照を避ける(グリッド行の自動高さ計算は
   カードの本来のコンテンツ量に基づいて正しく行われ、その後flexboxが
   確定済みの高さへ素直にstretchする)。 */
.piyolabs-resource-archive-grid__item {
	display: flex;
	margin: 0;
	min-width: 0;
	min-height: 0;
}

/* [コードレビュー(2回目)指摘でpaddingを固定値へ修正] Next.js版の通常カード
   (`rounded-2xl border border-border bg-card p-6`)のp-6は固定24pxであり、
   fluidな値ではない。従来は--wp--custom--spacing--card(clamp(1.5rem,
   1.3rem+1vw,2rem)=24〜32pxのfluid値)を流用していたが、Next.js版と
   完全に一致させるため固定1.5rem(24px)のリテラル値へ変更した
   (featuredカードのbody/media側のp-6/p-8は元々固定値のままで変更不要)。 */
.piyolabs-resource-card {
	position: relative; /* タイトルリンクのstretched linkの基準 */
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	border-radius: var(--wp--custom--radius--xl);
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--card);
	padding: 1.5rem;
	transition: border-color 150ms ease, background-color 150ms ease; /* Next.js版 transition-colors相当 */
}

/* Next.js版のhover:border-brand/40 hover:bg-accent/50と同じ値
   (.piyolabs-related-resources__card:hover・.piyolabs-resource-rvas-cta:hover
   と同じrgba値を再利用)。カード自身が独自のborder/background-color宣言を
   持つ(wp:groupのbackgroundColor属性経由のWordPressコア自動生成
   !importantクラスに依存しない)ため、!importantは不要。 */
.piyolabs-resource-card:hover {
	border-color: rgba(51, 89, 122, 0.4);
	background-color: rgba(238, 242, 246, 0.5);
}

.piyolabs-resource-archive-card__excerpt {
	flex: 1;
	margin: 0.5rem 0 0; /* Next.js版 mt-2 */
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.625; /* leading-relaxed */
	color: var(--wp--preset--color--muted-foreground);
	overflow-wrap: anywhere;
}

/* [コードレビュー(2回目)指摘でtypographyを修正] Next.js版ArticleMeta
   (`flex flex-wrap items-center gap-2 text-xs text-muted-foreground`)の
   text-xsは12px/16px(line-height)。theme.jsonに12px固定のfont-size
   presetが無いため(smallは14px)、リテラル値を使う。カテゴリバッジ
   (badge span)自体には独自のtext-sizeクラスが無くこのtext-xsを継承する
   ため、__categoryも同じ12px/16pxにする。 */
.piyolabs-resource-archive-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem; /* Next.js版 gap-2 */
	font-size: 0.75rem; /* Next.js版 text-xs */
	line-height: 1rem;
	color: var(--wp--preset--color--muted-foreground);
}

.piyolabs-resource-archive-card__category {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere; /* .piyolabs-resource-category-pillと同じ折り返し安全策 */
	border-radius: 9999px;
	padding: 0.25rem 0.625rem; /* Next.js版 px-2.5 py-1 */
	font-size: 0.75rem; /* Next.js版 text-xs(親要素から継承する値と同じ) */
	line-height: 1rem;
	font-weight: 600;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary-foreground);
}

/* [コードレビュー(2回目)指摘でline-heightを修正] Next.js版通常カード
   タイトル(`text-base font-bold`)のtext-baseは16px/24px(line-height)。
   font-sizeはtheme.jsonのmediumプリセット(16px固定)と完全一致するため
   そのまま使うが、line-heightは1.3(独自値)ではなくNext.js版と同じ
   1.5rem(24px)を明示する。 */
.piyolabs-resource-archive-card__title {
	margin: 0.75rem 0 0; /* Next.js版 mt-3 */
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5rem; /* Next.js版 text-base の line-height(24px) */
	color: var(--wp--preset--color--foreground);
	overflow-wrap: anywhere;
}

/* タイトルの実際のリンク(stretched link)。テキスト色はタイトル自身の
   色を継承し、リンクらしい下線・別配色は付けない(Next.js版のタイトル自体に
   リンク特有の装飾が無いため、.piyolabs-related-resources__card-linkと
   同じ方針)。 */
.piyolabs-resource-archive-card__link {
	color: inherit;
	text-decoration: none;
}
.piyolabs-resource-archive-card__link:visited {
	color: inherit;
}
.piyolabs-resource-archive-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
/* キーボード操作時のみ、カード全体にフォーカスリングを表示する
   (:focus-visibleのみを対象にし、マウスクリック直後の:focusでは
   表示しない。要件「mouse hoverだけ再現してaccessibilityを悪化させない」
   への対応)。::afterがカード全体(inset:0)に重なっているため、その
   ::after自体にoutlineを与えることでカード全体を縁取れる。
   <a>要素自身のブラウザ既定focus outline(タイトルのテキスト範囲だけを
   囲む、狭くて意図と異なる見た目になる)は明示的に消し、::after側の
   outlineだけを見せる(実機Playwright確認で、既定outlineを消さないと
   ::after側と二重に、かつ既定側が視覚的に優先される形で残ることを
   発見した)。 */
.piyolabs-resource-archive-card__link:focus-visible {
	outline: none;
}
.piyolabs-resource-archive-card__link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* [コードレビュー(2回目)指摘で構造変更] 通常カードCTAのtop marginは
   Next.js版124行目 `mt-4 inline-flex items-center gap-1 ...`のmt-4
   (16px、既存のまま変更なし)。featuredカードCTAは102行目
   `mt-5 inline-flex items-center gap-1.5 ...`のmt-5(20px、下の
   __featured__readmore-wrapで別途定義)。 */
.piyolabs-resource-archive-card__readmore-wrap {
	margin: 1rem 0 0; /* Next.js版 mt-4(通常カード) */
}
.piyolabs-resource-archive-featured__readmore-wrap {
	margin: 1.25rem 0 0; /* Next.js版 mt-5(featuredカード) */
}
/* ラベル+矢印アイコンを横並びにする(Next.js版の
   `inline-flex items-center gap-1`(通常)/`gap-1.5`(featured)相当。
   厳密なgap値の指定は要件に含まれないため、共通の1つの値(4px)で揃える)。 */
.piyolabs-resource-archive-card__readmore {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}
/* [コードレビュー(2回目)指摘で新設] 装飾のみの矢印アイコン(SVG、
   resource-archive-cards.php の piyolabs_resource_archive_readmore_arrow_svg()
   参照)。Next.js版の`<ArrowRight className="size-4 transition-transform
   group-hover:translate-x-0.5" />`を再現する: サイズ16px(size-4)、
   カード全体hover時のみ約2px(translate-x-0.5)右へ移動する。 */
.piyolabs-resource-archive-card__readmore-arrow {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	transition: transform 150ms ease;
}
.piyolabs-resource-card:hover .piyolabs-resource-archive-card__readmore-arrow,
.piyolabs-resource-archive-featured:hover .piyolabs-resource-archive-card__readmore-arrow {
	transform: translateX(2px);
}

/* ------------------------------------------------------------------ */
/* カテゴリナビゲーション(Next.js版62〜76行目の見た目を踏襲、Phase 2Iで      */
/* 表示専用として追加)。[piyolabs_resource_archive_categories]ショート      */
/* コードが出力する。                                                    */
/* [Phase 2J / fix/resource-category-navigation-phase2j で更新] production */
/* 実機確認で「クリックできない」というUX指摘を受け、実在の                 */
/* resource_categoryタームへの<a>によるナビゲーションへ変更した            */
/* (選択中の項目のみ非リンクの<span>のまま)。見た目(pillの形・色)自体は     */
/* 変更していない。                                                       */
/* ------------------------------------------------------------------ */

.piyolabs-resource-archive-categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem; /* Next.js版 gap-2 */
}
/* [コードレビュー(2回目)指摘でline-heightを追加] Next.js版のカテゴリ行
   (`text-sm font-semibold`・`text-sm font-medium`)のtext-smは
   14px/20px(line-height)。font-sizeはtheme.jsonのsmallプリセット
   (14px固定)と完全一致するためそのまま使うが、line-height(20px)は
   明示的に指定する。 */
.piyolabs-resource-archive-categories__label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem; /* Next.js版 text-sm の line-height(20px) */
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
}
.piyolabs-resource-archive-categories__pill {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.25rem 0.75rem; /* Next.js版 px-3 py-1 */
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem; /* Next.js版 text-sm の line-height(20px) */
	font-weight: 500;
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none; /* リンク化されたpill(<a>)に下線を出さない */
	transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
/* リンク化されたpill(<a>)のみが対象。選択中のpill(<span>、下の
   __pill--active参照)はそもそも<a>ではないため対象にならない。
   hoverは他のカード等と同じ控えめな値(rgba(51,89,122,0.4))を再利用し、
   過度に派手な変化にはしない。 */
a.piyolabs-resource-archive-categories__pill:hover {
	border-color: rgba(51, 89, 122, 0.4);
}
a.piyolabs-resource-archive-categories__pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}
/* 「すべて」または現在のカテゴリのpillが選択中扱い(Next.js版
   bg-primary text-primary-foreground、borderは無し)。非リンクの<span>
   のまま維持する。 */
.piyolabs-resource-archive-categories__pill--active {
	border-color: transparent;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
}

/* ------------------------------------------------------------------ */
/* featured(注目)記事カード(Next.js版78〜107行目)。                     */
/* mobile: 縦積み(flex-direction:column)、768px以上: 横並び               */
/* (Next.js版 `md:flex-row`)。画像スロットは追加しない(Phase 2G/2Hと      */
/* 同じ方針、Next.js版に画像フィールド自体が無いため)。                    */
/* ------------------------------------------------------------------ */

.piyolabs-resource-archive-featured {
	position: relative; /* タイトルリンクのstretched linkの基準 */
	display: flex;
	flex-direction: column;
	margin-top: 2rem; /* Next.js版 mt-8 */
	border-radius: var(--wp--custom--radius--xl);
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--card);
	transition: border-color 150ms ease;
}
.piyolabs-resource-archive-featured:hover {
	border-color: rgba(51, 89, 122, 0.4); /* Next.js版 hover:border-brand/40 */
}
@media (min-width: 768px) {
	.piyolabs-resource-archive-featured {
		flex-direction: row;
	}
}

/* [Phase 2Iレビュー中に発見・修正] このコンテナ自身にoverflow:hiddenを
   与えて.piyolabs-resource-archive-featured__mediaの背景色を角丸の内側に
   収める実装を当初試したが、::afterのstretched link(下の
   .piyolabs-resource-archive-featured__link参照)によるキーボードfocus時の
   outlineまで一緒にクリップしてしまうことを実機Playwright確認で発見した。
   overflow:hiddenは使わず、__media自身に(はみ出しうる角だけ)明示的な
   border-radiusを指定する方式に変更した。 */
.piyolabs-resource-archive-featured__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem; /* Next.js版 p-8 */
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl) var(--wp--custom--radius--xl) 0 0; /* mobile: 上2角 */
}
@media (min-width: 768px) {
	.piyolabs-resource-archive-featured__media {
		width: 40%; /* Next.js版 md:w-2/5 */
		flex-shrink: 0;
		border-radius: var(--wp--custom--radius--xl) 0 0 var(--wp--custom--radius--xl); /* desktop: 左2角 */
	}
}

.piyolabs-resource-archive-featured__media-inner {
	text-align: center;
}

/* [コードレビュー(2回目)指摘でtypographyを修正] Next.js版featuredバッジ
   (`px-3 py-1 text-xs font-bold`)のtext-xsは12px/16px(line-height)、
   通常カードの__categoryと同じ理由でリテラル値を使う。 */
.piyolabs-resource-archive-featured__badge {
	display: inline-flex;
	align-items: center;
	border-radius: 9999px;
	padding: 0.25rem 0.75rem; /* Next.js版 px-3 py-1 */
	font-size: 0.75rem; /* Next.js版 text-xs */
	line-height: 1rem;
	font-weight: 700;
	background-color: var(--wp--preset--color--highlight);
	color: var(--wp--preset--color--highlight-foreground);
}

.piyolabs-resource-archive-featured__accent {
	width: 3rem; /* Next.js版 w-12 */
	height: 0.25rem; /* Next.js版 h-1 */
	margin: 1.5rem auto 0; /* Next.js版 mt-6 mx-auto */
	border-radius: 9999px;
	background-color: var(--wp--preset--color--primary);
}

.piyolabs-resource-archive-featured__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.5rem; /* Next.js版 p-6 */
}
@media (min-width: 768px) {
	.piyolabs-resource-archive-featured__body {
		padding: 2rem; /* Next.js版 md:p-8 */
	}
}

/* [コードレビュー(2回目)指摘で修正] Next.js版のfeaturedタイトルは
   text-xl(20px/28px line-height) md:text-2xl(24px/32px line-height、
   768px以上)。従来はtheme.jsonの"large"プリセット(18px、fluidで20px
   まで拡大)で近似していたが、Next.js版はfluidではなくmd:breakpoint
   (768px)での固定サイズ切り替えのため、一致していなかった
   (grid gap・通常カードpaddingと同じ理由でここもリテラル値・ハード
   breakpointへ変更した)。 */
.piyolabs-resource-archive-featured__title {
	margin: 0.75rem 0 0; /* Next.js版 mt-3 */
	font-size: 1.25rem; /* Next.js版 text-xl(mobile) */
	line-height: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
	overflow-wrap: anywhere;
}
@media (min-width: 768px) {
	.piyolabs-resource-archive-featured__title {
		font-size: 1.5rem; /* Next.js版 md:text-2xl */
		line-height: 2rem;
	}
}

.piyolabs-resource-archive-featured__link {
	color: inherit;
	text-decoration: none;
}
.piyolabs-resource-archive-featured__link:visited {
	color: inherit;
}
.piyolabs-resource-archive-featured__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.piyolabs-resource-archive-featured__link:focus-visible {
	outline: none; /* .piyolabs-resource-archive-card__linkと同じ理由 */
}
.piyolabs-resource-archive-featured__link:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

.piyolabs-resource-archive-featured__excerpt {
	flex: 1;
	margin: 0.75rem 0 0; /* Next.js版 mt-3 */
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.625; /* leading-relaxed */
	color: var(--wp--preset--color--muted-foreground);
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* ページネーション(Next.js版には参照実装が存在しない、WordPress側の      */
/* [piyolabs_resource_archive_grid]がpaginate_links()で生成するリンクへの  */
/* 最小限の見た目。現在の実データは記事数が少なくページネーション自体が    */
/* 発生しないが、記事数が増えた場合に備えて用意する)。                    */
/* ------------------------------------------------------------------ */
.piyolabs-resource-archive-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}
.piyolabs-resource-archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.625rem;
	border-radius: var(--wp--custom--radius--xl);
	border: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.piyolabs-resource-archive-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--secondary);
	font-weight: 700;
}
.piyolabs-resource-archive-pagination a.page-numbers:hover {
	border-color: rgba(51, 89, 122, 0.4);
}
.piyolabs-resource-archive-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* 一覧末尾の常設案内文(Next.js版132〜134行目、コードレビュー指摘で
   Phase 2Iに追加)。[piyolabs_resource_archive_note]ショートコードが
   出力する。0件時専用のempty-stateとは別クラス。 */
.piyolabs-resource-archive-note {
	margin-top: 2.5rem; /* Next.js版 mt-10 */
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.625;
	color: var(--wp--preset--color--muted-foreground);
}
/* ==================================================================== */

/* ==================================================================== */
/* リソース記事詳細ページ 目次(TOC)+ 本文2カラムレイアウト               */
/* (Phase 2B / feat/resource-article-detail-parity-phase2b)              */
/*                                                                      */
/* [piyolabs_resource_toc]ショートコード(wordpress-plugin/piyolabs-core/  */
/* includes/resource-toc.php)と、templates/single-resource.htmlの         */
/* .piyolabs-resource-bodyグループ(元contentSize:760pxグループへ            */
/* このクラスを追加、Phase 2Bで1040pxへ拡大、Phase 2Cでヒーロー帯と揃えて     */
/* 1120pxへ再拡大)の見た目。                                                */
/*                                                                      */
/* Next.js版 app/resources/[slug]/page.tsx の99〜142行目                   */
/* (`<div className="grid gap-10 lg:grid-cols-[1fr_220px] lg:gap-14">`、  */
/* デスクトップは右カラムsticky目次・モバイルは<details>折りたたみ目次)を    */
/* 唯一の正解として再現する。ブレークポイントはTailwindの`lg:`(1024px)に    */
/* 合わせ、新しい値を発明せず1024pxを直接使う。                             */
/*                                                                      */
/* モバイル(1024px未満)はNext.js版の1カラム(grid-cols無し)相当として        */
/* 通常のブロックフローのままにし、目次は<details>(piyolabs-resource-toc    */
/* --mobile)のみを表示、本文の上にgap-10(2.5rem)分の余白を空けて続ける。    */
/* 1024px以上でgridの2カラム(本文1fr・目次220px、gap-14=3.5rem)に切り替え、  */
/* 目次はorder:2で右側へ、記事カラムwrapper(.piyolabs-resource-article-    */
/* column、本文・disclaimer・rVAS CTAをまとめたもの、Phase 2E参照)は        */
/* order:1・max-width:68chで読みやすい行長に制限する(Next.js版             */
/* <article className="min-w-0 max-w-[68ch] lg:order-1">を再現)。          */
/* ------------------------------------------------------------------ */

/* モバイル(1024px未満): .piyolabs-resource-body は通常のブロックフローの
   まま(2カラムgridにしない)。専用の宣言は無い。 */
@media (min-width: 1024px) {
	.piyolabs-resource-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: 3.5rem; /* Next.js版 lg:gap-14 */
		align-items: start;
	}
}

/* 目次ラッパー(デスクトップ版<nav>・モバイル版<details>の両方を包む)。
   モバイル幅では、目次(<details>)と本文の間にNext.js版 gap-10(2.5rem)
   相当の縦の余白を持たせる(1カラム時の唯一の可視の目次要素は
   .piyolabs-resource-toc--mobileのみなので、このラッパー自体に
   margin-block-endを持たせれば十分)。 */
.piyolabs-resource-toc-wrap {
	margin-block-end: 2.5rem;
}
@media (min-width: 1024px) {
	.piyolabs-resource-toc-wrap {
		order: 2; /* 目次カラムを右側(本文の後)に配置する。 */
		/*
		 * grid-column明示化。.piyolabs-resource-body直下のgridアイテムは
		 * 目次ラッパーと.piyolabs-resource-article-column(下記参照)の2つ
		 * だけであり、本来は自動配置でも列は崩れないが、堅牢性のため
		 * 明示的にgrid-column: 2;を指定し、常に目次カラムに固定する。
		 */
		grid-column: 2;
		margin-block-end: 0;

		/*
		 * [Phase 2F / fix/resource-toc-sticky-width-phase2f]
		 * 実ブラウザ実測(Playwright、WP 7.0.3使い捨て環境)で2つの不具合を
		 * 確認し、原因を切り分けた。修正はこの2行のみで、いずれも
		 * .piyolabs-resource-toc-wrap自身にだけスコープする
		 * (.piyolabs-resource-body側のalign-items: startは無条件削除しない)。
		 *
		 * 【不具合1: sticky無効化の原因】align-self: stretch
		 * .piyolabs-resource-body(grid)がalign-items: startのため、
		 * このgridアイテムはブロック軸(縦)方向に「中身の高さ
		 * (目次nav自体の高さ)」までしか伸びず、grid行全体の高さまで
		 * 伸長しない。実測(2カラム目のJA記事、1024px)で、grid行の高さは
		 * 約1404pxあるのに.piyolabs-resource-toc-wrapの実高さは約141pxしか
		 * 無く、中のposition: stickyなnavが実質的に動ける範囲(sticky
		 * containing blockの残り高さ)がほぼゼロだったため、スクロールしても
		 * navが画面内に留まらず(top値がスクロール量に比例して単調に負へ
		 * 減少し続け、途中で一定値に留まる区間が無い)、追従して見えなかった
		 * ことを確認した。align-self: stretchをこのgridアイテムにだけ
		 * 指定することで、他のgridアイテム(.piyolabs-resource-article-column)
		 * や.piyolabs-resource-body全体のalign-itemsには一切触れずに、
		 * 目次カラムだけをgrid行の高さまで伸ばせる(修正後の実測で、
		 * 高さが約1404pxまで伸び、スクロール中はnavのtopがcomputed
		 * stickyのtop値(var(--piyolabs-anchor-offset)相当)付近でほぼ一定に
		 * なり、resource body終了位置を過ぎるとtopが再び負に転じて
		 * 通常のフローへ戻ることを確認した)。
		 *
		 * 【不具合2: nav幅縮小の原因(不具合1とは別原因)】width: 100%
		 * WordPressコアのlayout:type:constrained + justifyContent:leftが、
		 * .piyolabs-resource-body(このグループ自身、
		 * wp-container-core-group-is-layout-*クラス経由)の直接の子要素
		 * すべてに対し、`margin-right: auto !important`
		 * (wp-includes/block-supports/layout.phpが生成するインラインCSS、
		 * :where()セレクタで詳細度は抑えられているが値自体は!important)を
		 * 注入している。.piyolabs-resource-toc-wrapはwidthを指定していない
		 * (初期値auto)ため、CSS Grid/Box Alignment仕様上、
		 * 「inline軸にauto marginがあり、かつwidthがauto」の場合は
		 * 220pxのgrid trackいっぱいに伸びる(stretch)のではなく、
		 * fit-content(=中身のテキストの自然な幅、220pxより小さければ
		 * その幅)まで縮んでしまう。実測(2カラム目のJA記事、見出しが
		 * 全て短め)で幅が140px、英語版で約210pxまで縮んでいることを確認した
		 * (見出しが1つでも220px超の自然幅を持つ記事では縮みが隠れて
		 * 220pxのまま見えることも実測で確認済みで、これが「時々気づかれ
		 * にくい」不具合だった一因と考えられる)。
		 * 対処として、margin-right: auto !importantそのものを打ち消す
		 * !important宣言(詳細度勝負)は使わず、widthに100%という明示的な
		 * 値を与えるだけにした。CSS仕様上、auto marginによる
		 * fit-content縮小はwidthがauto(未指定)の場合にのみ発生し、
		 * width: 100%のようにwidthが確定値を持つ場合は発生しない
		 * (grid item自身の幅がgrid area幅(220px)に確定するため、
		 * margin-right: autoは単に0pxへ解決されるだけになる)。実測で
		 * !important無しにこの1行だけで220pxへ復帰することを確認済み。
		 * grid-template-columnsの220px自体は変更していない
		 * (source of truthのまま)。
		 */
		align-self: stretch;
		width: 100%;
	}
}

/* 記事カラムwrapper。post-content・disclaimer・条件付きrVAS CTAをまとめて
   1つのgridアイテムにする(Phase 2E、PR #46外部レビュー対応、Blocker 2)。
   .wp-block-post-contentは他のテンプレート(ホーム・rVAS等)でも汎用的に
   使われる既存クラスのため(本ファイル1000〜1460行目付近に既存の
   .wp-block-post-content系セレクタが多数ある)、以前はsingle-resource.html
   専用の.piyolabs-resource-bodyを祖先に必ず経由させてスコープしていたが、
   Phase 2Eでdisclaimer/rVAS CTAが本文の直後に加わったことで
   post-content・disclaimer・rVAS CTAが.piyolabs-resource-body直下の
   別々のgridアイテムになってしまい、.piyolabs-resource-body自身の
   gap:3.5remがこの3つの間の縦間隔にも効いてしまう問題が外部レビューで
   指摘された。そこでこの3つを.piyolabs-resource-article-columnという
   専用wrapperでまとめ、.piyolabs-resource-body直下のgridアイテムを
   「目次」と「記事カラムwrapper」の2つに戻した。max-width:68ch
   (Next.js版 max-w-[68ch])は本文単体ではなくwrapper自身へ持たせる。 */
.piyolabs-resource-article-column {
	min-width: 0;
	max-width: 68ch; /* Next.js版 max-w-[68ch] */
}
@media (min-width: 1024px) {
	.piyolabs-resource-article-column {
		order: 1;
		grid-column: 1;
	}
}

/* デスクトップ版の目次(常時表示のsticky nav)。モバイルでは隠す。 */
.piyolabs-resource-toc--desktop {
	display: none;
}
@media (min-width: 1024px) {
	.piyolabs-resource-toc--desktop {
		display: block;
		position: sticky;
		/* headerがposition:stickyで常に前面にあるため、ジャンプ/sticky
		   位置がheaderの下に隠れないよう、本ファイル897〜987行目で既に
		   定義済みの--piyolabs-anchor-offsetをそのまま再利用する(新しい
		   マジックナンバーを作らない)。この変数はデスクトップ・
		   「1120px未満のモバイルヘッダー」表示それぞれの実測header高さを
		   反映しており、本セクションの1024pxブレークポイントは
		   1120px未満の範囲に含まれるため、この変数を使う限りheaderの
		   実際の高さと自動的に整合する。 */
		top: var(--piyolabs-anchor-offset);
	}

	/*
	 * [fix/resource-toc-admin-bar-sticky-offset]
	 * ログイン中の管理者/編集者が閲覧すると、WordPressコアがbody要素に
	 * .admin-barクラスを付与し、ビューポート最上部に固定の管理者ツールバー
	 * (#wpadminbar、1024px以上では常に高さ32px)を重ねて表示する。
	 * .piyolabs-site-header自身は339〜377行目の既存ルール
	 * (body.admin-bar .piyolabs-site-header { top: 32px; })により
	 * ツールバー分だけ下にずれるが、このTOCのsticky top値は上のルール
	 * (var(--piyolabs-anchor-offset)のみ)のままだったため、headerが下に
	 * ずれてもTOCのtopは追従せず、実ブラウザ実測でTOC見出し「目次」が
	 * headerの下に隠れる/重なる不具合があった(Playwrightで1024px/1440px
	 * とも実測、header bottom以上約20px分TOCの上端が隠れることを確認)。
	 * 979〜987行目のscroll-margin-top用body.admin-bar調整と同じ理由・
	 * 同じ32pxの値をそのまま踏襲する(新しいマジックナンバーを作らない)。
	 * このセレクタは@media (min-width: 1024px)内にのみ存在し、1024px未満
	 * では.piyolabs-resource-toc--desktop自体がdisplay: noneのため、
	 * 782px以下向けの追加オフセット(46px、他の2箇所で使っているもの)は
	 * 実質到達しない組み合わせであり、ここでは不要と判断した。
	 */
	body.admin-bar .piyolabs-resource-toc--desktop {
		top: calc(var(--piyolabs-anchor-offset) + 32px);
	}
}

/* モバイル版の目次(<details>による折りたたみ)。デスクトップでは隠す。
   Next.js版(103〜119行目)の
   `<details className="rounded-xl border border-border bg-card lg:hidden">`
   をそのまま再現するcard的な見た目(border・background・border-radius)。 */
.piyolabs-resource-toc--mobile {
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	background-color: var(--wp--preset--color--card);
}
@media (min-width: 1024px) {
	.piyolabs-resource-toc--mobile {
		display: none;
	}
}

.piyolabs-resource-toc__heading,
.piyolabs-resource-toc__summary {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* デスクトップ版<p>見出し(Next.js版125〜127行目
   `text-xs font-semibold tracking-wide text-muted-foreground`)。 */
.piyolabs-resource-toc__heading {
	color: var(--wp--preset--color--muted-foreground);
	letter-spacing: 0.025em; /* tracking-wide相当 */
}

/* モバイル版<summary>(Next.js版105〜107行目
   `px-4 py-3 text-sm font-semibold text-foreground`)。見出し(--heading)より
   濃い前景色を使い、card内のクリック可能な行として押しやすいpaddingを持つ。 */
.piyolabs-resource-toc__summary {
	cursor: pointer;
	list-style: none;
	color: var(--wp--preset--color--foreground);
	padding: 0.75rem 1rem; /* Next.js版 px-4 py-3 */
}
.piyolabs-resource-toc__summary::-webkit-details-marker {
	display: none;
}

/* モバイル版<nav>(Next.js版108行目 `border-t border-border px-4 py-3`)。
   summaryとの間の視覚的区切り。 */
.piyolabs-resource-toc__mobile-nav {
	border-top: 1px solid var(--wp--preset--color--border);
	padding: 0.75rem 1rem;
}

.piyolabs-resource-toc__list {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem; /* Next.js版 flex flex-col gap-2 */
}
/* モバイル版の<ul>はsummaryの直下ではなくnav内にあり、navが既にpaddingを
   持つため、上マージンは不要(Next.js版109行目のモバイル<ul>もmt-0)。 */
.piyolabs-resource-toc__mobile-nav .piyolabs-resource-toc__list {
	margin-top: 0;
}

/* デスクトップ版<ul>のみ、目次全体を貫く左ボーダーを持つ(Next.js版128行目
   `border-l border-border`)。モバイル版<ul>はborder無し(Next.js版109行目)。 */
.piyolabs-resource-toc--desktop .piyolabs-resource-toc__list {
	border-inline-start: 1px solid var(--wp--preset--color--border);
}

.piyolabs-resource-toc__item {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/* h3項目は、目次上でh2との階層差が分かる程度にだけ字下げする(role="tree"
   等の重厚なARIAは使わない、単純なネストしない<ul>+字下げのみで十分)。 */
.piyolabs-resource-toc__item--h3 {
	padding-inline-start: 0.75rem;
}

.piyolabs-resource-toc__item a {
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
	/* 長い見出しテキストが220px幅の目次カラム・<details>内で横あふれ
	   しないようにする。word-break: break-allは単語のどの位置でも構わず
	   改行して可読性を落とすため使わない。overflow-wrap: anywhereは、
	   他に折り返せる場所(空白等)が無い場合に限って単語内で折り返すため、
	   通常の見出しの見た目には影響しない
	   (.piyolabs-resource-category-pill a、本ファイル上部と同じ理由)。 */
	overflow-wrap: anywhere;
}
.piyolabs-resource-toc__item a:hover {
	color: var(--wp--preset--color--brand);
}

/* デスクトップ版リンクのみ、Next.js版133行目
   `-ml-px block border-l-2 border-transparent pl-3 ... transition-colors
   hover:border-brand hover:text-brand` を再現する。左ボーダー付きリンクを
   <ul>の border-inline-start に -1px 重ねて連続した縦線に見せ、hover時に
   そのリンクの区間だけボーダーがbrand色になる「現在位置」的な強調。
   モバイル版リンク(Next.js版112行目)はboder無し・色hoverのみのため、
   このルールは付与しない。 */
.piyolabs-resource-toc--desktop .piyolabs-resource-toc__item a {
	display: block;
	margin-inline-start: -1px;
	padding-inline-start: 0.75rem; /* Next.js版 pl-3 */
	border-inline-start: 2px solid transparent;
	transition: color 150ms ease, border-color 150ms ease;
}
.piyolabs-resource-toc--desktop .piyolabs-resource-toc__item a:hover {
	border-inline-start-color: var(--wp--preset--color--brand);
}

/* フォーカス表示は消さない(outline: none / outline: 0 は本セクションの
   どこにも追加しない)。 */
/* ==================================================================== */

/* ==================================================================== */
/* リソース記事詳細ページ 本文末尾3要素                                  */
/* (Phase 2E / feat/resource-article-finishing-phase2e)                  */
/*                                                                      */
/* 1) 参考文献(post_content内の既存コンテンツの見た目、CSSのみ)。         */
/* 2) disclaimer(免責事項、[piyolabs_resource_disclaimer]ショートコード)。 */
/* 3) 条件付きrVAS CTA([piyolabs_resource_rvas_cta]ショートコード)。      */
/* いずれもwordpress-plugin/piyolabs-core/includes/resource-endnotes.php  */
/* (参考文献のみpatterns/reference-list.php・importer側が出力する既存の    */
/* post_content構造)が対象。Next.js版 app/resources/[slug]/page.tsx の     */
/* 148〜207行目(参考文献section・disclaimer<p>・条件付きrVAS CTA<a>)を     */
/* 唯一の正解として再現する。                                             */
/* ------------------------------------------------------------------ */

/* 1) 参考文献。
   【scopeの二段構えについて】
   当初は「post_content内で`tagName:"section"`を使うのはこの参考文献ブロック
   だけなので`.wp-block-post-content > section.wp-block-group`まで祖先を
   絞り込めば安全」という前提だったが、これは誤りだった。
   wordpress-theme/piyolabs/patterns/配下のresource-list.php・
   screenshot-gallery.php・support-guide.php・rvas-intro.phpの4パターンは
   いずれも`tagName:"section"`・`class="wp-block-group"`(追加classなし)と
   いう、参考文献ブロックと全く同じ外側構造を持ち、かつ挿入先を制限する
   `Post Types:`ヘッダーも無いため、エディタがresource記事の本文中に
   ブロックインサーターから誤って挿入できてしまう(挿入されると意図しない
   border-top・padding-topが適用される)。
   そこで以下の二段構えでscopeする:
     - 優先: `section.wp-block-group.piyolabs-resource-references`
       (patterns/reference-list.php経由で今後手動作成する記事は専用class
       「piyolabs-resource-references」を持つ。importer
       (wordpress-plugin/piyolabs-importer)は一回限りの移行用途を終えており
       今後再実行しない方針のため、importer側の出力マークアップは意図的に
       変更していない)。
     - フォールバック: `section.wp-block-group:not(.piyolabs-resource-references):has(> h2.wp-block-heading):has(> ol.wp-block-list)`
       (既存2記事 what-is-vas・paper-vs-digital-vas の保存済みpost_content、
       および今後importer経由で生成される参考文献セクションは専用classを
       持たないため、「順序」(:last-of-type、本文の最後のsectionという
       判定)ではなく「構造」で絞り込む。参考文献セクションは必ず
       `<section><h2 class="wp-block-heading">…</h2><ol class="wp-block-list">
       …</ol></section>`という、h2とol.wp-block-listがどちらもsectionの
       直接の子という組み合わせを持つ(patterns/reference-list.php・
       importer側resources-render.phpのpiyolabs_importer_resource_references_html()
       の出力、いずれも実際のマークアップを確認済み)。一方、衝突リスクの
       ある4パターンはいずれもこの組み合わせを持たない
       (resource-list.php/support-guide.phpはh3のカード、
       screenshot-gallery.phpは見出しのみでリスト無し、rvas-intro.phpは
       h1またはリスト無しのカラム構成)。新しいclass付きのセクションと
       二重に一致しないよう:not()で排他にする)。
   section自身は`style="margin-top:var(--wp--preset--spacing--large)"`という
   インラインstyleを既に持っている(post_content側のマークアップ、変更不可)。
   ここではそれと衝突しないborder-top・padding-topのみを追加する。
   Next.js版150行目 `mt-12 border-top border-border pt-8` のうち、
   mt-12相当は上記インラインstyle(spacing--large)が既に担っているため、
   ここではborder-top・pt-8(2rem)のみを追加する。 */
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group.piyolabs-resource-references,
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group:not(.piyolabs-resource-references):has(> h2.wp-block-heading):has(> ol.wp-block-list) {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 2rem; /* Next.js版 pt-8 */
}

/* 見出し「参考文献」。Next.js版151行目
   `font-display text-lg font-bold text-foreground`(mutedではなく通常の
   前景色・太字)。has-large-font-sizeクラス(テーマのfont-sizeプリセット)
   より優先させるため、このセクション専用のセレクタ自体の詳細度で上書きする。
   scopeの二段構えについては直前のコメント参照。 */
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group.piyolabs-resource-references > h2.wp-block-heading,
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group:not(.piyolabs-resource-references):has(> h2.wp-block-heading):has(> ol.wp-block-list) > h2.wp-block-heading {
	font-size: 1.125rem; /* Next.js版 text-lg */
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
}

/* 参考文献リスト本体。Next.js版152行目 `mt-4 flex flex-col gap-3`。
   scopeの二段構えについては1)冒頭のコメント参照。 */
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group.piyolabs-resource-references ol.wp-block-list,
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group:not(.piyolabs-resource-references):has(> h2.wp-block-heading):has(> ol.wp-block-list) ol.wp-block-list {
	margin-top: 1rem; /* Next.js版 mt-4 */
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* Next.js版 gap-3 */
	padding-inline-start: 1.5rem; /* 番号付きリストの既定インデントを維持する。 */
}

/* 各項目。Next.js版154行目 `text-[13px] leading-relaxed text-muted-foreground`。
   scopeの二段構えについては1)冒頭のコメント参照。
   overflow-wrap: anywhere は、著者がDOIリンクの表示テキストとして長い
   URL文字列をそのまま貼り付けた場合(patterns/reference-list.php・
   importer側resources-render.phpの既定の書式がそうなっている)に、
   その1トークンが折り返されずページ幅を押し広げてしまう(390px実機で
   実際に発生を確認)のを防ぐ。フッターの同種の横スクロール修正
   (.piyolabs-footer__link、本ファイル内で既出)と同じ対処方針。 */
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group.piyolabs-resource-references ol.wp-block-list li,
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group:not(.piyolabs-resource-references):has(> h2.wp-block-heading):has(> ol.wp-block-list) ol.wp-block-list li {
	font-size: 13px;
	line-height: 1.625; /* Next.js版 leading-relaxed */
	color: var(--wp--preset--color--muted-foreground);
	overflow-wrap: anywhere;
}

/* 外部リンクである視覚的な合図(Next.js版のlucide ExternalLinkアイコン相当)。
   実際の記事本文のリンクテキストは既にURL文字列そのもの(DBの中身は
   変更できない)であるため、装飾専用の::after疑似要素(currentColorの
   CSS mask、Lucide ExternalLinkと同形状の自前SVG)で追加する。
   疑似要素は実DOM要素ではなくスクリーンリーダーに読み上げられないため、
   追加のaria属性は不要。他の記事内リンク・他テンプレートへは、
   このセクション専用セレクタでscopeしているため一切影響しない
   (scopeの二段構えについては1)冒頭のコメント参照)。 */
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group.piyolabs-resource-references ol.wp-block-list a[href^="http"]::after,
.piyolabs-resource-body .wp-block-post-content > section.wp-block-group:not(.piyolabs-resource-references):has(> h2.wp-block-heading):has(> ol.wp-block-list) ol.wp-block-list a[href^="http"]::after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-inline-start: 0.25em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* 2) disclaimer(免責事項)。[piyolabs_resource_disclaimer]ショートコードが
   返す `<div class="piyolabs-resource-disclaimer"><p>…</p></div>` の見た目。
   Next.js版186〜188行目 `mt-10 rounded-xl bg-muted/60 p-4 text-[13px]
   leading-relaxed text-muted-foreground` を再現する。
   margin-block-start: 2.5rem(Next.js版 mt-10)は、記事カラムwrapper
   (.piyolabs-resource-article-column、Phase 2E追記)内の通常のブロック
   フローの一部として、常に(390/768/1024/1440px全幅で同じ意味に)効く
   (以前は1024px以上専用のgrid配置ブロックでmargin-block-start:0へ
   リセットしていたが、post-content/disclaimer/rVAS CTAがgridアイテムでは
   なくwrapper内の通常の縦積み要素になったため、そのリセット自体を廃止した)。
   background-colorはbg-muted/60(60%透過)を再現する。このテーマは
   color-mix()を使わず既存のアルファ合成は全てrgba()直書きの慣習
   (.piyolabs-related-resources__card:hover等参照)のため、
   muted #f2f5f8(theme.json)のalpha 0.6をrgba()で直接指定する。 */
.piyolabs-resource-disclaimer {
	margin-block-start: 2.5rem; /* Next.js版 mt-10 */
	border-radius: var(--wp--custom--radius--xl); /* Next.js版 rounded-xl */
	background-color: rgba(242, 245, 248, 0.6); /* muted #f2f5f8のalpha 0.6(Next.js版 bg-muted/60) */
	padding: 1rem; /* Next.js版 p-4 */
}
.piyolabs-resource-disclaimer p {
	margin: 0;
	font-size: 13px; /* Next.js版 text-[13px] */
	line-height: 1.625; /* Next.js版 leading-relaxed */
	color: var(--wp--preset--color--muted-foreground);
}

/* 3) 条件付きrVAS CTA。[piyolabs_resource_rvas_cta]ショートコードが返す
   カード全体を1つの<a>で組み立てた構造の見た目。Next.js版192〜206行目
   `mt-8 flex items-center gap-4 rounded-2xl border border-border bg-card
   p-5 transition-colors hover:border-brand/40` を再現する(派手な配色・
   アニメーションは使わず、hover時のborder色変化のみに留める)。
   margin-block-start: 2rem(Next.js版 mt-8)は、disclaimerと同様、記事カラム
   wrapper内の通常のブロックフローの一部として常に(全幅で同じ意味に)効く。 */
.piyolabs-resource-rvas-cta {
	margin-block-start: 2rem; /* Next.js版 mt-8 */
	display: flex;
	align-items: center;
	gap: 1rem; /* Next.js版 gap-4 */
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl);
	background-color: var(--wp--preset--color--card);
	padding: 1.25rem; /* Next.js版 p-5 */
	text-decoration: none;
	transition: border-color 150ms ease;
}
.piyolabs-resource-rvas-cta:hover {
	border-color: rgba(51, 89, 122, 0.4); /* brand #33597a のalpha 0.4(Next.js版 hover:border-brand/40、.piyolabs-related-resources__card:hoverと同じ値を再利用) */
}
.piyolabs-resource-rvas-cta__icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--md);
	object-fit: contain;
}
.piyolabs-resource-rvas-cta__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}
.piyolabs-resource-rvas-cta__title {
	font-size: 16px; /* Next.js版 text-[16px] */
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
}
.piyolabs-resource-rvas-cta__description {
	margin-top: 0.25rem; /* Next.js版 mt-1 */
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.625; /* Next.js版 leading-relaxed */
	color: var(--wp--preset--color--muted-foreground);
}
.piyolabs-resource-rvas-cta__arrow {
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted-foreground);
	transition: color 150ms ease, transform 150ms ease;
}
.piyolabs-resource-rvas-cta:hover .piyolabs-resource-rvas-cta__arrow {
	color: var(--wp--preset--color--brand);
	transform: translateX(0.125rem);
}
/* ==================================================================== */

/* ==================================================================== */
/* リソース記事詳細ページ 関連記事セクション                              */
/* (Phase 2D / feat/resource-related-content-phase2d)                    */
/*                                                                      */
/* [piyolabs_related_resources]ショートコード(wordpress-plugin/           */
/* piyolabs-core/includes/related-resources.php)が出力するHTMLの見た目。   */
/* Next.js版 app/resources/[slug]/page.tsx の211〜246行目                  */
/* (`<div className="mt-14 border-t border-border pt-10">`〜)を唯一の      */
/* 正解として再現する。                                                    */
/* ------------------------------------------------------------------ */

/* セクション全体。区切り線・上余白はこの要素自身が持つ(外側の
   templates/single-resource.html側のwp:groupは装飾を一切持たない
   プレーンなdivのため、0件でショートコードが空文字列を返した場合は
   本当に何も表示されない、要件「不自然な空枠を残さない」への対応)。 */
.piyolabs-related-resources {
	margin-top: 3.5rem; /* Next.js版 mt-14 */
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 2.5rem; /* Next.js版 pt-10 */
}

/* 見出し「関連記事」+ 右側「リソース一覧へ戻る」リンクの行(Next.js版213行目
   `flex items-center justify-between gap-4`)。flex-wrap:wrapは要件の
   390〜1440px全幅での横スクロール禁止を優先した安全策として追加している
   (Next.js版自体はflex-nowrap相当だが、英語の長い見出し/リンク文言
   (例: "Related Articles" + "Back to all resources")が390px幅で並んだ
   場合に備え、他の箇所(フッターnav-grid等)と同じく折り返しを許可する)。 */
.piyolabs-related-resources__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem; /* Next.js版 gap-4 */
}

/* 見出し(Next.js版214行目 `font-display text-lg font-bold text-foreground`)。
   font-sizeはtext-lg(18px)に最も近いtheme.jsonのfontSizeプリセット
   "large"(18px、fluid 18〜20px、settings.typography.fontSizes参照)を使う。
   theme.jsonにNext.js版のfont-display相当の別書体プリセットは存在しない
   ため、他の見出し類(.piyolabs-resource-toc__heading等)と同じく
   font-familyは指定せずサイト全体の既定書体を継承する。 */
.piyolabs-related-resources__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* 「リソース一覧へ戻る」リンク(Next.js版215〜221行目
   `inline-flex items-center gap-1.5 text-sm font-semibold text-brand
   hover:underline`)。矢印記号はshortcodes.phpの
   'related_resources_back_link'文字列自体に含まれる(装飾用の別要素は
   持たない、includes/shortcodes.php の manual_back_link と同じ方針)。

   【__back-link-wrap(<p>)が必要な理由: wpautopによる実害のある破損の回避、
   実機検証で発見】
   [piyolabs_related_resources]は`<!-- wp:shortcode -->`ブロック経由で
   出力されるが、そのコアレンダラー(wp-includes/blocks/shortcode.php の
   render_block_core_shortcode())は出力へ必ずwpautop()を通す。wpautopは
   タグ名だけを見る正規表現ベースの「段落分割」処理を行うため、<h2>
   (wpautopがブロックレベルとみなす要素)の直後に素の<a>(ブロックレベルと
   みなされないインライン要素)を裸のまま置くと、「ブロックタグで始まらない
   断片」として意図しない<p>(既定でブラウザmarginを持つ)に勝手に包まれて
   しまうことを実機(Playwright)検証で確認した。includes/related-resources.php
   側であらかじめ<p class="piyolabs-related-resources__back-link-wrap">で
   包んでおくことで、wpautopに「既にブロックタグで始まっている断片」だと
   認識させ、この意図しない二重ラップを防ぐ。ここでは<p>要素自体の既定
   marginをmargin:0で明示的に打ち消し、レイアウトに影響しないようにする。 */
.piyolabs-related-resources__back-link-wrap {
	margin: 0;
	flex-shrink: 0;
}
.piyolabs-related-resources__back-link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}
.piyolabs-related-resources__back-link:visited {
	color: var(--wp--preset--color--brand);
}
.piyolabs-related-resources__back-link:hover {
	text-decoration: underline;
}

/* カードグリッド(Next.js版223行目 `mt-6 grid gap-5 md:grid-cols-2`)。
   1件の場合は特別な分岐を書かず、そのままgridに1枚だけ流し込む
   (CSS Gridは要素が1つなら自然に1カラムぶんしか使わないため)。 */
.piyolabs-related-resources__grid {
	margin-top: 1.5rem; /* Next.js版 mt-6 */
	display: grid;
	gap: 1.25rem; /* Next.js版 gap-5 */
}
@media (min-width: 768px) {
	.piyolabs-related-resources__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* カード本体(Next.js版225〜229行目
   `group flex flex-col rounded-2xl border border-border bg-card p-6
   transition-colors hover:border-brand/40 hover:bg-accent/50`)。
   rounded-2xl(1rem)相当としてtheme.jsonのカスタム半径プリセット
   --wp--custom--radius--xl(1.05rem)を使う。既にarchive-resource.html の
   記事カード・.piyolabs-resource-toc--mobile 等、サイト内の他のカードでも
   同じxlプリセットを「notable card」の半径として使っている既存の慣習に
   合わせた(独自の新しい半径値は発明しない)。

   【カード自体が<a>ではなく<div>である理由(Next.js版との構造上の相違、
   実機検証で発見した実バグへの対応)】
   Next.js版はカード全体を1つの<a>で包むが、includes/related-resources.php
   の piyolabs_related_resources_card_html() のdocblockに記載のとおり、
   その構造をそのまま再現するとwp:shortcodeブロックのwpautop処理が
   <a>の中に入れ子になった<h3>/<p>の前後で<a>を破損させる実バグを
   実機検証で発見したため、カードは<div>にし、position:relativeを持たせて
   実際のクリック対象(.piyolabs-related-resources__card-link、タイトル内の
   <a>)を"stretched link"技法(::afterでカード全面に重ねる、下記参照)で
   カード全体に広げる。hover時の枠線/背景色の変化はカード(<div>)自身に
   :hoverを効かせれば、カード内のどこにマウスが乗っても発火するため、
   <div>化による見た目上の違いは無い。 */
.piyolabs-related-resources__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--wp--custom--radius--xl);
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--card);
	padding: 1.5rem; /* Next.js版 p-6 */
	transition: border-color 150ms ease, background-color 150ms ease;
}
/* hover:border-brand/40・hover:bg-accent/50(brand=#33597a、
   accent=#eef2f6、theme.json参照)の近似値。このテーマはcolor-mix()を
   使う前例が無く、既存のアルファ合成はすべてrgba()直書き
   (.piyolabs-header__surfaceのrgba(255,255,255,.9)、.piyolabs-footer__bottomの
   rgba(255,255,255,.15)と同じ手法)のため、ここでも同じ手法に揃える。 */
.piyolabs-related-resources__card:hover {
	border-color: rgba(51, 89, 122, 0.4); /* brand #33597a のalpha 0.4 */
	background-color: rgba(238, 242, 246, 0.5); /* accent #eef2f6 のalpha 0.5 */
}

/* __card-category-wrap(<p>)は、上の.piyolabs-related-resources__back-link-wrap
   と全く同じ理由(wpautopが素の<span>断片を勝手に<p>で包んでしまうのを
   防ぐ)であらかじめ用意している薄いラッパー。既定marginはmargin:0で
   打ち消す。カテゴリが無い記事ではincludes/related-resources.php側が
   このラッパーごと出力しない(空のpillを残さない)。 */
.piyolabs-related-resources__card-category-wrap {
	margin: 0;
}

/* カテゴリpill(Next.js版230〜232行目
   `inline-flex w-fit items-center rounded-full bg-secondary px-2.5 py-1
   text-xs font-semibold text-secondary-foreground`)。カード全体が単一の
   <a>ではなくなった(上の.piyolabs-related-resources__cardのコメント参照)
   ため入れ子<a>の制約は無いが、wp:post-termsブロックの
   .piyolabs-resource-category-pill(内部に<a>を想定)とはHTML構造が異なる
   ため引き続き専用クラスとし、折り返し安全策(min-width:0/max-width:100%/
   overflow-wrap:anywhere、.piyolabs-resource-category-pill 関連ルールと
   同じ考え方)は同様に持たせる。 */
.piyolabs-related-resources__card-category {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	border-radius: 9999px; /* rounded-full */
	padding: 0.25rem 0.625rem; /* px-2.5 py-1 */
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary-foreground);
}

/* タイトル(Next.js版233〜235行目
   `mt-3 font-display text-base font-bold text-balance text-foreground`)。
   text-base(16px)はtheme.jsonのfontSizeプリセット"medium"(16px)に対応する。
   実際のクリック対象である.piyolabs-related-resources__card-link(<a>)は
   このh3の中にネストされる(includes/related-resources.php参照)。 */
.piyolabs-related-resources__card-title {
	margin: 0.75rem 0 0; /* Next.js版 mt-3 */
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--foreground);
	overflow-wrap: anywhere;
}

/* タイトルの実際のリンク(<a>、上の.piyolabs-related-resources__cardの
   コメントで説明した"stretched link"技法)。::afterをカード全体
   (position:relativeな.piyolabs-related-resources__card)に重ねることで、
   カード内のどこをクリック/タップしてもこのリンクが発火する
   (Next.js版のカード全体<a>と同じクリック領域になる)。テキスト色は
   タイトル自身の色を継承させ、リンクらしい下線・別配色は付けない
   (Next.js版233〜235行目のタイトル自体にはリンク特有の装飾が無いため)。 */
.piyolabs-related-resources__card-link {
	color: inherit;
	text-decoration: none;
}
.piyolabs-related-resources__card-link:visited {
	color: inherit;
}
.piyolabs-related-resources__card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* 抜粋(Next.js版236〜238行目
   `mt-2 flex-1 text-sm leading-relaxed text-muted-foreground`)。flex-1で
   カード内の残り縦幅を占め、複数枚のカードの高さが記事本文量によらず
   揃って見えるようにする(タイトル・pillの行数が記事ごとに異なっても、
   「続きを読む」の位置がカード下端に揃う)。 */
.piyolabs-related-resources__card-excerpt {
	margin: 0.5rem 0 0; /* Next.js版 mt-2 */
	flex: 1 1 auto;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.625; /* leading-relaxed */
	color: var(--wp--preset--color--muted-foreground);
	overflow-wrap: anywhere;
}

/* __card-readmore-wrap(<p>)も、上の__back-link-wrap・__card-category-wrapと
   同じ理由(wpautopの意図しない<p>二重挿入を防ぐ)であらかじめ用意している
   薄いラッパー。既定marginはmargin:0で打ち消す。 */
.piyolabs-related-resources__card-readmore-wrap {
	margin: 1rem 0 0; /* Next.js版 mt-4 */
}

/* 「続きを読む →」(Next.js版239〜242行目
   `mt-4 inline-flex items-center gap-1 text-sm font-semibold text-brand`)。
   矢印記号はラベル文字列自体に含まれる(上の.piyolabs-related-resources__back-link
   と同じ方針)。 */
.piyolabs-related-resources__card-readmore {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
}
/* ==================================================================== */

/* ==================================================================== */
/* Home Hero + rVAS紹介(#rvas) ボタンのデザインパリティ修正                */
/* (feat/home-button-parity)                                            */
/*                                                                      */
/* 背景:                                                                 */
/*   theme.json の styles.elements.button(グローバルなwp:buttonの見た目、  */
/*   約1442行目)はサイト全体のボタンに効くため、このファイルからは変更     */
/*   できない(このセクションのスコープを参照)。しかしNext.js版            */
/*   components/ui/button.tsx(xlサイズ)・components/site/hero.tsx・       */
/*   components/site/rvas-section.tsx と比べると、現状のグローバルな       */
/*   ボタンは (1) 高さが約54px(Next.js版は44px)と背景dark、(2) 文字が      */
/*   font-weight 400(Next.js版は500)、(3) プライマリボタンにNext.js版が    */
/*   持つ装飾用ArrowRightアイコンが無い、(4) hover時に背景色が             */
/*   --wp--preset--color--primary(#22384e、brandとは別の色相)へ切り替わり  */
/*   Next.js版の hover:bg-brand/90(同じ色相のまま少し透過)と異なる、       */
/*   という4点の差分がある。                                              */
/*                                                                      */
/*   本セクションは、この4点をHomeのHero + rVAS紹介(#rvas)の              */
/*   ボタンだけに限定して修正する(ProductsShelf「詳しく見る →」・          */
/*   Resources「記事の一覧を見る →」「続きを読む →」・Support「見る →」    */
/*   「メールを送る →」など、他のCTAは文字どおりの"→"表記のまま現状維持で、  */
/*   このセクションの対象外)。                                            */
/*                                                                      */
/*   [スコープの考え方]                                                   */
/*   Hero・#rvasともに、既に確立済みの2トラック分のセレクタをそのまま       */
/*   再利用する(新しいセレクタは発明しない)。                             */
/*     - Hero: `.piyolabs-home-hero`(Track 1、patterns/hero-home.php・     */
/*       content-data/pages-ja.php・pages-en.php が<section>に付与する     */
/*       専用クラス)と、`body.home #piyolabs-main > .wp-block-post-content */
/*       > section:first-of-type`(Track 2、既にConoHaへインポート済みで    */
/*       上記クラスを持たない旧post_content向けの直接子チェーンによる       */
/*       フォールバック。このファイル冒頭寄りの「ホームヒーロー」節         */
/*       (piyolabs-hero-frame・アクセントバー関連)で確立済みの同じ         */
/*       セレクタ対を再利用している)。                                    */
/*     - rVAS紹介: `body.home #rvas`(Track 1・Track 2共通。id="rvas"は     */
/*       content-data/pages-ja.php・pages-en.phpの<section>にのみ存在し、   */
/*       他のページ(/rvasページ自体のpatterns/rvas-intro.php等)は          */
/*       このidを持たない別セクションのため衝突しない)。                   */
/*                                                                      */
/*   [プライマリ/セカンダリの見分け方]                                     */
/*   core/buttonブロックは、ボタン本体<a class="wp-block-button__link">を   */
/*   ラップする<div class="wp-block-button">側にバリエーションクラス       */
/*   (register_block_styleで登録した"is-style-outline")を持たせる。        */
/*   よって「セカンダリ(アウトライン)ではない」= プライマリの判定は、       */
/*   <a>自身ではなく祖先の<div class="wp-block-button">に対して            */
/*   `:not(.is-style-outline)`を書く必要がある。上のファイル冒頭           */
/*   「ボタン: アウトラインスタイル」節の                                  */
/*   `.wp-block-button.is-style-outline .wp-block-button__link`と          */
/*   同じ構造理解に基づく。                                                */
/* ------------------------------------------------------------------ */

/* 1) サイズ・タイポグラフィ(Hero・#rvas、プライマリ/セカンダリ共通)。      */
/*    Next.js版 button.tsx の xl サイズ(h-11=44px、gap-2=0.5rem)を、        */
/*    height固定ではなくフォントサイズ16px・line-height 1.5(24px行送り)+   */
/*    padding-block 0.625rem(上下合計20px)というコンテンツ駆動の指定で      */
/*    再現する(height:44pxを直接指定すると、ブラウザのズームや             */
/*    英語版の長いラベルでの折り返し時に文字が縦につぶれてしまうため)。      */
/*    算出: 24px(文字の行送り) + 20px(上下padding合計) = 44px             */
/*    (min-heightにしているため、万一2行になった場合はさらに伸びる)。       */
/*    box-sizing:border-boxとgap:0.5remは、アイコン(下記2)のための          */
/*    flexレイアウトを支える指定を兼ねる。 */
.piyolabs-home-hero .wp-block-button__link,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type .wp-block-button__link,
body.home #rvas .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.75rem; /* 44px */
	padding-block: 0.625rem; /* 上下合計20px */
	padding-inline: 1.25rem;
	font-weight: 500;
	line-height: 1.5; /* font-size 16pxとの掛け合わせで24px */
	gap: 0.5rem; /* Next.js版 gap-2、アイコンとの間隔 */
}

/* 1b) セカンダリ(アウトライン)ボタンのpadding-block補正。上記1の           */
/*     min-heightはコンテンツ駆動の「下限」であり「上限」ではないため、      */
/*     アウトラインバリエーション(このファイル冒頭「ボタン: アウトライン    */
/*     スタイル」節、.wp-block-button.is-style-outline .wp-block-button__link)*/
/*     が持つ border: 1px solid(上下合計2px)がpadding-blockの上に           */
/*     加算されると、実測の内容ボックス高さが24px(line-height) +            */
/*     20px(padding-block) + 2px(border) = 46pxとなり、44pxのmin-height     */
/*     floorを超えてしまう(プライマリは同じmin-heightのままborderが         */
/*     無いため44pxちょうどで収まるが、セカンダリだけ46pxへ伸びてしまい、    */
/*     プライマリ/セカンダリの高さが視覚的に揃わない)。border 1px分         */
/*     (上下合計2px)をpadding-blockから差し引くことで、セカンダリも         */
/*     44pxへ揃える。                                                    */
/*                                                                      */
/*     グローバルなis-style-outlineルール(ファイル冒頭、                   */
/*     border: 1px solid var(--wp--preset--color--border)を含む)自体は      */
/*     変更せず、Home Hero / #rvasスコープでpadding-blockだけをこの         */
/*     ルールで上書きする(.is-style-outlineを加えたセレクタは、祖先         */
/*     セレクタに.is-style-outlineクラスが1つ増えるぶん、上記1の            */
/*     ルールよりCSS詳細度が高いため、padding-block宣言のみを自然に         */
/*     上書きできる。/rvas・/apps・/404等、他ページの                       */
/*     .wp-block-button.is-style-outlineには、Home Hero/#rvasの祖先         */
/*     セレクタ自体がマッチしないため影響しない)。 */
.piyolabs-home-hero .wp-block-button.is-style-outline .wp-block-button__link,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type .wp-block-button.is-style-outline .wp-block-button__link,
body.home #rvas .wp-block-button.is-style-outline .wp-block-button__link {
	padding-block: calc(0.625rem - 1px); /* 上下計20px - border2px分 = 18px、border込みで44pxに揃える */
}

/* 2) プライマリボタンのみに付く装飾用ArrowRightアイコン(CSS疑似要素のみ、  */
/*    マークアップ変更なし)。Next.js版 hero.tsx・rvas-section.tsxの         */
/*    <ArrowRight className="size-4" />(lucide、16px)を模した簡易な         */
/*    矢印(横棒+矢じり)をmask-imageで描画する。                            */
/*                                                                      */
/*    [mask-imageの色に白を使う理由] CSSのmask-imageは既定でluminance       */
/*    (輝度)マスクとして扱われる実装がある一方、-webkit-mask-imageは        */
/*    alphaチャンネルで扱われる実装があり、ブラウザによって解釈が割れる。    */
/*    黒でパスを描くとluminanceマスクでは「輝度0=非表示」と解釈されて       */
/*    アイコンが消えてしまう恐れがあるため、白(輝度最大)でパスを描く。      */
/*    これによりluminanceモード・alphaモードのどちらで解釈されても          */
/*    不透明部分が表示される。実際の色はbackground-color:currentColorが     */
/*    決めるため、パス自体の色(白)は最終的な見た目に影響しない。            */
/*                                                                      */
/*    アイコンにはhoverでの移動・アニメーションを付けない(hero.tsx:58・     */
/*    rvas-section.tsx:46を確認済み。ProductsShelf/Resourcesカードの       */
/*    CTAアイコンにはgroup-hover:translateが付いているが、ここでは          */
/*    確認した2箇所どちらにも同種のクラスが無いため、意図的に付けない)。     */
/*                                                                      */
/*    `:not(.is-style-outline)`は<a>ではなく祖先<div class="wp-block-      */
/*    button">に対する判定であるため、セカンダリ(is-style-outline)の       */
/*    ボタンにはこのルールが一切マッチしない(3)を参照。 */
.piyolabs-home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link::after,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type .wp-block-button:not(.is-style-outline) .wp-block-button__link::after,
body.home #rvas .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1rem; /* 16px、lucideのsize-4相当 */
	height: 1rem;
	background-color: currentColor; /* ボタンの文字色(白)を継承 */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* 3) セカンダリ(アウトライン)ボタンにはアイコンを付けない。上の2の          */
/*    セレクタは`:not(.is-style-outline)`で祖先divを絞り込んでいるため、    */
/*    `.wp-block-button.is-style-outline .wp-block-button__link`には        */
/*    そもそもマッチしない。この不一致はtests/hero-parity-test.js・        */
/*    tests/rvas-intro-parity-test.jsの静的テストで確認している            */
/*    (is-style-outlineとcontent:""/maskの組み合わせがstyle.css上に         */
/*    存在しないことを検証)。 */

/* 4) プライマリボタンのみのhover背景色。従来のグローバル既定              */
/*    (theme.json styles.elements.button の :hover、背景が                */
/*    --wp--preset--color--primary(#22384e)という別の色相へ切り替わる)を   */
/*    このスコープ内だけ上書きする。Next.js版button.tsx:13の                */
/*    hover:bg-brand/90(同じbrand色相のまま90%不透明度)に合わせ、           */
/*    color-mix()でbrandをtransparentと90:10で混ぜる                       */
/*    (=rgba(51,89,122,0.9)相当、このテーマでcolor-mix()を使う初例)。       */
/*    opacity:0.9は文字・アイコンまで薄くしてしまうため使わない             */
/*    (ユーザーが明示的に却下した案)。                                     */
/*                                                                      */
/*    [コントラスト確認] rgba(51,89,122,0.9)をHeroのsurface背景            */
/*    (#eef2f6)・#rvasの白背景の上に重ねると、どちらもおよそ                */
/*    rgb(70,104,134)前後になる。白文字(--brand-foreground)との            */
/*    コントラスト比は概算で約5.6〜5.7:1となり、WCAG AA(通常文字           */
/*    4.5:1)を余裕を持って満たすため、90%のまま採用した。 */
.piyolabs-home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
body.home #rvas .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--brand) 90%, transparent);
}

/* 5) セカンダリ(アウトライン)ボタンの視認性                              */
/*    (fix/home-outline-button-legibility)                              */
/*                                                                      */
/*    rVAS HeroのCTAで是正したのと同じ問題がホームにも残っていた。        */
/*    サイト共通の.is-style-outlineは枠線に border(#e3e8ec)を使うが、     */
/*    本番実DOMで測った各ボタンの背景に対するコントラスト比は             */
/*      Hero「Piyo Labsについて」/「About Piyo Labs」                     */
/*        枠線#e3e8ec / 背景surface #eef2f6 → 約1.10:1                   */
/*      #rvas「料金・トライアル」/「Pricing & Trial」                     */
/*        枠線#e3e8ec / 背景白 #ffffff     → 約1.23:1                    */
/*    であり、非テキストUI要素に必要な3:1を大きく下回って枠線がほとんど   */
/*    見えていない。                                                     */
/*                                                                      */
/*    枠線をボタン自身の文字色と同じ brand(#33597a)へ揃えると、          */
/*    surface上で約6.55:1、白背景上で約7.37:1となり十分に識別できる。     */
/*    新しい色トークンは追加せず、既存のbrandを使う。塗りは               */
/*    transparentのままなので、塗りのプライマリボタンとの主従関係も       */
/*    崩れない。文字色は既に brand で両背景とも4.5:1を満たすため変えない。 */
/*                                                                      */
/*    hoverは共通既定(背景muted+枠線brand)のままだと、枠線が今回の       */
/*    通常時の色と同じになって状態変化が分からなくなるため、より濃い      */
/*    primaryへ変える。focus-visibleもキーボード操作向けに明示する。      */
/*    いずれもrVAS Hero CTA(このファイル下方の可読性節)と同じ考え方。    */
/*                                                                      */
/*    スコープは上記1・4と同じホーム限定の3点セットを再利用する           */
/*    (Track 1の.piyolabs-home-hero、Track 2の構造セレクタ、             */
/*     ホーム内#rvasセクション)。本番実DOMでこの3点セットが日英とも      */
/*     ホームのoutlineボタン2個ちょうどを拾うことを確認済み。            */
/*    `:not(.is-style-outline)`側には触れないため塗りボタンは不変。       */
/*    padding・サイズ・配置も変更しない(色のみ)。                        */
/*    /rvas・/apps・/about等の他ページには祖先セレクタ自体がマッチせず、  */
/*    サイト共通の.is-style-outlineルールも従来どおり変更しない。 */
.piyolabs-home-hero .wp-block-button.is-style-outline .wp-block-button__link,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type .wp-block-button.is-style-outline .wp-block-button__link,
body.home #rvas .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--brand);
}
.piyolabs-home-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type .wp-block-button.is-style-outline .wp-block-button__link:hover,
body.home #rvas .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.piyolabs-home-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
body.home #piyolabs-main > .wp-block-post-content > section:first-of-type .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
body.home #rvas .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}
/* ==================================================================== */

/* ==================================================================== */
/* rVASページ 静的セクションパリティ (feat/rvas-static-section-parity)      */
/*                                                                      */
/* 事前調査(本番DOM実機確認済み)で確定した4件の視覚修正。いずれも新規      */
/* markup・theme.jsonトークン追加・SVG/アイコンアセット追加なしの、        */
/* 既存DOM構造に対する純粋なCSS(疑似要素・flex/grid・color-mix())のみ。    */
/*                                                                      */
/* スコープ規律: このrVASページの本文ルートは                             */
/* `#piyolabs-main.piyolabs-rvas-page`であり(2815行目以降の既存ルール      */
/* 参照)、下記a)〜d)の新規セレクタはすべてこれをprefixとして持つ            */
/* (c)の`id="pricing"`はこのページに一意(content-data/pages-ja.php・       */
/* pages-en.php確認済み)で`#pricing`単独でも十分スコープされるが、         */
/* 将来ほかのページで同じidが使われた場合の事故を避けるため、a)b)d)と      */
/* 同じ`#piyolabs-main.piyolabs-rvas-page`prefixもあえて重ねている)。      */
/* nth-of-type/nth-childのような位置依存セレクタは一切使わず、既存         */
/* class名・id・href値・構造関係(子コンビネータ・:has())のみに依存する。 */

/* ------------------------------------------------------------------ */
/* a) 「主な機能」4カード(価格カード・「もっと知りたいときは」カードを     */
/*    除く)にチェックバッジを追加。                                      */
/*                                                                      */
/* 対象カードは`.is-style-piyolabs-card`のうち、直接の子として            */
/* `<h3>`の直後に`<p class="has-muted-foreground-color">`が続くものだけ    */
/* (content-data/pages-ja.php 682〜746行目付近で確認済み。価格カードは    */
/* h3の次がhas-muted-foreground-colorを持たない価格<p>、「もっと知りたい  */
/* ときは」カードはh3の次が<p>ではなく.wp-block-columnsのため、どちらも   */
/* この:has()には一致しない)。カード自体(border/background/padding)は     */
/* 既存の`.wp-block-group.is-style-piyolabs-card`基本ルール(45行目)が      */
/* 引き続き提供するため、ここでは一切変更しない。                         */
/*                                                                      */
/* バッジ(円)・チェックマークの描画技法は、1436〜1465行目の              */
/* `.piyolabs-feature-list li::before/::after`(正方形を45度回転し右辺・   */
/* 下辺のborderだけを見せる古典的なCSSチェックマーク)と同一寸法           */
/* (円1.25rem、チェックマークborder太さ2px)を再利用し、色だけをこの        */
/* ページ専用のブランドトーンへ変更する。                                 */
/*                                                                      */
/* [align-itemsの差によるチェックマーク位置の調整]                       */
/* `.piyolabs-feature-list li`は`align-items: flex-start`(バッジがliの     */
/* 上端に固定)のため、::afterは`top: 0.465rem`という固定値でバッジ中央に  */
/* 正しく重なる。一方このh3は`align-items: center`(バッジと見出しテキスト */
/* を垂直方向中央揃えにする、という本タスクの指定要件)であり、h3の行       */
/* ボックス高さはフォントサイズ(large、18〜20pxのfluid)のline-heightで     */
/* 決まるため固定値ではない。バッジ(::before)もh3の中央に来るため、        */
/* 固定top値ではズレる。そのため::afterは`top: 50%; transform: translateY */
/* (-50%) rotate(45deg);`とし、h3の垂直中央(=バッジの垂直中央と一致)に     */
/* 常に正しく重なるようにした(横方向のleftは対象liと同じ0.44remを流用     */
/* できる、バッジ自体は変わらずh3の左端に固定幅で配置されるため)。         */
/* ------------------------------------------------------------------ */
#piyolabs-main.piyolabs-rvas-page
	.is-style-piyolabs-card:has(> h3 + p.has-muted-foreground-color)
	> h3 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem; /* .piyolabs-feature-list liと同じgap値(1432行目) */
}
#piyolabs-main.piyolabs-rvas-page
	.is-style-piyolabs-card:has(> h3 + p.has-muted-foreground-color)
	> h3::before {
	content: "";
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--secondary); /* fallback for browsers without color-mix() */
	background-color: color-mix(in srgb, var(--wp--preset--color--brand) 12%, var(--wp--preset--color--card));
}
#piyolabs-main.piyolabs-rvas-page
	.is-style-piyolabs-card:has(> h3 + p.has-muted-foreground-color)
	> h3::after {
	content: "";
	position: absolute;
	left: 0.44rem;
	top: 50%;
	width: 0.3rem;
	height: 0.55rem;
	border-right: 2px solid var(--wp--preset--color--brand);
	border-bottom: 2px solid var(--wp--preset--color--brand);
	transform: translateY(-50%) rotate(45deg);
}

/* ------------------------------------------------------------------ */
/* b) 「データ管理とプライバシー」(.piyolabs-notice、rVASページ専用       */
/*    スコープ)のチェックリストを2カラム化+チェックバッジ付与、末尾の     */
/*    注記<p>にCSSのみの装飾"info"ドットを追加。                          */
/*                                                                      */
/* `.piyolabs-notice`は他ページ(手動プレースホルダー用ショートコード等)   */
/* でも再利用される共有クラスのため、ここでは必ず                        */
/* `#piyolabs-main.piyolabs-rvas-page`をprefixに持つセレクタのみを使い、  */
/* 他ページの.piyolabs-noticeには一切影響しない。                        */
/* ------------------------------------------------------------------ */

/* グリッド化: ブレークポイント(640px)・gap(0.75rem)は、1413〜1421行目の  */
/* `.piyolabs-feature-list`の2カラム化ルールと同じ値を再利用する          */
/* (このファイル内の既存の640pxブレークポイント慣例に合わせる、新規       */
/* ブレークポイントは考案しない)。 */
#piyolabs-main.piyolabs-rvas-page .piyolabs-notice > ul.wp-block-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	#piyolabs-main.piyolabs-rvas-page .piyolabs-notice > ul.wp-block-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 各liのチェックバッジ: 上のa)節と全く同じ技法・寸法。ただしこちらの     */
/* liは複数行に折り返す可能性がある短文のため、`.piyolabs-feature-list    */
/* li`(1423〜1435行目)と同じ`align-items: flex-start`を採用し、           */
/* チェックマーク::afterのtop/left固定値もそちらと完全に同じ値を          */
/* そのまま流用できる(a)節のようなtranslateY(-50%)調整は不要)。色は     */
/* a)節と同じブランドトーンに揃え、このページ内の2つのチェックバッジ       */
/* パターンを視覚的に統一する(元の.piyolabs-feature-listのsecondary系     */
/* グレーではなく、ブランドトーンを採用)。 */
#piyolabs-main.piyolabs-rvas-page .piyolabs-notice > ul.wp-block-list li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	list-style: none;
}
#piyolabs-main.piyolabs-rvas-page .piyolabs-notice > ul.wp-block-list li::before {
	content: "";
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	border-radius: 9999px;
	background-color: var(--wp--preset--color--secondary); /* fallback for browsers without color-mix() */
	background-color: color-mix(in srgb, var(--wp--preset--color--brand) 12%, var(--wp--preset--color--card));
}
#piyolabs-main.piyolabs-rvas-page .piyolabs-notice > ul.wp-block-list li::after {
	content: "";
	position: absolute;
	left: 0.44rem;
	top: 0.465rem;
	width: 0.3rem;
	height: 0.55rem;
	border-right: 2px solid var(--wp--preset--color--brand);
	border-bottom: 2px solid var(--wp--preset--color--brand);
	transform: rotate(45deg);
}

/* 末尾の注記<p>: 既存の本番DOM(content-data/pages-ja.php 998〜999行目・  */
/* pages-en.php同型)は、すでにインラインstyleでborder-top-width:1pxの     */
/* 区切り線を持っている(本タスクの事前調査で確認済み)ため、ここでは       */
/* border-top関連のCSSは一切追加しない。追加するのはCSSのみで組んだ        */
/* 装飾用「info」ドット(::before)だけで、`content`には空文字列以外の      */
/* 文字("i"などの実際の文字)を一切入れない(一部のスクリーンリーダーは     */
/* 生成コンテンツのcontentも読み上げるため、装飾目的のこのアイコンが       */
/* 読み上げられないようにするための要件)。ドット(上)+短い縦棒(下)の       */
/* 2層のbackground-image(radial-gradient+linear-gradient)を1つの疑似要素  */
/* に重ねて簡易的な「i」の形を表現する。 */
#piyolabs-main.piyolabs-rvas-page .piyolabs-notice > p:last-child {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
#piyolabs-main.piyolabs-rvas-page .piyolabs-notice > p:last-child::before {
	content: "";
	display: block;
	flex: 0 0 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.15rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--border);
	background-image:
		radial-gradient(circle, var(--wp--preset--color--muted-foreground) 50%, transparent 50%),
		linear-gradient(var(--wp--preset--color--muted-foreground), var(--wp--preset--color--muted-foreground));
	background-repeat: no-repeat, no-repeat;
	background-position: 50% 22%, 50% 68%;
	background-size: 0.16rem 0.16rem, 0.14rem 0.42rem;
}

/* ------------------------------------------------------------------ */
/* c) 「料金」カード内、プラン名<h3>と価格<p>の横並び整列。               */
/*    `id="pricing"`はこのページに一意(content-data/pages-ja.php 1013行目 */
/*    ・pages-en.php同型)だが、将来ほかのページで同じid="pricing"が       */
/*    使われた場合にrVAS固有のlayoutが意図せず適用されないよう、          */
/*    b)/d)節と同じ`#piyolabs-main.piyolabs-rvas-page`によるページscopeを */
/*    `#pricing`にも重ねる(このファイル内の新規追加セクションはa)〜d)     */
/*    すべてrVASページscopeで揃える設計)。モバイルファーストで、既定       */
/*    (狭い画面)は従来どおりの縦積み、640px以上(a)/b)節と同じ既存         */
/*    ブレークポイント慣例を再利用)でプラン名と価格を左右に開いて         */
/*    baseline揃えする。 */
/* ------------------------------------------------------------------ */
#piyolabs-main.piyolabs-rvas-page #pricing .is-style-piyolabs-card {
	display: flex;
	flex-direction: column;
}
@media (min-width: 640px) {
	#piyolabs-main.piyolabs-rvas-page #pricing .is-style-piyolabs-card {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------------ */
/* d) 「もっと知りたいときは」カード内の4リンクを、枠線付きのクリック     */
/*    可能なボックスにする。新規<a>/<span>/wrapper要素は一切追加せず、     */
/*    既存の<a>タグ自体にスタイルを適用する。                             */
/*                                                                      */
/* スコープ: content-data/pages-ja.php 1077〜1119行目(pages-en.php同型)   */
/* を直接確認した結果、このページの`.is-style-piyolabs-card`のうち        */
/* 直接の子に`.wp-block-columns`を持つのはこの「もっと知りたいときは」    */
/* カードだけ(主な機能4カード・価格2カードはいずれもh3の次が<p>のみで、   */
/* .wp-block-columnsを直接の子に持たない)であることを確認済みのため、     */
/* href値を`/support#faq`等8種類列挙する代わりに、この構造的事実を        */
/* `:has(> .wp-block-columns)`で表現する(JA/EN双方のhrefを列挙する必要が  */
/* なく、どちらの言語でも同じ1セレクタで機能する)。 */
#piyolabs-main.piyolabs-rvas-page
	.is-style-piyolabs-card:has(> .wp-block-columns)
	.wp-block-column
	> p
	> a {
	display: block;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--xl); /* .is-style-piyolabs-card自体(48行目)と同じトークン */
	padding: 0.75rem 1rem; /* var(--wp--custom--spacing--card)は1行リンクには大きすぎるため、カードに比例した小さめの明示値を採用 */
	transition: border-color 0.2s ease; /* .wp-block-group.is-style-piyolabs-card:hover(52行目)と同じ手法 */
}
#piyolabs-main.piyolabs-rvas-page
	.is-style-piyolabs-card:has(> .wp-block-columns)
	.wp-block-column
	> p
	> a:hover {
	border-color: var(--wp--preset--color--brand);
}
#piyolabs-main.piyolabs-rvas-page
	.is-style-piyolabs-card:has(> .wp-block-columns)
	.wp-block-column
	> p
	> a:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand); /* .piyolabs-gallery__thumb:focus-visible(244行目)等と同じ慣例 */
	outline-offset: 2px;
}
/* ==================================================================== */

/* ==================================================================== */
/* rVASページ 非interactiveカードのmisleading hover除去                    */
/* (fix/rvas-noninteractive-card-hover)                                 */
/*                                                                      */
/* 背景: 共有のglobal card rule(52〜55行目、.wp-block-group.             */
/* is-style-piyolabs-card:hover/:focus-within { border-color: brand })  */
/* は、Products/Resources等の「カード全体がクリック可能」なinteractive    */
/* カードのhover affordanceとして必要なため、このrule自体は変更しない。   */
/* しかしrVASページ内の以下3グループは、カード自体にもカード内部にも       */
/* link/buttonなどのinteractive要素が存在しない(production DOM実機相当   */
/* のcontent-data/pages-ja.php・pages-en.php確認済み)にもかかわらず、     */
/* 同じglobal ruleが適用されてしまい、hoverでborderがbrand色に変わる       */
/* ことで「クリックできるカード」であるかのように誤認させてしまう:         */
/*   - 概要(01/02/03バッジ3カード)                                       */
/*   - 主な機能(最初の4カード。a)節のチェックバッジ対象と同一カード)      */
/*   - 料金(月額/年額2カード)                                            */
/* 「もっと知りたいときは」カードは内部に実際の<a>を4つ持つため対象外      */
/* (interactive、hoverは維持する)。                                     */
/*                                                                      */
/* ページscope(`#piyolabs-main.piyolabs-rvas-page`)+IDセレクタにより      */
/* specificityがglobal rule(class3つ相当)より必ず高くなるため、           */
/* source order・!important に頼らずglobal ruleを上書きできる。           */
/* 3グループとも、nth-of-type/nth-child・表示テキストに依存せず、          */
/* 各カードが既に持つ既存class・構造による:has()スコープのみを使う。       */
/*                                                                      */
/* [fix/rvas-hover-and-app-store-en での訂正]                            */
/* 概要カードの当初セレクタ`:has(> p.piyolabs-badge-square)`は、production */
/* 実機DOM確認の結果、一致しないことが判明した(修正)。`piyolabs-badge-     */
/* square`は2960行目以降のコメントに明記されている通りTrack1専用class     */
/* (新規インポート分のみに付与)であり、rVAS「概要」の既存production        */
/* post_content(Track2)には元々このclassが付与されていない。3004行目      */
/* 以降で既に確立されている概要バッジのTrack2構造セレクタ                  */
/* (`.is-style-piyolabs-card > p.has-secondary-background-color:first-   */
/* child`、ただしnth-of-type(2)によるsection位置スコープを伴う)と同じ      */
/* 構造的事実(バッジ<p>は`has-secondary-background-color`を持つ)を、       */
/* 本ルールでは`:has(> p.has-secondary-background-color)`という           */
/* 位置非依存の形で再利用する(本ルールは既に`#piyolabs-main.piyolabs-      */
/* rvas-page`でページ全体をスコープしているため、section位置での追加       */
/* 絞り込みは不要)。 */
#piyolabs-main.piyolabs-rvas-page .is-style-piyolabs-card:has(> p.has-secondary-background-color):hover,
#piyolabs-main.piyolabs-rvas-page .is-style-piyolabs-card:has(> p.has-secondary-background-color):focus-within,
#piyolabs-main.piyolabs-rvas-page .is-style-piyolabs-card:has(> h3 + p.has-muted-foreground-color):hover,
#piyolabs-main.piyolabs-rvas-page .is-style-piyolabs-card:has(> h3 + p.has-muted-foreground-color):focus-within,
#piyolabs-main.piyolabs-rvas-page #pricing .is-style-piyolabs-card:has(> p.has-xx-large-font-size):hover,
#piyolabs-main.piyolabs-rvas-page #pricing .is-style-piyolabs-card:has(> p.has-xx-large-font-size):focus-within {
	border-color: var(--wp--preset--color--border);
}

/* [fix/rvas-hover-and-app-store-en での追加]                            */
/* 「もっと知りたいときは」カード自身(外枠の.is-style-piyolabs-card)の     */
/* hoverも、production実機確認の結果、誤認を招くと判断し抑制対象に追加      */
/* した。このカードは内部に実際の<a>を4つ持つが、その4つのリンク自体の     */
/* hover/cursor:pointer/focus-visibleはd)節(もっと知りたいときはリンク    */
/* ボックス化)の`.is-style-piyolabs-card:has(> .wp-block-columns)         */
/* .wp-block-column > p > a:hover/:focus-visible`という別要素(<a>自体)    */
/* 向けのルールで独立して維持されるため、外枠カードのborder-colorだけを     */
/* 通常色に戻しても、リンク自体のアフォーダンスは失われない。同じ           */
/* `:has(> .wp-block-columns)`構造セレクタをd)節から再利用し、新しい       */
/* class・DOM要素は追加していない。 */
#piyolabs-main.piyolabs-rvas-page .is-style-piyolabs-card:has(> .wp-block-columns):hover,
#piyolabs-main.piyolabs-rvas-page .is-style-piyolabs-card:has(> .wp-block-columns):focus-within {
	border-color: var(--wp--preset--color--border);
}
/* ==================================================================== */

/* ==================================================================== */
/* rVAS Heroボタングループ (fix/rvas-hero-cta-alignment)                  */
/*                                                                      */
/* 【現在の役割 — feat/rvas-hero-actions-canonical で前提が変わった】     */
/* このルールは当初「Hero内の.wp-block-buttonsにApp Store CTAと            */
/* 料金・トライアルの2ボタンが並ぶ」という前提で追加したものだが、その     */
/* 前提は誤りだった。App Store CTAは実際にはボタングループの中では描画     */
/* されず(下記の.piyolabs-rvas-hero-actions節のコメント参照)、現在の      */
/* canonical構造ではボタングループの中身は料金/Pricingボタン1つだけになる。 */
/*                                                                      */
/* そのため本ルールは現状では視覚的にほぼ無影響(子1個)だが、次の理由で    */
/* 残している:                                                          */
/*   - 削除自体が余計な変更リスクになる                                   */
/*   - 将来このボタングループへボタンを追加した場合には、引き続き          */
/*     モバイル縦積み→640px以上で横並び、という意図どおりに機能する        */
/* ローカルWordPressでの実レンダリング検証でも、新しいラッパー構造と       */
/* 併用して競合・余白の乱れが起きないことを確認済み。                     */
/*                                                                      */
/* スコープ: 既存の`.piyolabs-rvas-hero`(2897行目、rVASページHero専用の    */
/* 確立済みclass)をprefixに使う。nth-child等は使わない。 */
.piyolabs-rvas-hero .wp-block-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* ブロック自体のblockGap設定(content-data側のinline style、
	                 pages-ja.php・pages-en.php同型)と同じ値を明示的に指定し、
	                 WordPressコア側のgap算出に依存しない。 */
}
@media (min-width: 640px) {
	.piyolabs-rvas-hero .wp-block-buttons {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
}
/* ==================================================================== */

/* ==================================================================== */
/* rVAS HeroのCTAアクション領域 (feat/rvas-hero-actions-canonical)         */
/*                                                                      */
/* 【背景 — 使い捨てローカルWordPressでの実レンダリング検証で確定】       */
/* content-dataがこれまで持っていた形、および本番英語ページの現状である    */
/*   <!-- wp:button -->                                                 */
/*   <div class="wp-block-button">[piyolabs_app_store_button]</div>      */
/*   <!-- /wp:button -->                                                */
/* という構造は、最終HTMLから丸ごと消える(ラッパーの<div>もリンクも       */
/* リテラルのショートコード文字列も出力されない)。the_contentの           */
/* do_blocks(優先度9)の時点では中身がまだ文字列のままで<a>が存在せず、    */
/* do_shortcode(優先度11)より前にcore/buttonの描画が終わるため。         */
/* 実際、本番英語ページではApp Store CTAが表示されていなかった。          */
/*                                                                      */
/* 一方、独立した core/shortcode ブロックは正しく                        */
/*   <a class="wp-block-button__link wp-element-button" href="…">        */
/* へ展開される(本番日本語ページで実際に動作している形)。                */
/*                                                                      */
/* そこでCTAアクション領域を次のcanonical構造へ収束させる(移行は          */
/* piyolabs-importerの限定同期ツールが行う。post_content全体の再import    */
/* ではなく、この領域だけの部分更新):                                    */
/*   core/group (.piyolabs-rvas-hero-actions)                           */
/*     ├─ core/shortcode … App Store CTA                                */
/*     └─ core/buttons   … 料金/Pricingボタン(言語ごとの既存属性を保持)  */
/*                                                                      */
/* この入れ子は通常のブロック構造であり、ブロックエディタでも検証警告が    */
/* 出ないことを実機で確認済み(core/buttonsの直下にcore/shortcodeを置く    */
/* 不正な入れ子は採用していない)。                                       */
/*                                                                      */
/* 【レイアウト】App Store CTAは素の<a>(=<p>に包まれない)としてラッパーの */
/* 直接の子になるため、そのままflexアイテムとして扱える。モバイルは縦積み、 */
/* 640px以上(このファイル内の既存ブレークポイント慣例と同じ値)で横並び。   */
/*                                                                      */
/* 【!importantを使わない理由】ボタングループ側のインラインstyleに         */
/* margin-topが残っていると、横並び時に料金ボタンだけが12pxほど下へずれる。 */
/* これはCSSで打ち消す(=!importantが要る)のではなく、同期ツール側が移設    */
/* 時にwp:buttonsのstyle.spacing.margin.topだけを外すことで解決している。   */
/* そのため下記の`margin-block-start: 0`はcoreのis-layout-flowが子へ付ける */
/* 既定マージンを消すだけでよく、通常のクラス指定で足りる。                */
/* (className・fontSize・リンク属性など他の属性は言語ごとの既存値を        */
/*  そのまま保持する。日英で属性が異なることを本番で確認済みのため。)      */
/* 【同幅化 — feat/rvas-hero-cta-equal-width】                            */
/* rVAS Hero CTA buttons are sized to the widest action while preserving  */
/* responsive stacking.                                                   */
/*                                                                        */
/* この2つのCTAはDOM上の階層が異なる(本番DOMで確認済み):                 */
/*   .piyolabs-rvas-hero-actions                                          */
/*     ├─ <a class="wp-block-button__link …">  ← App Store。これ自体が    */
/*     │                                          可視ボタン(直接の子)   */
/*     └─ <div class="wp-block-buttons">       ← 料金側は直接の子が       */
/*          └─ <div class="wp-block-button">      コンテナで、可視ボタンは */
/*               └─ <a class="wp-block-button__link">  2階層下            */
/*                                                                        */
/* このためラッパーの直接の子(`> *`)へ幅を指定するだけでは、料金側は      */
/* コンテナだけが広がって中の実ボタンが追随せず、かえって差が開く         */
/* (ローカル実測: 差67px → 76pxへ悪化)。可視ボタンである                */
/* `.wp-block-button__link` まで width:100% を通して階層差を吸収する。     */
/* この指定は素の<a>にも、App Store URL未設定時のpending表示              */
/* (<span class="wp-block-button__link … piyolabs-button-pending">)にも    */
/* 同じように効くため、両方の状態で幅が揃う。                             */
/*                                                                        */
/* 幅の決め方にマジックナンバー(固定px/rem)は使わない。gridの1frが       */
/* 「2つのうち広い方」に自動追随するため、日英の文言差や将来の文言変更に   */
/* コード修正なしで追従する(実測: EN実文言で215px同幅、JAでも同幅)。     */
/*                                                                        */
/* minmax(0, …) と max-width:100% は横溢れ防止。最長ケース(英語pending   */
/* 文言)を390pxで検証したところ、max-contentのみだとボタンがカラム幅を    */
/* 4px超過したため、下限0まで縮められる形にして収まるようにしている。      */
/*                                                                        */
/* 左寄せはgridでは justify-content:start が担うため、flex時代の           */
/* align-items:flex-start から置き換えている(左端位置は変わらないことを   */
/* 実測で確認済み)。内側の .wp-block-buttons は引き続きflexのままで、     */
/* 上記のPR #68ルールとも競合しない(実測確認済み)。 */
.piyolabs-rvas-hero-actions {
	display: grid;
	grid-template-columns: minmax(0, max-content);
	justify-content: start;
	align-items: stretch;
	gap: 0.75rem;
}
.piyolabs-rvas-hero-actions > * {
	margin-block-start: 0;
}
.piyolabs-rvas-hero-actions .wp-block-buttons,
.piyolabs-rvas-hero-actions .wp-block-button,
.piyolabs-rvas-hero-actions .wp-block-button__link {
	width: 100%;
}
/* 【横並び条件の是正 — fix/rvas-hero-cta-container-query】               */
/* 上記の2列化は当初 `@media (min-width: 640px)` すなわちviewport幅で      */
/* 判定していたが、これは判定する箱を間違えていた。                        */
/*                                                                        */
/* Heroは wp:columns の2カラムで、CTAが入る左カラムは width:"55%"。        */
/* WordPressコアは781px以下でカラムを縦積みにするため、左カラムの実幅は    */
/* 782pxを境に急変する(ローカル実測: 768pxで672px → 782pxで350.9px)。   */
/* viewport幅は広がっているのに、CTAが使える幅は半減する「崖」がある。     */
/*                                                                        */
/* viewport基準のmedia queryはこの崖を知らないため、350.9pxしかない箱に    */
/* 2列レイアウトを敷き続けていた。トラックの下限は minmax(0, 1fr) の 0 で  */
/* あり、かつ下の節の white-space:nowrap で文字は折り返して逃げられない    */
/* ため、文字がボタンからはみ出す。中央揃えの1行がはみ出すときCSSは       */
/* 開始側のpaddingを保つので、左右の余白が非対称に見える                   */
/* (実測 782px/英語: 左24px・右-21.6px、文字がボタン外へ21.6px溢れる)。  */
/* 破綻範囲は 782px〜947px で、782pxが最も酷い。                          */
/*                                                                        */
/* 正しい判定基準は「実際にCTAを制約している箱の幅」= 左カラム幅なので、   */
/* container queryへ置き換える。カラムをコンテナ化し、2列にできるだけの    */
/* 幅が実際にあるときだけ2列にする。                                       */
/*                                                                        */
/* コンテナ化の対象は :has() で「Hero CTAラッパーを直接の子に持つカラム」  */
/* に限定する。rVAS Heroの左カラム以外(右の画像カラム・他ページの         */
/* wp-block-column)には一切掛からない。container-name を付けて、将来      */
/* 別の祖先がコンテナ化された場合でも解決先がぶれないようにする。          */
/* container-type: inline-size 単体の副作用がないことは実測で確認済み      */
/* (Hero高さ・両カラム幅/高さ・画像サイズ・上端seamすべて現行と一致)。   */
/*                                                                        */
/* 閾値27.625remの根拠は、英語CTAが折り返さずに並ぶための自然幅:          */
/*   App Store 215px + 料金 215px + gap 0.75rem(12px) = 442px            */
/*   442px ÷ 16px(ルート既定) = 27.625rem                              */
/* ボタン自体には固定幅を与えない(幅は引き続き1frが「広い方」に追随)。   */
/* px直値ではなくremで書くのは、利用者がブラウザの既定文字サイズを        */
/* 大きくした場合にボタンの自然幅も大きくなるため、閾値も同じ比率で       */
/* 追随させる必要があるから。                                             */
/*                                                                        */
/* container query非対応のブラウザでは@containerブロックが丸ごと無視され、 */
/* 上の基本ルール(1列・同幅・自然幅)のままになる。文字切れも横溢れも     */
/* 起きない安全側へ倒れる。 */
/* 【Track 2対応 — fix/rvas-hero-cta-container-track2】                   */
/* 当初このコンテナ化は Track 1(content-data由来)のクラス                */
/* `.piyolabs-rvas-hero` だけを祖先条件にしていたが、本番の実post_content */
/* (Track 2)のHeroセクションにはこのクラスが無い。実DOMで確認済み:      */
/*   <section class="wp-block-group has-surface-background-color …">     */
/*   → piyolabs-rvas-hero / piyolabs-full-bleed-section ともに0件        */
/* そのためセレクタが1件もマッチせず、カラムがコンテナにならないので      */
/* @containerの条件が評価対象を持たず、PC幅でも常に1列のままだった        */
/* (本番実測 1024px: カラム幅510.4pxで閾値442pxを超えているのに          */
/*  container-typeがnormal、grid-template-columnsが1トラック)。          */
/*                                                                        */
/* Heroの本体ルール(このファイル上方、.piyolabs-rvas-hero と             */
/* .piyolabs-rvas-page > .wp-block-post-content > section:first-of-type   */
/* を併記している箇所)と同じ考え方で、Track 1・Track 2の両方を書く。     */
/* Track 2側も .piyolabs-rvas-page を起点にした構造指定なので、rVASページ */
/* のHero(post_content先頭のsection)だけに限定される。 */
.piyolabs-rvas-hero .wp-block-column:has(> .piyolabs-rvas-hero-actions),
.piyolabs-rvas-page > .wp-block-post-content > section:first-of-type .wp-block-column:has(> .piyolabs-rvas-hero-actions) {
	container-type: inline-size;
	container-name: piyolabs-rvas-hero-actions;
}
@container piyolabs-rvas-hero-actions (min-width: 27.625rem) {
	.piyolabs-rvas-hero-actions {
		width: max-content;
		max-width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
	}
}
/* ==================================================================== */

/* ==================================================================== */
/* rVASページ 料金セクション直後のApp Store CTA(.piyolabs-rvas-pricing-  */
/* cta)。中身は[piyolabs_app_store_button]ショートコード1つのみで、      */
/* 元々はブロックのinline styleに直接 text-align:center を書いて中央     */
/* 寄せしていた。しかしcore/groupブロックはtext-align系の属性を持たず、   */
/* このinline styleはGutenbergエディタの再シリアライズ結果と一致しない   */
/* ため「invalid block」警告の原因になっていた。                        */
/* 見た目(中央寄せ)は変えず、同じCSSプロパティをこのクラス名を起点に     */
/* した外部スタイルとして再現することで、ブロックのマークアップからは    */
/* inline styleを取り除きGutenberg上でvalidにする。                     */
/* #piyolabs-main.piyolabs-rvas-page でスコープし、他ページの同名クラス  */
/* (存在しない想定だが)へ意図せず波及しないようにする(このファイル内の  */
/* 他のrVAS専用ルールと同じ慣習)。                                      */
#piyolabs-main.piyolabs-rvas-page .piyolabs-rvas-pricing-cta {
	text-align: center;
}
/* ==================================================================== */

/* ==================================================================== */
/* rVAS Hero CTAの可読性 (feat/rvas-hero-cta-legibility)                  */
/*                                                                      */
/* 1) 英語ラベルの折り返し防止                                           */
/*    英語ページのラベル("Get it on the App Store" / "Pricing & Trial")  */
/*    は日本語より長く、画面幅によってはボタン内で2行になっていた。       */
/*    .wp-block-button__link は素の<a>(App Store)にもpending時の<span>   */
/*    にも、料金ボタンの<a>にも付くため、ここに white-space: nowrap を    */
/*    掛けることで3者すべてを1行に保てる。日本語ラベルは元から1行に      */
/*    収まっており、この指定による見た目の変化はない。                    */
/*    固定幅は使わない(幅は引き続き上のgridが「広い方」に追随する)。     */
/*                                                                      */
/* 2) 料金/Pricingボタンの視認性                                         */
/*    Heroの背景は surface(#eef2f6)だが、outlineボタンの枠線は既定で     */
/*    border(#e3e8ec)であり、両者のコントラスト比は約1.10:1しかない。    */
/*    これは非テキストUI要素に必要とされる3:1を大きく下回り、枠線が       */
/*    ほとんど見えない状態だった(視認性の指摘はこれが原因)。            */
/*    枠線をこのボタンの文字色と同じ brand(#33597a)に揃えると、surface   */
/*    に対して約6.55:1となり十分に識別できる。塗りは transparent のまま   */
/*    なので「アウトラインボタン」という性質と、塗りのApp Store CTAとの   */
/*    主従関係も維持される(派手なボタンにはしない)。                    */
/*    文字色は既に brand で surface に対し約6.55:1あり基準を満たすため、  */
/*    色は変えず、枠線のみを是正する。                                   */
/*                                                                      */
/*    hoverは既定(背景muted+枠線brand)のままだと、枠線が変化しない状態  */
/*    になるため、より濃い primary へ変えて状態変化が分かるようにする。   */
/*    キーボード操作向けに focus-visible も同じ考え方で明示する。         */
/*                                                                      */
/*    いずれも .piyolabs-rvas-hero-actions 配下限定で、サイト共通の        */
/*    .wp-block-button / is-style-outline のルールには手を入れない。      */
.piyolabs-rvas-hero-actions .wp-block-button__link {
	white-space: nowrap;
}
.piyolabs-rvas-hero-actions .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--brand);
}
.piyolabs-rvas-hero-actions .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
.piyolabs-rvas-hero-actions .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}
/* ==================================================================== */