/* トップページ メインビジュアル(単一画像、[hdt_banner_slider]とは別物、1.3.0)。
   PC・スマホともに16:9のアスペクト比で固定し、object-fit:coverで自然に見えるようにする
   (元画像の縦横比に依存して極端に縦長/横長になるのを防ぐ)。画像ファイル自体は変更しない。
   2026-08-31改訂(デザイン刷新): 他セクション(max-width:1140px中央寄せ)とは
   異なり、メインビジュアルのみ承認済みの参考デザインに合わせて全幅化する。
   PHP側(HDT_Home_Public::main_visual())でalignfullクラスを付与しており、
   テーマ(Twenty Twenty-Five、useRootPaddingAwareAlignments有効)のブロック
   レイアウト標準機能により、祖先(has-global-paddingなalignfullコンテナ)の
   内側余白ぶんを打ち消す負のmargin-left/right(WordPressコア側が算出・付与)
   を使って真の全幅まで伸びる。この仕組みはwidth:autoが前提のため、
   width:100%を明示すると負のmarginぶん伸びきらず届かなくなる(ローカル
   ブラウザ確認で実測、右側が最大100px程度不足する不具合を発見・修正済み)。
   よってwidthは指定せず(既定のauto)、margin-left/rightにも一切触れない
   (コア側の値をそのまま活かす)。max-widthのみ、コアCSSとの詳細度差・
   読み込み順に依存しない確実な全幅化のため!importantで明示する(テーマの
   インラインstyleを上書きする既存箇所と同じ踏襲パターン)。全幅化に伴い、
   額縁のような角丸・カード風の影は不自然になるため外す(画像自体・
   アスペクト比・object-fitによるレスポンシブ対応は無変更、横方向の
   はみ出しは発生しない、ローカルブラウザで確認済み)。 */
/* トップページ ヒーロー(2026-09-01再改訂、承認済み参考画像への忠実な再現)。
   当初の「左に白いコピーカード・右に写真カード」の2カラム構成(承認却下)を
   やめ、参考画像どおり「1枚の写真がヒーロー領域の幅いっぱいの背景となり、
   その上の左側にコピー・CTAを重ねる」構成に作り直した。
   外側<section>はalignfullで全幅化(既存の仕組みを踏襲)。画像は
   .hdt-hero-media(position:absolute;inset:0)でセクション全体を覆う背景として
   配置し、object-fit:coverで縦横比に関わらず領域いっぱいに表示する。
   その上に.hdt-hero-overlay(左だけを明るくする薄いグラデーション、指示に
   従いヒーロー全体を暗転させる濃いオーバーレイにはしない)を重ね、さらに
   その上の.hdt-hero-content(position:relative、z-index上位)でコピー・CTAを
   左寄せ表示する。判定用クラス(hdt-main-visual/hdt-main-visual-fallback/
   alignfull)は既存テスト(tests/test-19-store-slider.php)が前提のため
   <section>タグ側にそのまま残す。 */
.hdt-main-visual{
	position:relative;
	box-sizing:border-box;
	max-width:none !important;
	margin-bottom:0;
	overflow:hidden;
	display:flex;
	align-items:center;
	min-height:clamp(480px,40vw,640px);
	background:var(--hdt-charcoal);
}
.hdt-hero-media{position:absolute;inset:0;z-index:0}
.hdt-hero-bg{display:block;width:100%;height:100%;object-fit:cover;object-position:70% center}
/* 可読性確保のための左側だけの薄いグラデーション(指示どおり、ヒーロー全体を
   暗転させる濃いオーバーレイにはしない。写真が明るくても暗くても、左側の
   コピー部分だけは常に白地に近い状態を保ち、チャコールの見出し・本文が
   読める状態を維持する)。
   2026-09-10改訂(承認済み・添付参考画像への配色刷新): 白(#fff)そのままだと
   やや冷たい印象のため、添付参考画像の方向性(温かみのあるアイボリー/
   シャンパン)に合わせ、ごくわずかに温かみのあるクリーム色(rgba(250,244,232,…))
   へ変更。不透明度・各ストップの位置は元の白版と完全に同一の値を維持しており、
   可読性(文字とのコントラスト)・レイアウトには一切影響しない、色相のみの
   微調整。 */
.hdt-hero-overlay{
	position:absolute;inset:0;z-index:1;pointer-events:none;
	background:linear-gradient(90deg,rgba(250,244,232,.94) 0%,rgba(250,244,232,.74) 28%,rgba(250,244,232,.22) 52%,rgba(250,244,232,0) 68%);
}
/* 2026-09-10追加(承認済み・添付参考画像への配色刷新): ヒーロー領域の左右の
   「端」にのみ、ヘッダー・フッターと同じバラの房・舞う花びら・金の煌めき・
   金の曲線の装飾セット(このファイル内で共通利用)を重ねる。写真・コピー
   本文の邪魔にならないよう、四隅(特に左上・左下)に寄せた最小限の配置に
   とどめ、写真の主題(人物)には重ねない。z-indexは.hdt-hero-overlay(1)より
   上・.hdt-hero-content(3、後述のとおり2→3へ変更)より下の2とし、コピーの
   可読性を妨げない。pointer-events:noneでクリック・タブ移動には一切干渉
   しない。 */
