/*
 * 派遣でセラピ 独自配色システム「パターンA」(標準変更、実装日: 2026-08-31)。
 * ラズベリー(深いローズ)を主アクセント、ブラック/チャコールを副アクセント、
 * 白/ごく淡いウォームホワイトを基調とし、上質感・華やかさ・モダンさで
 * 20代女性ユーザーへの訴求力を高めることを目的とする(紫は主色として使わない、
 * 方針変更)。プレミアム表示専用の控えめなシャンパンゴールドを装飾アクセントと
 * して限定使用する。本文・重要なテキストは彩度の高い色を多用せず、ダーク
 * チャコール(#221A1D、白地とのコントラスト比 実測15超)を用いて可読性を
 * 最優先する。ページ全体が単色にならないよう、白地・淡色サーフェスを基調に、
 * ラズベリー/ゴールドはボタン・バッジ・枠線・強調等のアクセントとして
 * 限定的に使用する(過度なグラデーション・低コントラストは避ける)。
 *
 * :root の2変数(base/contrast)は、テーマ(Twenty Twenty-Five)がヘッダー・
 * フッター・ナビゲーション(スマホのハンバーガーメニュー展開時含む)・既定の
 * 本文色として参照している値そのものを差し替える。テーマ本体のCSS・JS(開閉
 * 挙動等)には一切触れず、色の見た目のみを変更する(Site Editor側は無変更)。
 *
 * 変数名は旧パターン(--hdt-link/--hdt-border/--hdt-surface-tint等、色名を
 * 含まない役割ベースの名前)からの移行コストを抑えるため可能な限り維持する
 * 方針だが、値の意味と乖離し将来の誤解を招く色名そのものの変数(旧
 * --hdt-violet→--hdt-raspberry、旧--hdt-blue→--hdt-rose-soft)のみ、
 * この機会に実体に合わせて改名した(未使用だった旧--hdt-ice/
 * --hdt-ice-bright/--hdt-whiteは削除)。
 */
:root {
	--wp--preset--color--base: #FFFFFF;
	--wp--preset--color--contrast: #221A1D;

	--hdt-raspberry: #B0195A;
	--hdt-raspberry-deep: #8A1246;
	--hdt-rose-soft: #C97A98;
	--hdt-charcoal: #221A1D;
	--hdt-gold: #B08D57;
	--hdt-silver: #E8E2DE;

	/* 2026-09-10追加(承認済み・ホームページ見た目調整): ヘッダー/ヒーロー/
	   中間セクション/フッターの装飾(バラ・金の煌めき)専用の追加変数。
	   既存の--hdt-raspberry系(ボタン・リンク等の機能色、本タスクでは無変更)
	   とは別に、より「深い赤(クリムゾン/バーガンディ)」に寄せた装飾専用の
	   色を新設する(ピンク系の既存装飾のみを対象範囲内で差し替えるためで、
	   既存の機能色・他ページの見た目には一切影響しない)。 */
	--hdt-rose-red: #9E1B32;
	--hdt-rose-red-deep: #4A0714;
	--hdt-rose-red-bright: #C4293F;
	--hdt-gold-bright: #E7C77A;
	--hdt-gold-soft: #B9924C;

	--hdt-text: #221A1D;
	--hdt-text-soft: #6B6265;
	--hdt-link: #B0195A;

	--hdt-border: #E8E1DC;
	--hdt-surface: #FFFFFF;
	--hdt-surface-tint: #F7F2EE;

	--hdt-cta-gradient: linear-gradient(135deg, #B0195A 0%, #8A1246 100%);
	--hdt-badge-bg: rgba(176, 25, 90, .10);
	--hdt-focus-ring: rgba(176, 25, 90, .45);
	--hdt-shadow-color: rgba(34, 26, 29, .14);

	--hdt-error: #B3261E;
	--hdt-error-bg: #FDF0F5;
	--hdt-success: #3FA774;
	--hdt-success-bg: #EEFAF3;
}

/* サイトタイトル(ヘッダーのブランドロックアップ、2026-08-31改訂)。
   includes/class-hdt-branding.phpのrender_site_title_lockup()が、core/
   site-titleブロック(テーマ Twenty Twenty-Fiveのheaderパターンがlevel:0で
   使用)の描画結果を、ロゴマーク(.hdt-brand-mark)+補助ラベル
   (.hdt-brand-label:「単発メンズエステ求人」)+ブランド名
   (.hdt-brand-name:「派遣セラピ」)の3点ロックアップへ差し替えている
   (テーマ本体・Site Editor設定・<title>タグ等が参照する実際のサイト名
   (blogname)には触れない、見た目のみの変更)。
   ラベル+ブランド名の2段組みにしたことで、旧来の「サイト名全体を1行の
   大きな文字で表示する」方式(全角スペース込み16文字を1行に収める必要が
   あった)よりも実効的な表示幅が狭くなり、「派遣セラピ」単体を再び大きく
   (旧・約2倍サイズ相当)表示できるようになった。
   .wp-block-site-title自体のmax-width/flex-shrink:0は、ナビゲーション側の
   リンク数が多い場合にflexboxがブランド側を不必要に圧縮してしまうのを防ぐ
   既存の設計(本タスクでは対象外)をそのまま踏襲する。
   2026-08-31改訂(ロゴマーク約3倍化): ロゴマーク(.hdt-brand-mark)をより
   力強い・存在感のあるブランドマークにする要件を受け、表示サイズを
   34px→100px(スマホ28px→82px)へ約3倍に拡大した。SVG自体(rose_mark_svg())
   のviewBoxは変更していないため、拡大は完全に相似形(比率そのまま)で行われる。
   ロゴマークが大きくなった分、テキストとの間隔(gap)も10px→16pxへ広げ、
   窮屈に見えないようにした。テキスト側の縦積みレイアウト(補助ラベル小+
   ブランド名大)・align-items:centerによる縦方向の中央揃えは無変更のため、
   ロゴマークが大きくなってもテキストの可読性・行間は変わらず、ロゴを軸に
   ヘッダー全体がやや背高になる(意図した挙動、ナビゲーション側は
   align-items:centerで追従するため崩れない)。
   2026-08-31再改訂(サイズ是正): 上記の約3倍化は強すぎるとの指摘を受け、
   100px→80px(スマホ82px→66px、いずれも約80%)へ縮小した。テキストが
   主役であり続けるよう、ロゴは「目を引くが主張しすぎない」バランスへ
   調整する方針。gap・テキストサイズ・レイアウト構造自体は変更しない。 */
.wp-block-site-title {
	min-width: 0;
	max-width: 66vw;
	flex-shrink: 0;
}
.wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	max-width: 100%;
	text-decoration: none;
}
/* 2026-09-13改訂(承認済み・淡いピンクのロゴマークを全ページで非表示化):
   assets/css/home.cssには、トップページ限定で同じ淡いピンクの実写バラ
   (hdt-rose-mark.png)を非表示にし、既存の承認済み濃い赤/クリムゾンの
   装飾クロップ(hdt-decor-header-left.png)へ差し替える処理が既にあるが、
   home.css自体がトップページでしか読み込まれないため、他の全ページ
   (求人検索・求人詳細・店舗詳細・利用規約等)のヘッダー・フッターでは
   従来どおり淡いピンクのバラのままだった。ここで全ページ共通のpublic.css
   自体に、home.cssと全く同じ処理(画像を非表示にし、同じ承認済みクロップを
   背景として表示)を追加する。home.css側は無変更のまま維持する(トップ
   ページでは同じ見た目の処理が二重に適用されるだけで、結果は従来と同一)。 */