.hdt-main-visual::after{
	content:"";
	position:absolute;inset:0;z-index:2;pointer-events:none;
	background-repeat:no-repeat;
	/* 2026-09-10全面改訂(承認済み・approved target画像からの実写クロップに
	   差し替え): 手描きのインラインSVGを全面廃止し、承認済みターゲット画像
	   (assets/images/hdt-section-top.png)のヒーロー部分から、装飾のみの
	   領域(左上の舞う花びら+金の煌めき)をロスレスに切り出した実写クロップ
	   資産(hdt-decor-hero-topleft.png)を使用する。バラ自体の色・形は一切
	   再描画・再着色していない(切り出し矩形+縁のアルファフェザーのみ)。
	   右側(セラピストの実写真、hdt-hero-top.png)は承認済み既存アセットの
	   ため無変更のまま維持し、そちら側に写真由来のバラが既に写り込んで
	   いるため、右側への追加クロップは重複を避けるため配置しない。
	   2026-09-11修正(承認済みプレビューに基づく調整): 左下のバラの房
	   (hdt-decor-hero-botleft.png)は、運営から提供された参考画像と比較した
	   結果、参考画像には存在しない要素だったため削除した(左上の舞う花びら
	   +金の煌めきのみ参考画像と一致するため維持)。 */
	background-image:
		url("../images/hdt-decor-hero-topleft.png");
	background-position:
		left -20px top -6px;
	background-size:
		220px 144px;
}
.hdt-hero-content{position:relative;z-index:3;box-sizing:border-box;width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
.hdt-hero-copy{max-width:45%}
.hdt-hero-copy .hdt-home-kicker{margin:0 0 14px;color:var(--hdt-link);font-weight:800;letter-spacing:.08em}
.hdt-hero-copy h1{margin:0 0 18px;color:var(--hdt-text);font-size:clamp(1.9rem,1rem + 2.6vw,3.1rem);line-height:1.24}
.hdt-hero-support{margin:0 0 30px;font-size:1.02rem;line-height:1.8;color:var(--hdt-text-soft)}
.hdt-hero-copy .hdt-home-actions{display:flex;gap:14px;flex-wrap:wrap;margin:0}
/* 写真の上に重なるボタンのため、セカンダリボタンは半透明カードではなく
   明確な白地(半透明)に統一し、写真の色調に関わらず読みやすさを保つ。
   2026-09-10改訂(承認済み・添付参考画像への配色刷新): 枠線・文字色を、
   汎用の.hdt-button-secondary(jobs.css、店舗詳細の電話する/LINE等
   他ページでも共用する既存クラスのため無変更のまま)の淡いグレー系から、
   このヒーロー内に限定してラズベリー系の枠線・文字色へ上書きする(添付
   参考画像の「白地+マゼンタ系の枠線・文字」の指定に合わせる)。白背景・
   角丸(999px、.hdt-button共通)・padding等の形状は無変更。他ページの
   セカンダリボタンには一切影響しない、ヒーロー限定のスコープ。 */
.hdt-hero-copy .hdt-home-actions .hdt-button-secondary{background:rgba(255,255,255,.92);border:1px solid var(--hdt-raspberry);color:var(--hdt-raspberry);box-shadow:0 4px 14px rgba(34,26,29,.10)}
.hdt-home-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:36px 0 38px}
.hdt-home-feature-grid>div{padding:22px;border:1px solid var(--hdt-border);border-radius:16px;background:#fff;box-shadow:0 8px 24px var(--hdt-shadow-color);transition:transform .15s ease,box-shadow .15s ease}
.hdt-home-feature-grid>div:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(34,26,29,.18)}
.hdt-home-feature-grid strong,.hdt-home-feature-grid span{display:block}
.hdt-home-feature-grid strong{color:var(--hdt-text);margin-bottom:8px}
.hdt-slider{position:relative;overflow:hidden;border-radius:18px;background:var(--hdt-surface-tint);margin:20px 0 30px}
.hdt-slider-track{display:flex;transition:transform .45s ease}
.hdt-slide{flex:0 0 100%;margin:0}
.hdt-slide img{display:block;width:100%;aspect-ratio:16/6;object-fit:cover}
.hdt-slider-prev,.hdt-slider-next{
	position:absolute;top:50%;transform:translateY(-50%);
	width:42px;height:42px;border:1px solid var(--hdt-border);border-radius:50%;
	background:rgba(255,255,255,.92);color:var(--hdt-link);font-size:30px;cursor:pointer;
	box-shadow:0 4px 16px var(--hdt-shadow-color)
}
.hdt-slider-prev{left:14px}.hdt-slider-next{right:14px}
.hdt-slider-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px}
.hdt-slider-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.65)}
.hdt-slider-dots button.is-active{background:var(--hdt-raspberry)}
.hdt-area-links{margin:34px 0}
.hdt-area-links h2{color:var(--hdt-text);font-weight:800;display:inline-flex;align-items:center;gap:10px}
/* 2026-09-01改訂(承認済み): public.cssの.hdt-store-slider h2::beforeと完全に
   同じ花びらデザインへ置き換え(円形ドットの廃止)。見出しテキスト・
   フォントサイズ・太さ・間隔・縦位置揃えは無変更。 */