.hdt-brand-mark {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	display: inline-flex;
	background-image: url("../images/hdt-decor-header-left.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
/* 2026-09-01追加: 運営提供のバラ画像(縦長・約325x438、透過PNG)は正方形の
   .hdt-brand-mark枠に対して縦横比が異なるため、object-fit:containで
   トリミング・歪みなしに枠内へ収める(SVGフォールバック時はこれまでどおり
   枠いっぱいに表示する)。 */
.hdt-brand-mark svg { display: block; width: 100%; height: 100%; }
.hdt-brand-mark img { display: none; width: 100%; height: 100%; object-fit: contain; }
.hdt-brand-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	line-height: 1.15;
}
.hdt-brand-label {
	font-size: clamp(.62rem, .3rem + .6vw, .74rem);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--hdt-text-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hdt-brand-name {
	font-size: clamp(1.4rem, .5rem + 3.6vw, 2rem);
	font-weight: 800;
	color: var(--hdt-charcoal);
	white-space: nowrap;
}
@media (max-width: 600px) {
	.wp-block-site-title { max-width: 84vw; }
	.wp-block-site-title a { gap: 12px; }
	.hdt-brand-mark { width: 66px; height: 66px; }
	.hdt-brand-label { font-size: .64rem; }
	.hdt-brand-name { font-size: 1.55rem; }
}
/* 2026-09-19追加(モバイルヘッダー薄型化): スマホ表示のヘッダーの縦の厚みを
   縮小する。ヘッダー自体の背景・バラ装飾(下のheader.wp-block-template-part
   ::beforeブロック、この直下の@media(max-width:600px)で対応)・ロゴ/文言・
   ハンバーガーメニューの構成要素はそのまま維持し、(1)テーマ側パターン
   (twentytwentyfive/patterns/header.php)がインラインstyleで付与する内側
   コンテナのpadding-top/bottom(spacing preset 30=20px)をスマホ限定で圧縮、
   (2)ロゴマーク・文言・ハンバーガーアイコンのサイズをその圧縮後の厚みに
   自然に収まる比率へ追加調整する。デスクトップ(600px超)側の値は一切
   変更していない。テーマ側ファイル自体には触れず、既存の踏襲パターン
   (インラインstyleより詳細度で上回るための!important)を使う。 */
@media (max-width: 600px) {
	header.wp-block-template-part .wp-block-group.alignwide {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
	header.wp-block-template-part .hdt-brand-mark { width: 46px; height: 46px; }
	header.wp-block-template-part .hdt-brand-label { font-size: .56rem; }
	header.wp-block-template-part .hdt-brand-name { font-size: 1.22rem; }
	header.wp-block-template-part .wp-block-site-title a { gap: 8px; }
	header.wp-block-template-part .hdt-nav-toggle-label {
		width: 32px;
		height: 32px;
		gap: 4px;
	}
	header.wp-block-template-part .hdt-nav-toggle-label span { width: 20px; }
}

/* ヘッダー: 整理後のプライマリナビゲーション(2026-09-01追加、VISUAL
   STRUCTURE CLEANUP)。includes/class-hdt-branding.phpのcurate_header_
   navigation()が、core/navigationブロック(テーマTwenty Twenty-Fiveの
   headerパターン)の描画結果を、厳選した4項目の固定リンクへ差し替えている。
   WordPressコア標準のオーバーレイ式ハンバーガーメニュー(JS依存)には頼らず、
   チェックボックス+labelによるCSSのみの開閉に切り替えた(このブロックの
   中身自体を丸ごと置き換えているため、コア側のJSが前提とするマークアップ
   ではなくなり、コアのJSに依存すると動作しない)。 */
/* 2026-09-01追加(運営承認済み配色変更): ヘッダー上部の背景をブラックに変更。
   header.wp-block-template-part はWordPressコアがheaderエリアのテンプレート
   パートに自動付与する<header>タグ(実機DOM確認済み、確実に効くセレクタ)。
   背景をブラックにしたことで、従来チャコール(暗色地でも比較的濃い)だった
   ナビ文言・ブランド文言がそのままでは読めなくなるため、可読性確保のため
   最小限、ヘッダー内に限定してナビ文言とブランド文言の文字色を白系に上書き
   する(指示にある「可読性のために必要な場合のみ、最小限」に該当する調整)。
   ロゴ画像(バラの実写真、透過PNG)自体の色は変更しない。 */
header.wp-block-template-part{background:#000}
header.wp-block-template-part .hdt-brand-label{color:rgba(255,255,255,.72)}
header.wp-block-template-part .hdt-brand-name{color:#fff}
header.wp-block-template-part .hdt-nav-toggle-label span{background:#fff}
/* 1280px未満ではナビ項目がプルダウン式の白背景カード(.hdt-primary-nav-list、
   下記の@media(max-width:1279px)ルールを参照)として表示されるため、
   ここでは黒地のヘッダーバーに直接文言が乗るデスクトップ幅に限定して
   白文字にする(モバイルの白背景カードで白文字にすると読めなくなるため)。
   2026-09-01改訂: 元は783px境界だったが、7項目(求人を探す・掲載料金・
   店舗掲載申込み・利用規約・プライバシーポリシー・お問い合わせ・通報する)の
   ナビ実測幅が約1106pxあり、782px~1120px前後の幅ではナビ行がヘッダー幅を
   超えてページ全体が横スクロールする不具合が確認されたため、1150pxへ
   引き上げた(実測でoverflowが解消する最小のクリーンな境界)。
   2026-09-02再改訂: 「トップページ」をデスクトップの横並びナビにも表示する
   方針に戻したことで項目数が7→8件に増え、ナビ実測幅が約1227pxまで拡大した。
   1150px境界のままでは1150px~1259px前後で再び同じ横スクロール不具合が
   発生することを実測で確認したため、1280pxへ再度引き上げた(実測でoverflowが
   解消する最小のクリーンな境界)。 */
@media(min-width:1280px){
	header.wp-block-template-part .hdt-primary-nav-list a{color:#fff}
	/* 2026-09-20追加(承認済み・ユーザー/店舗向け利用方法ページ導線の新設):
	   ハンバーガーメニューに新設した2つのグループ見出し・新規リンク5件
	   (.hdt-nav-item-mobile-only、includes/class-hdt-branding.phpの
	   curate_header_navigation()を参照)は、デスクトップの横1行ナビには
	   含めず、モバイルのドロップダウン展開時のみ表示する。これにより、
	   デスクトップの表示項目・順序・文言・宛先・実測幅は従来と完全に
	   同一のまま維持される(この1280px以上のブロック以外、デスクトップ側の
	   既存ルールには一切触れていない)。 */
	.hdt-nav-item-mobile-only{display:none}
	/* 2026-09-29追加(本番不具合修正・PC表示の横はみ出し): v1.29.20で運営情報・
	   特定商取引法に基づく表記の2項目を追加した結果、デスクトップの横並び
	   ナビ(11項目、flex-wrap:nowrap+各リンクwhite-space:nowrap)の実測幅が
	   約1040px→約1341pxへ拡大した。ナビに使える幅はヘッダー内側コンテナ
	   (最大1340px)からロゴロックアップ(約254px)を除いた約907px(1280px幅)~
	   約1067px(1440px幅以上)しかなく、縮めない1行のナビがコンテナを右へ
	   突き抜け、約1760px未満の全デスクトップ幅でページ全体が横スクロールして
	   いた。文字サイズ・項目・順序・宛先は変えず、デスクトップ幅に限り
	   右揃えのまま2行へ折り返せるようにする(2行分の高さはロゴマーク80pxの
	   内側に収まり、ヘッダー自体の高さは変わらない。実測確認済み)。 */
	header.wp-block-template-part .hdt-primary-nav-list{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
}
.hdt-primary-nav{position:relative;display:flex;align-items:center}
.hdt-nav-toggle-input{position:absolute;opacity:0;pointer-events:none}
.hdt-nav-toggle-label{display:none}
.hdt-primary-nav-list{display:flex;flex-wrap:nowrap;align-items:center;gap:30px;margin:0;padding:0;list-style:none}
.hdt-primary-nav-list a{color:var(--hdt-text);font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap}
.hdt-primary-nav-list a:hover{color:var(--hdt-link)}
.hdt-primary-nav-list a:focus-visible{outline:3px solid var(--hdt-focus-ring);outline-offset:3px}
@media(max-width:1279px){
	/* 2026-09-01改訂: 782pxから1149pxへ引き上げ、2026-09-02再改訂で1149pxから
	   1279pxへ再度引き上げ(理由は上記コメントを参照)。ハンバーガー自体の
	   実装・挙動・項目数・順序は無変更のまま、発動する幅の境界のみを変更した。 */
	.hdt-nav-toggle-label{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;width:40px;height:40px;cursor:pointer}
	.hdt-nav-toggle-label span{display:block;width:24px;height:2px;background:var(--hdt-charcoal);transition:opacity .15s ease}
	.hdt-primary-nav-list{
		display:none;
		position:absolute;top:calc(100% + 14px);right:0;
		flex-direction:column;align-items:flex-start;gap:0;
		min-width:220px;padding:10px 22px;
		background:#fff;border:1px solid var(--hdt-border);border-radius:14px;
		box-shadow:0 16px 32px rgba(34,26,29,.16);
		z-index:60;
	}
	.hdt-primary-nav-item{width:100%}
	.hdt-primary-nav-list a{display:block;padding:13px 0;border-bottom:1px solid var(--hdt-border)}
	.hdt-primary-nav-item:last-child a{border-bottom:0}
	.hdt-nav-toggle-input:checked ~ .hdt-primary-nav-list{display:flex}
	.hdt-nav-toggle-input:focus-visible ~ .hdt-nav-toggle-label{outline:3px solid var(--hdt-focus-ring);outline-offset:2px}
	/* 2026-09-20追加(承認済み): グループ見出し(非クリック可能、<a>を持たない
	   <li>)。既存のナビ項目の文字サイズ・余白感を踏襲しつつ、リンクとの
	   区別のため一回り小さく・太字・控えめな色にし、上に区切り線を入れる
	   (セクションの切れ目を示す、新規デザインの追加ではなく既存の
	   .hdt-primary-nav-list a{border-bottom}の区切り線パターンを踏襲)。 */
	.hdt-primary-nav-section-label{
		width:100%;
		padding:14px 0 6px;
		font-size:.78rem;
		font-weight:800;
		letter-spacing:.03em;
		/* 2026-09-30変更(承認済み): 文字色のみ#20C997(エメラルドグリーン)へ。
		   フォントサイズ・太さ・余白・区切り線・その他は無変更。 */
		color:#20C997;
		border-top:1px solid var(--hdt-border);
	}
}
.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* フッター: 整理後のプレミアムフッター(2026-09-01追加、VISUAL STRUCTURE
   CLEANUP)。includes/class-hdt-branding.phpのcurate_footer_template_part()
   が、テーマ同梱のダミーリンク(footer.phpパターン、Blog/About/FAQs等の
   url:"#")を、ブランドロックアップ+実在する固定ページへの厳選リンクへ
   丸ごと差し替えている。 */
/* 2026-09-01追加(運営承認済み配色変更): フッター(下部の「サイト名表示」
   セクション)の背景をブラックに変更。従来の淡色地を前提にした文言色
   (--hdt-text-soft等、暗めのグレー系)のままではブラック地で読めなくなる
   ため、可読性確保のため最小限、フッター内に限定してリンク文言・ブランド
   文言を白系に、区切り線(border-top)も暗背景向けの低めの白透明度へ
   上書きする(指示にある「可読性のために必要な場合のみ、最小限」に該当)。
   ロゴ画像自体・フッターの構造(要素の配置・リンクの並び)は変更しない。 */
.hdt-site-footer{background:#000;border-top:1px solid rgba(255,255,255,.14);padding:48px 24px 0;margin-top:40px}
.hdt-site-footer-inner{box-sizing:border-box;max-width:1140px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.hdt-site-footer-brand{display:inline-flex;align-items:center;gap:14px}
.hdt-site-footer-brand .hdt-brand-mark{width:52px;height:52px}
.hdt-site-footer-brand .hdt-brand-label{color:rgba(255,255,255,.72)}
.hdt-site-footer-brand .hdt-brand-name{color:#fff}
.hdt-site-footer-links{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:0;list-style:none}
.hdt-site-footer-links a{color:rgba(255,255,255,.78);font-size:.9rem;font-weight:600;text-decoration:none}
.hdt-site-footer-links a:hover{color:#fff}
.hdt-site-footer-bottom{box-sizing:border-box;max-width:1140px;margin:28px auto 0;padding:20px 24px;border-top:1px solid rgba(255,255,255,.14)}
.hdt-site-footer-bottom p{margin:0;font-size:.8rem;color:rgba(255,255,255,.6)}
@media(max-width:700px){
	.hdt-site-footer{padding:36px 18px 0}
	.hdt-site-footer-inner{flex-direction:column;align-items:flex-start;gap:20px}
	.hdt-site-footer-bottom{padding:16px 18px}
}
/* 2026-09-19追加(モバイルフッター薄型化): スマホ表示のフッターの縦の厚みを
   大幅に縮小する。背景(黒)・バラ装飾(下のmax-width:600pxブロックで別途
   縮小)・ブランド表記・フッターリンク(利用規約/プライバシーポリシー/
   お問い合わせ/通報する/相互リンク素材、1件も削除しない)・著作権表示の
   構成要素はそのまま維持し、余白(padding/margin/gap)とロゴ・文字サイズの
   みを圧縮する。「トップへ」ボタン(.hdt-back-to-top、assets/css/
   back-to-top.css)はposition:fixedでフッターの構造とは独立しているため、
   このブロックの対象外(フッターが薄くなっても表示位置・挙動は無変更)。
   700px超(デスクトップ)側の値は一切変更していない。 */
@media(max-width:700px){
	.hdt-site-footer{padding:14px 16px 0;margin-top:18px}
	.hdt-site-footer-inner{gap:10px}
	.hdt-site-footer-brand{gap:8px}
	.hdt-site-footer-brand .hdt-brand-mark{width:32px;height:32px}
	.hdt-site-footer-brand .hdt-brand-label{font-size:.5rem}
	.hdt-site-footer-brand .hdt-brand-name{font-size:1rem}
	.hdt-site-footer-links{gap:6px 14px}
	.hdt-site-footer-links a{font-size:.8rem}
	.hdt-site-footer-bottom{margin:10px auto 0;padding:8px 16px 10px}
	.hdt-site-footer-bottom p{font-size:.72rem}
}

/* ヘッダー・フッターの装飾用花びら(2026-09-01追加、承認済み)。既存のバラの
   ロゴ(HDT_Branding::rose_mark_svg())と同じ花びらの輪郭を再利用したインライン
   SVG(data URI)のみで構成し、新規のアセットファイル・外部ホットリンクは
   一切追加しない。完全に装飾のみのため、::beforeをposition:absolute+
   z-index:-1で「黒背景の上・通常コンテンツの下」に固定し、実在するロゴ・
   ブランド文言・ナビ項目・フッターリンク・著作権表示のいずれとも重ならない
   よう、コンテンツ行の外側(左右の外側の余白帯)にのみ配置する(実測: 1440px
   幅でロゴ~ナビ間、ナビ~右端間に十分な余白があることを確認済み)。
   pointer-events:noneによりクリック・タブ移動に一切干渉しない。アニメーション
   は付けない。 */
/* 2026-09-10追加(承認済み・ローカルブラウザ確認で発見・修正済みの不具合):
   position:relativeのみ(z-index未指定)ではこの要素自身の内側に新しい
   スタック文脈が生成されないため、下の::before(z-index:-1)による装飾が、
   この要素自身の不透明な背景(background:#000等)の「後ろ」ではなく実際には
   ページ側の共有スタック文脈まで抜けてしまい、この要素自身の不透明な背景に
   よって完全に覆い隠され、装飾が一切見えなくなる不具合を実機確認で発見した
   (この構造自体は今回の変更前から存在しており、旧来のラズベリー単色の
   花びら装飾も同じ理由でおそらく本番で見えていなかったと推測される)。
   z-index:0を明示し、この要素自身の内側に確実にスタック文脈を生成する
   ことで解決する(視覚的な重なり順序以外への影響は無い)。 */
/* 2026-09-13修正: header自体のz-indexを0のままにしていたため、次に続く
   ヒーローセクション(.hdt-main-visual、position:relativeだがz-index未指定
   =auto)とDOM順で同列に扱われ、後続のヒーローがheader全体(内部のモバイル
   ハンバーガーメニュー、z-index:60を含む)より上に重なって描画され、開いた
   メニューがヒーロー画像の下に隠れてしまう不具合が発生していた(header内部の
   z-index:60はheader自身が作るスタック文脈の中でしか意味を持たず、それだけ
   では後続の兄弟要素より上へ出られない)。headerのみ、ページ内の他の要素より
   十分高いz-index:100を明示することで解決する(footer側はこの問題の対象では
   ないため、z-index:0のまま無変更)。 */
header.wp-block-template-part{position:relative;z-index:100}
.hdt-site-footer{position:relative;z-index:0}
header.wp-block-template-part::before,
.hdt-site-footer::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	pointer-events:none;
	background-repeat:no-repeat;
}
header.wp-block-template-part::before{
	/* 2026-09-10全面改訂(承認済み・approved target画像からの実写クロップに
	   差し替え): 従来のインラインSVG(手描きの花びら/バラ房/スパークル)を
	   全面的に廃止し、運営から提供された承認済みターゲット画像
	   (assets/images/hdt-section-top.png、テキスト・ナビ・ボタン等の機能
	   要素を含む完成モックアップ)から、装飾のみの領域(バラ・花びら・金の
	   煌めき・金の曲線)をロスレスに切り出した実写クロップ資産
	   (hdt-decor-header-left.png/-right.png、scratchpad/make_decor_assets.py
	   で生成、切り出し矩形と縁のアルファフェザーのみを適用し、バラ自体の
	   色・形は一切再描画・再着色していない)を使用する。配置の考え方
	   (ロゴ左側・ナビ右側の外側余白帯にのみ、position:absolute+z-index:-1+
	   pointer-events:noneで装飾のみ)は変更していない。 */
	background-image:
		url("../images/hdt-decor-header-left.png"),
		url("../images/hdt-decor-header-right.png");
	background-position:
		left -6px top -6px,
		right -4px top -6px;
	background-size:
		168px 150px,
		100px 159px;
}
.hdt-site-footer::before{
	background-image:
		url("../images/hdt-decor-footer-left.png"),
		url("../images/hdt-decor-footer-right.png");
	background-position:
		left -8px top -8px,
		right -6px top -6px;
	background-size:
		230px 213px,
		200px 139px;
}
@media(max-width:600px){
	/* モバイルはヘッダー・フッターとも横幅の余白が少ないため、装飾クロップを
	   縮小して端に寄せる(構図・アセット自体は無変更、表示サイズ・位置のみ
	   縮小)。
	   2026-09-19改訂: ヘッダー・フッターそれぞれの縦の厚みを薄型化した
	   ことに合わせ、装飾クロップも薄くなった帯に自然に収まる比率へさらに
	   縮小した(ヘッダーはロゴマーク縮小比率(46/66≒0.7)、フッターは
	   薄型化後の高さに合わせた比率で調整。画像アセット自体・配置の考え方
	   (左上/右上を起点、外側の余白帯にのみ配置)は無変更)。 */
	header.wp-block-template-part::before{
		background-size: 68px 61px, 41px 65px;
		background-position: left -3px top -3px, right -2px top -3px;
	}
	.hdt-site-footer::before{
		background-size: 100px 93px, 88px 61px;
		background-position: left -3px top -3px, right -2px top -2px;
	}
}

.hdt-form {
	max-width: 980px;
	margin: 32px auto;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--hdt-border);
	border-radius: 16px;
	box-shadow: 0 10px 32px var(--hdt-shadow-color);
}
.hdt-form h2 { margin-top: 0; color: var(--hdt-text); }
/* 店舗専用投稿ページ「公開中の求人」一覧(2026-09-12修正): タイトルの長さに
   関わらず「編集する」ボタンの位置を右側で揃えるための最小限の修正。
   タイトルを左・ボタンを右に配置するflex行にするのみで、ボタン自体の
   見た目(サイズ・色・文言)・リスト自体の他の見た目は変更しない。 */
.hdt-job-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hdt-job-list-title { flex: 1 1 auto; min-width: 0; }
/* 表示用求人ID(2026-09-12追加): タイトルの下に控えめに表示する(タイトル自体の見た目より目立たせない)。 */
.hdt-job-list-id { font-size: .85em; color: var(--hdt-text-soft); font-weight: 400; }
.hdt-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.hdt-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.hdt-field-full { grid-column: 1 / -1; }
.hdt-field span, .hdt-fieldset legend { font-weight: 700; color: var(--hdt-text); }
/* 2026-09-17修正: チェックボックス・ラジオは、通常のテキスト系input向けの
   width:100%/padding指定の対象から除外する(以前はこの指定がinput
   type="checkbox"にも適用され、画像審査同意チェックボックス
   (.hdt-image-moderation-disclosure、.hdt-fieldなしの構造とは異なり
   .hdt-field配下にあるため影響を受けていた)がコンテナ全幅の巨大な
   ボックスになり、ラベル文言の上に不自然に分離・中央寄せされて見える
   不具合の根本原因だった)。 */
.hdt-field input:not([type="checkbox"]):not([type="radio"]),
.hdt-field select,
.hdt-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 13px;
	border: 1px solid var(--hdt-border);
	border-radius: 9px;
	background: #fff;
	color: var(--hdt-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.hdt-field input:not([type="checkbox"]):not([type="radio"]):hover,
.hdt-field select:hover,
.hdt-field textarea:hover {
	border-color: var(--hdt-rose-soft);
}
.hdt-field input:not([type="checkbox"]):not([type="radio"]):focus,
.hdt-field select:focus,
.hdt-field textarea:focus {
	outline: 3px solid var(--hdt-focus-ring);
	outline-offset: 1px;
	border-color: var(--hdt-raspberry);
}
.hdt-field input:not([type="checkbox"]):not([type="radio"]):disabled,
.hdt-field select:disabled,
.hdt-field textarea:disabled {
	background: var(--hdt-surface-tint);
	color: var(--hdt-text-soft);
	cursor: not-allowed;
}
.hdt-fieldset {
	margin: 24px 0;
	padding: 20px;
	border: 1px solid var(--hdt-border);
	border-radius: 12px;
}
/* 2026-09-17改訂: チェックボックス+文言を、常に「チェックボックスがラベルの
   先頭に自然に並ぶ1行」として描画する(labelごと1つのクリック単位のまま)。
   幅が足りないモバイル表示では、文言側だけが自然に折り返し、チェックボックスが
   先頭からずれない(align-items:flex-startにより、複数行になっても
   チェックボックスは1行目の高さに留まる)。 */
.hdt-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0;
}
.hdt-check input[type="checkbox"],
.hdt-check input[type="radio"] {
	flex: 0 0 auto;
	margin: 3px 0 0;
}

/* 追加投稿枠購入(Phase 5B、2026-08-27改訂): パッケージ選択をプルダウンではなく
   ラジオボタンの並びとし、各パッケージの投稿数・金額を常時視認できるようにする
   (プルダウン+折りたたみでは本番確認時に見落とされたため)。 */
.hdt-quota-purchase-packages { margin: 16px 0; }
.hdt-quota-purchase-package {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 16px; margin: 8px 0 !important;
	border: 1px solid var(--hdt-border); border-radius: 10px;
	background: var(--hdt-surface-tint); cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.hdt-quota-purchase-package:hover { border-color: var(--hdt-raspberry); }
.hdt-quota-purchase-package:has(input:checked) { border-color: var(--hdt-raspberry); background: var(--hdt-badge-bg); }
.hdt-quota-purchase-package input[type="radio"] { flex: 0 0 auto; }
.hdt-quota-purchase-package-label { font-weight: 700; color: var(--hdt-text); }
.hdt-quota-purchase-package-price { margin-left: auto; font-weight: 800; color: var(--hdt-link); text-align: right; }
.hdt-quota-purchase-package-price small { font-weight: 400; color: var(--hdt-text-soft); margin-left: 2px; }
.hdt-quota-purchase-package-price-excl { display: block; font-weight: 400; color: var(--hdt-text-soft); font-size: .82rem; }
.hdt-quota-purchase-history-heading { margin: 24px 0 8px; font-size: 1.05rem; color: var(--hdt-text); }
/* 2026-08-27改訂: 誤って求人検索フォーム用のCSS Grid(.hdt-job-search-grid)を
   このテーブルに流用していたため、display:gridが<table>のtr/td描画を壊し
   領収書ダウンロードリンクがクリックできない不具合が発生していた。通常の
   table描画に戻した上で、列幅を明示していないと「領収書」列が極端に狭く
   割り当てられ、日本語のリンク文言が1文字幅で縦に折り返されてクリックできなく
   なる二次的な問題があったため、white-space:nowrapで折り返しを禁止し、
   幅の広い表は既存の他コンポーネントと同じくoverflow-x:autoの専用コンテナで
   横スクロールさせる方針とした。 */
.hdt-quota-purchase-history-scroll { overflow-x: auto; }
.hdt-quota-purchase-history-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.hdt-quota-purchase-history-table th, .hdt-quota-purchase-history-table td {
	padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--hdt-border); font-size: .92rem;
}
.hdt-quota-purchase-history-table th { color: var(--hdt-text-soft); font-weight: 700; }
.hdt-quota-purchase-history-table a { color: var(--hdt-link); font-weight: 700; }

/* 主要CTAボタン(2026-08-31改訂: パターンA配色)。ラズベリー系の控えめな
   単色系グラデーション(同系色2色のみ、過度な多色グラデーションは避ける)を
   背景とする。hover/focus/active/disabledの各状態を明確にする。 */
.hdt-button {
	display: inline-block;
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--hdt-cta-gradient);
	color: #fff;
	font-weight: 700;
	text-shadow: 0 1px 4px rgba(34, 26, 29, .35);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(176, 25, 90, .18);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hdt-button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(176, 25, 90, .26); filter: brightness(1.03); }
.hdt-button:focus-visible { outline: 3px solid var(--hdt-focus-ring); outline-offset: 2px; }
.hdt-button:active { transform: translateY(0); filter: brightness(.97); box-shadow: 0 4px 12px var(--hdt-shadow-color); }
.hdt-button:disabled, .hdt-button[aria-disabled="true"] {
	background: var(--hdt-silver);
	color: var(--hdt-text-soft);
	text-shadow: none;
	box-shadow: none;
	cursor: not-allowed;
}

/* 2026-09-18追加: 店舗独自画像の削除ボタン。通常の.hdt-button(グラデーション、
   確定的な操作向け)とは視覚的に区別し、取り消せない破壊的操作であることが
   一目でわかるようにする。スロットのカード内で、ファイル選択欄のすぐ下に
   小さめに配置し、デスクトップ・モバイルいずれでも自然に折り返す。 */
.hdt-store-image-slot { display: flex; flex-direction: column; gap: 7px; }
.hdt-button-danger {
	padding: 8px 18px;
	font-size: .9em;
	background: #fff;
	color: var(--hdt-error);
	border: 1px solid var(--hdt-error);
	text-shadow: none;
	box-shadow: none;
	align-self: flex-start;
}
.hdt-button-danger:hover { background: var(--hdt-error); color: #fff; transform: none; box-shadow: none; }
.hdt-button-danger:active { transform: none; }

.hdt-required-note span, .hdt-fieldset legend span { color: var(--hdt-error); }
.hdt-message { max-width: 980px; margin: 20px auto; padding: 15px 18px; border-radius: 10px; }
.hdt-message-success { background: var(--hdt-success-bg); border: 1px solid var(--hdt-success); color: var(--hdt-text); }
.hdt-message-error { background: var(--hdt-error-bg); border: 1px solid var(--hdt-error); color: var(--hdt-text); }
.hdt-honeypot { position: absolute !important; left: -10000px !important; }
@media (max-width: 700px) {
	.hdt-form { padding: 20px 16px; }
	.hdt-grid { grid-template-columns: 1fr; }
}

.hdt-help{font-size:.92rem;color:var(--hdt-text-soft);}

/* 店舗横スライダー(ピックアップ店舗・新着店舗)。既存の[hdt_banner_slider]とは別の
   コンポーネントで、CSSのscroll-snapによりタッチ端末で標準のスワイプ操作に対応する。
   コンテナ幅([hdt_main_visual]と同じmax-width:1140px・中央寄せ)を揃え、見出し・
   カード列の左端がメインビジュアルと一致するようにする。カードは常に左端から並べ、
   件数に関わらず中央寄せにはしない(1件のみでもメインビジュアル左端基準で表示する)。
   PCのカード幅370pxは、1140px幅のコンテナに3枚(370×3+間隔16×2=1142px、ほぼ
   ぴったり収まる)を基本とした目安。矢印の表示・非表示はスクロール可否に応じて
   JS側(scroller_script())で
   動的に切り替える(スクロール不要な場合は両方非表示、スクロール端に達した側のみ
   非表示)。 */
.hdt-store-slider { box-sizing: border-box; width: 100%; max-width: 1140px; margin: 30px auto; padding: 0; }
.hdt-store-slider h2 {
	color: var(--hdt-text); margin: 0 0 14px; font-weight: 800;
	display: inline-flex; align-items: center; gap: 10px;
}
.hdt-store-slider h2::before {
	/* 2026-09-01改訂(承認済み): 円形ドットを、既存のバラのロゴ(rose_mark_svg())
	   と同じ花びらの輪郭1枚(単弁、バラ全体ではない)へ置き換え。[hdt_area_links]
	   の見出し(.hdt-area-links h2::before、下記)と完全に同じ花びらデザインを
	   共有する。見出しテキスト自体・フォントサイズ・太さ・間隔(gap)・
	   align-items:centerによる縦位置揃えは無変更のまま(見出しマーカーの
	   置き換えのみ)。新規アセットファイルは追加せず、インラインSVG(data URI)
	   のみで完結させる。 */
	content: "";
	display: inline-block;
	width: 15px; height: 17px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2046%27%3E%3Cpath%20fill%3D%27%23B0195A%27%20d%3D%27M20%2C22%20C12%2C17.5%2010.5%2C5%2020%2C3%20C29.5%2C5%2028%2C17.5%2020%2C22%20Z%27%20transform%3D%27rotate%2815%2020%2022%29%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.hdt-store-scroller-wrap { position: relative; }
.hdt-store-scroller {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 2px 2px 12px;
	scrollbar-width: thin;
}
.hdt-store-card {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 370px;
	scroll-snap-align: start;
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--hdt-border);
	border-radius: 16px;
	overflow: hidden;
	/* 共通変数--hdt-shadow-colorは他の要素(求人カード・料金カード等)でも使われて
	   いるため、意図しない波及を避けるためここではこのセレクタ専用の値を直接指定する。 */
	box-shadow: 0 6px 20px rgba(34, 26, 29, .12);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hdt-store-card:hover {
	transform: translateY(-2px);
	border-color: var(--hdt-raspberry);
	box-shadow: 0 12px 30px rgba(34, 26, 29, .18);
}
/* 画像が未設定/読み込み失敗した場合でも、崩れた画像アイコンや代替テキストが
   そのまま表示されて見た目を損なわないよう、淡いウォームベージュ系の
   グラデーションを背景に敷き、font-size:0で代替テキスト・アイコンの表示を
   縮小させる(実画像が正しく読み込まれた場合の見た目には影響しない。
   2026-08-31改訂: 旧ラベンダー→アイスブルーからパターンAの配色へ変更)。 */
.hdt-store-card-image {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
	background: linear-gradient(135deg, #F5ECE6, #EFDFD2);
	font-size: 0;
	color: transparent;
}
/* 2026-08-29追加: A-plan共通テンプレート画像が未設定のスロット用プレースホルダー。
   店舗カード(.hdt-store-card-image)向けに既に使っていた淡いグラデーションを
   そのまま流用した共通クラス。新しい画像素材・別系統のデザインを追加せず、
   この既存の配色をそのまま他の表示箇所(店舗詳細ギャラリー・求人ページの
   ギャラリー・店舗自己管理画面・管理画面の審査プレビュー)でも一貫して使う。
   実体はincludes/class-hdt-billing.phpのrender_display_image_html()が出力する、
   実データを持たない固定のインラインSVG(data:image/svg+xml)であり、新しい
   アップロード用アセットファイルは追加しない。 */
.hdt-image-placeholder {
	background: linear-gradient(135deg, #F5ECE6, #EFDFD2);
	object-fit: cover;
}
.hdt-store-card-name { display: block; padding: 10px 12px; font-weight: 700; color: var(--hdt-text); font-size: .94rem; }
.hdt-store-scroller-prev, .hdt-store-scroller-next {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px; border: 1px solid var(--hdt-border); border-radius: 50%;
	background: rgba(255, 255, 255, .92); color: var(--hdt-link); font-size: 26px; cursor: pointer;
	box-shadow: 0 4px 14px var(--hdt-shadow-color);
}
.hdt-store-scroller-prev { left: 6px; }
.hdt-store-scroller-next { right: 6px; }
@media (max-width: 700px) {
	/* スマホは画面幅の約75%を目安にカード幅を決め、次のカードが少し見える形にする。
	   画像は16:9を維持し、見出し・店舗名の文字サイズを落として縦に間延びしないようにする。
	   (2026-08-31改訂: [hdt_main_visual]は全幅化したため、このセクションとの
	   左端一致は対象外。.hdt-store-slider自体は他の中央寄せセクションと同じく
	   独自のpaddingを付けない設計のまま。) */
	.hdt-store-slider h2 { font-size: .95rem; margin: 0 0 10px; }
	.hdt-store-scroller { gap: 12px; padding: 2px 2px 10px; }
	.hdt-store-scroller-prev, .hdt-store-scroller-next { display: none; }
	.hdt-store-card { width: min(76vw, 280px); }
	.hdt-store-card-name { padding: 7px 10px; font-size: .78rem; }
}

/* 相互リンク素材ページ(2026-09-08新設、承認済み項目8)。既存のhdt-form/
   hdt-buttonの見た目を踏襲し、新しいCSS変数は追加していない。 */
.hdt-link-assets{max-width:640px;margin:0 auto}
.hdt-link-asset{margin:24px 0;padding:18px;border:1px solid var(--hdt-border);border-radius:14px;background:#fff}
.hdt-link-asset h3{margin:0 0 12px}
.hdt-link-banner{margin:0 0 14px;padding:12px;border:1px dashed var(--hdt-border);border-radius:10px;display:inline-block}
.hdt-link-asset-code{display:block;margin:10px 0}
.hdt-link-asset-code span{display:block;margin-bottom:6px;font-weight:700;color:var(--hdt-text)}
.hdt-link-asset-code textarea{width:100%;box-sizing:border-box;font-family:monospace;font-size:.82rem;padding:8px;border:1px solid var(--hdt-border);border-radius:8px;resize:vertical}

/* 【移設(2026-09-09、本番検証フォローアップ・根本原因の修正)】これらの
   店舗詳細ページ用ルールは元々assets/css/home.cssに置かれていたが、
   HDT_Store_Public::assets()は店舗詳細ページで'hdt-public'・'hdt-jobs'の
   2つのみをwp_enqueue_style()しており、'hdt-home'(home.css)は一切
   読み込まれていなかった。そのためCTAの2行レイアウト・ボタン均等幅化を
   含むこれらのルールは、本番でも常にCSSとして一切適用されていなかった
   (実際のレンダリングではブラウザの通常のinline-block折り返しに
   フォールバックしていただけで、偶然それらしく見えていた)。店舗詳細
   ページで確実に読み込まれるpublic.cssへ移設することで修正する
   (ルールの内容自体は無変更、置き場所のみの修正)。 */
.hdt-store-card-head{margin:0 0 18px}
.hdt-store-category{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--hdt-badge-bg);color:var(--hdt-link);font-size:.85rem;font-weight:700}
.hdt-store-card-head h2{margin:10px 0;color:var(--hdt-text)}
.hdt-store-detail-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hdt-store-detail-meta p{margin:0;padding:14px;background:#fff}
.hdt-store-links{display:flex;flex-direction:column;gap:10px;margin:20px 0}
/* CTAの行(公式サイト/電話する、LINE応募 / お問い合わせ/メール応募)を、
   画面幅に関わらず指定どおりの2行×2列で確実に表示するための行コンテナ。 */
.hdt-store-links-row{display:flex;gap:10px;flex-wrap:wrap}
/* phone_reveal用のラップ要素はレイアウトに影響を与えない(中身の
   ボタン/tel:リンクが直接.hdt-store-links-rowの並びに乗る)。 */
.hdt-phone-reveal{display:contents}
/* 行内のCTA(公式サイト・電話する・LINE応募 / お問い合わせ・メール応募)の
   見た目の幅を揃える。グローバルな.hdt-buttonクラス自体は他ページの多数の
   ボタンで共用のため変更せず、この行の中でのみ均等幅にする(デスクトップ・
   スマホとも同じルールで、gapがある分flex-wrapで折り返しても崩れない)。 */
.hdt-store-links-row .hdt-button{flex:1 1 0;min-width:0;text-align:center;min-height:79px;display:inline-flex;align-items:center;justify-content:center}
/* 「電話する」ボタンの文字サイズ修正(2026-09-12): この行の他のCTA(公式
   サイト等)は<a>要素のためページ本文のフォントサイズをそのまま継承するが、
   「電話する」のみ<button>要素であり、ブラウザ既定のフォームコントロール用
   フォントサイズが適用されて他より小さく見えていた。この行の<button>にのみ
   font-size/font-familyの継承を明示し、他のCTA・他ページの.hdt-button(共用
   クラス)の見た目には一切影響しない。 */
.hdt-store-links-row button.hdt-button{font-size:inherit;font-family:inherit}
/* 2026-09-21追加(店舗詳細ページのCTA刷新、承認済み): 4件のCTAを一意のコンテナ
   .hdt-store-action-grid内で、デスクトップ・スマホとも2列×2行の同一サイズで
   表示する。すべてこのコンテナ配下に閉じたルールで、共有の.hdt-buttonや他ページの
   ボタンには影響しない(背景色・文字色・角丸・影は従来の.hdt-button-secondaryの
   まま)。狭い画面では、行数(4行化)は変えず、内側の余白と文字サイズのみ縮小する。 */
.hdt-store-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hdt-store-action-grid .hdt-button{box-sizing:border-box;width:100%;min-width:0;min-height:79px;display:inline-flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere}
@media(max-width:600px){
	.hdt-store-action-grid{gap:8px}
	.hdt-store-action-grid .hdt-button{min-height:64px;padding-left:8px;padding-right:8px;font-size:.95rem}
}
@media(max-width:900px){.hdt-store-detail-meta{grid-template-columns:1fr}}