.hdt-area-links h2::before{
	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-area-links>div{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.hdt-area-links a{padding:9px 7px;border:1px solid var(--hdt-border);border-radius:10px;text-align:center;text-decoration:none;background:#fff;color:var(--hdt-link);font-size:.9rem;transition:background .15s ease,border-color .15s ease}
.hdt-area-links a:hover{background:var(--hdt-badge-bg);border-color:var(--hdt-raspberry)}
@media(max-width:900px){
	/* タブレット以下: 写真の主題を右側に保ったまま、コピー側の可読ゾーンを
	   広げる(左固定45%ではテキストが窮屈になるため)。 */
	.hdt-hero-copy{max-width:64%}
	.hdt-hero-overlay{background:linear-gradient(90deg,rgba(250,244,232,.95) 0%,rgba(250,244,232,.82) 42%,rgba(250,244,232,.3) 66%,rgba(250,244,232,0) 82%)}
	.hdt-home-feature-grid{grid-template-columns:1fr}
	.hdt-area-links>div{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
	/* スマホ: 縦積みのスペースが無いため、写真は背景のまま維持しつつコピーは
	   全幅を使い、上から下へ読みやすいよう縦方向グラデーションへ切り替える
	   (横方向の細い読書ゾーンで1文字ずつ折り返す不具合を避ける)。 */
	/* 2026-09-01改訂(本番モバイル画面の確認結果を踏まえたファーストビュー
	   軽量化): デスクトップ幅は一切変更せず、このブロック内のみ調整する。
	   (1)最小高さをclamp(440px,132vw,560px)→clamp(360px,100vw,460px)へ縮小し、
	   次のセクションが早く見えるようにする。この結果、写真を覆う箱の縦横比が
	   従来より正方形に近づき、object-fit:coverで実際に見える横方向の範囲も
	   従来よりわずかに広くなる(横方向の切り取りが多少緩和される副次効果)。
	   (2)見出し・本文・ボタンの余白/フォントサイズを縮小し、視覚的な圧迫感を
	   軽減する(見出しは約23%縮小、指示の20〜25%レンジ内)。
	   (3)object-position(画像は<img>のためbackground-positionではなく
	   object-positionで制御、要求の意図はこちらに相当)を70%→85%へ変更し、
	   (1)で箱が正方形に近づいた新しい縦横比のもとで、女性の姿(元画像の
	   横方向63〜100%付近、roses込み)が中央〜やや右寄りに自然に収まる範囲に
	   調整した(画像ファイル自体は無変更)。
	   (4)オーバーレイの白の不透明度をわずかに下げ(縦方向グラデーションの形自体は
	   維持)、見出し部分の可読性を保ちつつ、その下に重なる女性の姿がうっすら
	   透けて見えるようにした(本番スクリーンショットで確認した「白飛びして
	   人物が完全に見えなくなる」状態の緩和。文字の可読性は本番同様に十分
	   確保される濃度を維持)。 */
	.hdt-main-visual{min-height:clamp(360px,100vw,460px);align-items:flex-start}
	/* 2026-09-02追加: 本番モバイル画面の確認結果を踏まえ、見出し〜ボタンの
	   コピー全体(グループ内の相対的な間隔は無変更)を写真に対してやや下へ
	   移動し、見出しが写真の上寄りではなく縦方向でより中央寄りに感じられる
	   ようにした。padding-topの微調整のみ(20px→48px→72px、2段階で調整)で、
	   画像自体・object-position/fit・オーバーレイ・ヒーロー最小高さ・
	   デスクトップは一切変更していない。 */
	.hdt-hero-content{padding-top:72px}
	.hdt-hero-copy{max-width:100%}
	.hdt-hero-bg{object-position:85% center}
	.hdt-hero-overlay{background:linear-gradient(180deg,rgba(250,244,232,.88) 0%,rgba(250,244,232,.78) 45%,rgba(250,244,232,.3) 75%,rgba(250,244,232,.08) 100%)}
	.hdt-hero-copy h1{font-size:clamp(1.25rem,.85rem + 3.8vw,1.85rem);margin:0 0 10px}
	.hdt-hero-support{font-size:.92rem;line-height:1.6;margin:0 0 16px}
	.hdt-hero-copy .hdt-home-actions{flex-direction:column;gap:8px}
	.hdt-hero-copy .hdt-home-actions .hdt-button{box-sizing:border-box;width:100%;text-align:center;padding:11px 20px;font-size:.95rem}
	.hdt-slider-prev,.hdt-slider-next{width:36px;height:36px;font-size:24px}
	.hdt-area-links>div{grid-template-columns:repeat(2,minmax(0,1fr))}
	/* 2026-09-10追加(承認済み・添付参考画像への配色刷新): モバイルはヒーロー
	   自体の縦横比が変わる(align-items:flex-start・min-height縮小)ため、
	   装飾も小さく・端に寄せる(ヘッダー・フッターのモバイル調整と同じ方針)。
	   レイヤー数・順序はデスクトップの.hdt-main-visual::afterと同一
	   (2026-09-10改訂: 実写クロップ2枚構成に合わせ更新)。 */
	.hdt-main-visual::after{
		background-size: 120px 78px, 130px 170px;
		background-position: left -10px top -3px, left -8px bottom -10px;
	}
}

/* トップページ(フロントページ)のみ: テーマ(Twenty Twenty-Five)が自動出力する
   ページタイトル(「トップページ」の見出し)を非表示にする。body.homeで絞り込むため、
   他の固定ページ・求人ページ等のタイトルには影響しない。テーマファイル自体は変更しない。 */
body.home h1.wp-block-post-title{display:none}

/* 2026-09-10追加(承認済み・淡いピンクのロゴマーク差し替え): ブランドロゴマーク
   (HDT_Branding::brand_mark_html()が返す<img>、実体はassets/images/
   hdt-rose-mark.png、淡いピンクの実写バラ)は、ヘッダー・フッター・この
   ファイル内の黒帯/中間セクションブランドロックアップの3箇所すべてで共通の
   .hdt-brand-mark要素を使っており、しかもヘッダー・フッターはこのプラグインの
   全ページ(求人詳細・店舗詳細・利用規約等)で共有されている。承認済みの
   装飾方向(濃い赤/クリムゾンのみ、淡いピンク不可)はトップページの見た目
   のみが対象のため、共有アセット(hdt-rose-mark.png)自体やHDT_Branding::
   brand_mark_html()のロジックには一切触れず、トップページに限定した
   見た目の上書きのみで対応する。home.css自体がトップページの本文中の
   ショートコード([hdt_main_visual]等)からのみenqueueされる(他ページでは
   一切読み込まれない)ため、このルールは構造的にトップページ以外へは
   絶対に及ばない(body.home接頭辞は既存の踏襲パターンに合わせた念のための
   二重の絞り込み)。画像を非表示にし、代わりに既存の承認済み装飾クロップ
   (hdt-decor-header-left.png、ヘッダー装飾で既に使用・検証済みの濃い赤バラの
   房)を背景画像として表示する(新規アセットは追加せず、既存の承認済み
   クロップを再利用。バラ自体の色・形の再描画・再着色は一切していない)。
   header/footer/黒帯それぞれの.hdt-brand-mark自身のwidth/height(80px/
   52px/105px等、レスポンシブ含む)は無変更のため、レイアウト・余白には
   影響しない。 */
body.home .hdt-brand-mark img{display:none}
body.home .hdt-brand-mark{
	background-image:url("../images/hdt-decor-header-left.png");
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

/* トップページ(フロントページ): テーマ(Twenty Twenty-Five)のpage.htmlが
   本文を囲むグループに付与するpadding-top/padding-bottom(fluid値、1000px以上で70pxに達する)、
   および<main>要素自体に付与されるインライン style="margin-top:var(--wp--preset--spacing--60)"
   (これもfluid値、1000px以上で70px)の二重の余白により、ヘッダー~メインビジュアル間の
   隙間が過大になっていたための調整(2026-08-26改訂: ヘッダー直下の余白を追加で圧縮)。
   [hdt_area_links]とフッターの間の余白(padding-bottom)は今回のタスク対象外のため維持する。
   <main>のインラインstyleは特異度が非常に高いため!importantでの上書きが必要
   (テーマファイル自体は変更しない、既存の踏襲パターン)。
   2026-09-01改訂(黒ヘッダー直下の白い隙間を除去): ヒーローが全幅の写真背景に
   なった(黒帯・フッターと同じ「縁までべた塗り」構成)ため、以前は「圧縮した
   上で少しだけ残す」方針だった12px/16pxの余白が、黒ヘッダーと写真ヒーローの
   間に白い帯として visible な隙間を作ってしまうようになった。原因はこの
   padding-top/margin-topの2つ(テーマの既定値を圧縮する目的で以前追加した
   値そのもの)。ヒーロー自体の高さ・トリミング・見出し位置には一切触れず、
   この2つの値のみを0へ変更する(不要になった余白圧縮ルールを、意図どおり
   ゼロまで圧縮し直しただけであり、新規のnegative margin等は使わない)。
   2026-09-01再訂正: 上記2つを0にしても実測で約19px残っていたため再調査
   したところ、さらに1段深い<div class="entry-content">自体がテーマの既定
   ブロック間隔(block gap)由来のmargin-topを独自に持っており(親のalignfull
   div側はpadding-top:0で「素通し」になるため、entry-content自身のmarginが
   そのまま可視の隙間として現れていた)、これが残り19pxの真因だった。
   entry-content側のmargin-topも同じ理由・同じ方針で0にする(このセレクタも
   body.homeに限定するため、他の固定ページ・求人ページ等の段落間隔には
   一切影響しない)。 */
body.home main.wp-block-group{ margin-top:0 !important; }
body.home main.wp-block-group > .wp-block-group.alignfull{
	padding-top:0 !important;
}
body.home .entry-content{ margin-top:0 !important; }
@media(min-width:1000px){
	body.home main.wp-block-group{ margin-top:0 !important; }
	body.home main.wp-block-group > .wp-block-group.alignfull{
		padding-top:0 !important;
		padding-bottom:30px !important;
	}
}

.hdt-pricing{margin:34px 0}.hdt-pricing-head{text-align:center;max-width:720px;margin:0 auto 24px}
.hdt-pricing-head .hdt-home-kicker{margin:0 0 10px;color:var(--hdt-text);font-weight:800;font-size:clamp(1.9rem,1rem + 2.6vw,3.1rem);letter-spacing:.02em}
.hdt-pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.hdt-price-card{position:relative;padding:26px;border:1px solid var(--hdt-border);border-radius:18px;background:#fff;box-shadow:0 8px 26px var(--hdt-shadow-color)}
/* 2026-08-31改訂: 「プレミアム」枠はCTAと同じラズベリーだと通常ボタンと
   区別しづらいため、装飾アクセントのシャンパンゴールドを充て、上位プランで
   あることを一目で区別できるようにする。 */
.hdt-price-card.is-premium{border-color:var(--hdt-gold);box-shadow:0 10px 30px rgba(176,141,87,.22)}.hdt-price-card h3{color:var(--hdt-text);font-size:1.35rem}
.hdt-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}.hdt-price strong{font-size:1.8rem;color:var(--hdt-link)}
.hdt-price-card ul{padding-left:1.2rem;line-height:2;color:var(--hdt-text)}.hdt-price-badge{position:absolute;right:18px;top:18px;padding:5px 12px;border-radius:999px;background:var(--hdt-gold);color:#fff;font-size:.82rem;font-weight:700;text-shadow:0 1px 3px rgba(34,26,29,.35)}
.hdt-option-list{margin:20px 0;padding:20px;border:1px solid var(--hdt-border);border-radius:14px;background:var(--hdt-surface-tint)}
/* 2026-09-30追加(承認済み): 「有料オプション」見出しのみ文字色を#20C997
   (エメラルドグリーン)へ。フォントサイズ・太さ・余白・レイアウトは
   テーマ既定のまま無変更(この1行以外は追加していない)。 */
.hdt-option-list h3{color:#20C997}
.hdt-option-list p{display:inline-block;margin:6px 18px 6px 0;color:var(--hdt-text)}.hdt-pricing-action{text-align:center}
.hdt-option-group-label{display:block;margin:14px 0 4px;font-weight:800;color:var(--hdt-link);font-size:.92rem}
.hdt-option-list p.hdt-option-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;max-width:320px;width:100%}
.hdt-option-row .hdt-option-yen{font-weight:700;font-variant-numeric:tabular-nums;min-width:80px;text-align:right}
@media(max-width:700px){.hdt-pricing-grid{grid-template-columns:1fr}}

/* トップページ中間の「サイト名表示」メッセージセクション(2026-08-31追加、
   承認済みデザイン「パターンA」の必須要素)。[hdt_main_visual]と同じ手法
   (alignfullクラス+テーマのlayout:constrained標準機能)で全幅化する。
   装飾は最小限(過度なグラデーション・グロー等は付けない、他セクションとの
   一貫性を優先)。
   2026-09-01改訂(運営承認済み配色変更): 背景をチャコール(黒)からアイボリー
   (--hdt-surface-tint、パターンAの既存の淡いウォームトーン)へ変更。
   従来は暗背景を前提にした白系の文言色だったため、そのままでは新しい
   アイボリー地でほぼ読めなくなる。可読性確保のため最小限、本文・強調部分・
   ブランド文言の文字色を明色系→通常の本文色系(チャコール/ラズベリー)へ
   反転する(指示にある「可読性のために必要な場合のみ、最小限」に該当する
   調整。レイアウト・構造・ロゴ画像自体は変更しない)。
   2026-09-01再改訂(ヒーロー直下の白い隙間を除去): margin-top:40pxは、以前
   このセクションがページ末尾寄りに位置していた頃の「前のセクションとの
   余白」だった。ヒーロー直後へ配置が変わった後もこの値が残っていたため、
   全幅の写真ヒーロー(黒ヘッダーと同じ縁までべた塗り)とアイボリー地の間に
   白い隙間として visible になっていた(実測、他に発生源は無いことを確認済み)。
   ヒーロー・アイボリー地それぞれの内容(見出し・写真・ロゴ・文言)には
   一切触れず、この余白のみを0にする。 */
.hdt-cta-band{
	position:relative;
	/* 2026-09-10追加(承認済み・ローカルブラウザ確認で発見・修正済みの不具合):
	   position:relativeのみ(z-index未指定)では新しいスタック文脈が生成
	   されないため、下の::before(z-index:-1)がこの要素の内側ではなく祖先側の
	   スタック文脈まで抜けてしまい、装飾が見えなくなる不具合を実機確認で
	   発見した。z-index:0を明示することで、この要素自身の内部にスタック
	   文脈を確実に生成し、::beforeの装飾がこの要素の背景の上・通常コンテンツ
	   の下に正しく収まるようにする。視覚的な重なり順序以外への影響は無い。 */
	z-index:0;
	box-sizing:border-box;
	max-width:none !important;
	margin:0;
	padding:56px 24px;
	background:var(--hdt-surface-tint);
	/* 2026-09-10改訂(承認済み・approved target画像からの実写クロップに
	   差し替え): 以前ここに追加していた手描きのCSSグラデーション(疑似的な
	   ゴールド/ローズのグロー)は削除した。下のhdt-decor-middle-left/right.png
	   (approved target画像からのロスレスクロップ)が、そのボケ味・煌めきを
	   実写としてそのまま含んでいるため、二重に重ねると濁って見えるのを
	   避けるための削除(地の色--hdt-surface-tint自体は無変更)。 */
	text-align:center;
}
/* 2026-09-10追加(承認済み・添付参考画像への配色刷新): 中間セクションの
   四隅にも、ヘッダー・フッター・ヒーローと同じバラの房・舞う花びら・
   金の煌めき・金の曲線の装飾セットを重ねる(このファイル内の
   .hdt-main-visual::afterと同じ絵柄・別配置での再利用、デザインの一貫性を
   保つ)。position:relativeは.hdt-cta-band本体に既に付与済み。z-index:-1+
   pointer-events:noneはヘッダー・フッターの::beforeと全く同じ手法のため、
   ロゴ・文言・通常のコンテンツには一切重ならない・干渉しない。 */
.hdt-cta-band::before{
	content:"";
	position:absolute;inset:0;z-index:-1;pointer-events:none;
	background-repeat:no-repeat;
	/* 2026-09-10全面改訂(承認済み・approved target画像からの実写クロップに
	   差し替え): 手描きのインラインSVG(バラ房/花びら/スパークル)を全面
	   廃止し、承認済みターゲット画像(assets/images/hdt-section-middle.png)
	   から装飾のみの領域をロスレスに切り出した実写クロップ資産
	   (hdt-decor-middle-left.png/-right.png)を使用していたが、2026-09-11
	   (承認済みプレビューに基づく調整): 運営から、左右のバラ装飾がこの
	   セクションだけ視覚的に浮いて見える(トップページ全体での一貫性を
	   損なう)との指摘を受け、左右とも削除した。中央のテキスト・背景色・
	   余白・セクション構造は一切変更していない。この疑似要素自体は
	   z-index:-1・pointer-events:noneのままposition:relativeの基準としての
	   役割のみ残し、背景画像は出力しない。 */
	background-image:none;
}
/* 2026-09-10再改訂(承認済み・中間セクションのフォントサイズを大幅拡大):
   前回の約1.4倍(clamp一律乗算)では「3段階分の拡大」に対して視覚的に
   小さすぎるとの指摘を受け、大幅に引き上げた。他セクション(ヘッダー・
   ヒーロー・フッター)のフォントサイズには一切影響しない、この
   .hdt-cta-band-text専用の指定のみを変更。 */
.hdt-cta-band-text{
	margin:0;
	color:var(--hdt-text);
	font-size:clamp(1.8rem,1.8vw + 1.5rem,2.6rem);
	font-weight:700;
	line-height:1.6;
	letter-spacing:.03em;
}
.hdt-cta-band-highlight{color:var(--hdt-link);font-weight:800}
/* 中間セクションのブランドロックアップ(2026-08-31追加)。ヘッダー
   (assets/css/public.cssの.hdt-brand-mark/.hdt-brand-text等)と同じ
   構造・同じロゴマークを再利用する。
   2026-08-31改訂(ロゴマーク約3倍化): ヘッダー側と同じ方針で42px→124px
   (スマホ34px→100px)へ約3倍に拡大。ロゴが大きくなった分、テキストとの
   間隔(gap)・メッセージ本文との余白(margin-bottom)も広げ、窮屈に
   見えないようにした。
   2026-08-31再改訂(サイズ是正): 上記の約3倍化は強すぎるとの指摘を受け、
   124px→105px(スマホ100px→85px、いずれも約85%)へ縮小。ヘッダー側より
   若干控えめな縮小率とし、中間セクションではロゴの存在感をヘッダーより
   やや強めに保つ(承認済みデザインの意図を踏襲)。gap・margin-bottom等の
   間隔は変更しない。
   2026-09-10改訂(承認済み・中間セクションのみロゴマークを撤去・文言を
   中央揃えに・フォント拡大): 中間セクションに限り、ロゴマーク画像
   (.hdt-brand-mark、ヘッダー・フッターと共有の要素)を非表示にし、
   文言(単発メンズエステ求人/派遣セラピ)のみを中央に残す。ヘッダー・
   フッター側の.hdt-brand-mark(2026-09-10に淡いピンクの実写バラから
   濃い赤の承認済みクロップへ差し替え済み)には一切影響しない、
   .hdt-cta-band-brand配下に限定したセレクタ。.hdt-cta-band-brand自体は
   .hdt-cta-band{text-align:center}を継承するinline-flexのため、ロゴを
   非表示にしてtext要素のみが残ることで、追加のmargin:auto等なしに
   自然に中央揃えになる(左右の余白の非対称は、ロゴという「幅を持つ
   要素」が無くなったことで解消される)。ラベル・ブランド名のフォント
   サイズも約1.4倍(3段階相当)へ拡大した。 */
.hdt-cta-band-brand{
	display:inline-flex;
	align-items:center;
	gap:20px;
	margin:0 0 28px;
}
.hdt-cta-band-brand .hdt-brand-mark{display:none}
.hdt-cta-band-brand .hdt-brand-text{line-height:1.15}
/* 2026-09-10再改訂(承認済み): 「単発メンズエステ求人」<「あなたのもっと
   稼ぎたい」を派遣セラピが応援します！(上のhdt-cta-band-text)<「派遣
   セラピ」という明確な階層になるよう、3要素とも大幅に引き上げた。
   「派遣セラピ」はこの中間セクションの主見出しとして機能するよう、
   3つの中で最も大きく・視覚的に主役となるサイズにしている。 */
.hdt-cta-band-brand .hdt-brand-label{color:var(--hdt-text-soft);font-size:clamp(1.3rem,.6vw + 1.1rem,1.6rem);letter-spacing:.06em}
.hdt-cta-band-brand .hdt-brand-name{color:var(--hdt-charcoal);font-size:clamp(3.6rem,4.5vw + 2.6rem,5.8rem);line-height:1.05}
@media(max-width:600px){
	.hdt-cta-band{padding:40px 20px}
	.hdt-cta-band-brand{gap:14px;margin-bottom:20px}
	/* 2026-09-11改訂(承認済み・モバイル専用の再調整、デスクトップは
	   完全に無変更): 前回のモバイル値(ラベル1.15rem/ブランド名3.4rem/
	   本文1.32rem)は、承認済みデスクトップサイズをベースに単純に縮小した
	   ものだったが、実機確認の結果、375〜390px幅では「派遣セラピ」が
	   左右のバラ装飾(この幅では中央の余白が約350px、装飾自体は
	   background-size:130pxで両端から侵入)に近すぎて窮屈に見える指摘を
	   受けた。このメディアクエリ内の3つのfont-sizeのみをさらに縮小し、
	   「派遣セラピ」が1行のまま装飾から十分な余白を保って収まるように
	   した(5文字×約42px≈210px、350px幅の中央に対して左右各70px前後の
	   余白を確保)。階層(ラベル<本文<ブランド名)・中央揃え・ロゴマーク
	   非表示・キャッチコピーの2行構成(<br>による強制改行)・文言・
	   強調色は無変更。600px超(デスクトップ)側のルールには一切触れて
	   いない。 */
	.hdt-cta-band-brand .hdt-brand-label{font-size:1rem}
	.hdt-cta-band-brand .hdt-brand-name{font-size:2.6rem}
	.hdt-cta-band-text{font-size:1.15rem}
	/* 2026-09-10追加(承認済み・添付参考画像への配色刷新): ヘッダー・
	   フッター・ヒーローのモバイル調整と同じ方針で、装飾を小さく・端に寄せる。
	   レイヤー数・順序はデスクトップの.hdt-cta-band::beforeと同一
	   (2026-09-10改訂: 実写クロップ2枚構成に合わせ更新)。 */
	.hdt-cta-band::before{
		background-size: 130px 211px, 130px 211px;
		background-position: left -8px top -6px, right -8px top -6px;
	}
}

/* 2026-09-19追加(モバイル限定プレミアムデザイン、承認済み): トップページ
   中間の3特徴カード(.hdt-home-feature-grid、募集日から検索/登録不要で
   応募/通報・掲載停止)を、スマホ表示に限り「白/アイボリー地+金の縁取り+
   金のアイコン」のプレミアムデザインへ刷新する。600px超(デスクトップ)側の
   既存ルール(白地+グレーの細い枠線、上の.hdt-home-feature-grid本体・
   .hdt-home-feature-grid>div定義、109〜113行目付近)には一切触れない
   (「モバイル表示のみ」「デスクトップは絶対的に必要な場合を除き変更
   しない」という指示に基づく、意図的な適用範囲の限定)。
   構成: セクション全体の背景をごく淡いアイボリー(--hdt-surface-tint)にし、
   各カード自体は白(#fff)のまま、細い金の枠線(--hdt-gold)と柔らかい金の
   影で「白地の上にカードが浮いている」上質な階層を作る。カード左上に、
   3種類それぞれ内容に対応する金の線画アイコン(カレンダー+検索/紙飛行機/
   盾+注意、いずれもデータURIのインラインSVG、新規アセットファイルは
   追加しない、既存の.hdt-area-links h2::before花びらSVGと同じ手法)を
   配置する。縦積み(grid-template-columns:1fr)自体は既存の
   @media(max-width:900px)ルール(このファイル142〜149行目)で既に適用
   済みのため、ここでは触れない(1カラムの状態へ、余白・枠線・アイコンのみ
   追加する)。 */
@media(max-width:600px){
	.hdt-home-feature-grid{
		background:var(--hdt-surface-tint);
		border-radius:20px;
		padding:22px 16px;
		margin:28px 0 30px;
		gap:14px;
	}
	.hdt-home-feature-grid>div{
		position:relative;
		padding:18px 18px 18px 62px;
		min-height:34px;
		border:1px solid var(--hdt-gold);
		border-radius:14px;
		background:#fff;
		box-shadow:0 6px 18px rgba(176,141,87,.16);
		transition:none;
	}
	.hdt-home-feature-grid>div:hover{transform:none}
	.hdt-home-feature-grid>div::before{
		content:"";
		position:absolute;
		left:16px;
		top:18px;
		width:30px;
		height:30px;
		background-repeat:no-repeat;
		background-position:center;
		background-size:contain;
	}
	.hdt-home-feature-grid strong{color:var(--hdt-charcoal);font-size:1.02rem}
	.hdt-home-feature-grid span{color:var(--hdt-text-soft);font-size:.88rem;line-height:1.6}
	/* カレンダー+検索(募集日から検索)。 */
	.hdt-feature-search::before{
		background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Crect%20x%3D%274%27%20y%3D%277%27%20width%3D%2720%27%20height%3D%2718%27%20rx%3D%273%27%20fill%3D%27none%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%2F%3E%3Cline%20x1%3D%274%27%20y1%3D%2712%27%20x2%3D%2724%27%20y2%3D%2712%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%2F%3E%3Cline%20x1%3D%279%27%20y1%3D%274%27%20x2%3D%279%27%20y2%3D%279%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%2F%3E%3Cline%20x1%3D%2719%27%20y1%3D%274%27%20x2%3D%2719%27%20y2%3D%279%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2721%27%20cy%3D%2720%27%20r%3D%274.2%27%20fill%3D%27none%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%2F%3E%3Cline%20x1%3D%2724.2%27%20y1%3D%2723.2%27%20x2%3D%2727.5%27%20y2%3D%2726.5%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	}
	/* 紙飛行機(登録不要で応募、会員登録なしで直接送れることの比喩)。 */
	.hdt-feature-apply::before{
		background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M4%2C16%20L27%2C5%20L18%2C27%20L14%2C18%20L4%2C16%20Z%27%20fill%3D%27none%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%2718%27%20x2%3D%2727%27%20y2%3D%275%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
	}
	/* 盾+注意(通報・掲載停止)。 */
	.hdt-feature-report::before{
		background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M16%2C4%20L27%2C8%20V16%20C27%2C23%2022%2C27%2016%2C29%20C10%2C27%205%2C23%205%2C16%20V8%20Z%27%20fill%3D%27none%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cline%20x1%3D%2716%27%20y1%3D%2712%27%20x2%3D%2716%27%20y2%3D%2718%27%20stroke%3D%27%23B9924C%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2722%27%20r%3D%271.15%27%20fill%3D%27%23B9924C%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E");
	}
}