/*
 * トップページ（[qlm_home]）専用CSS。qlm-common.cssのデザイントークンを参照する。
 * 既存の他ページ用CSSクラス（.qlm-list-* / .qlm-finder-* / .qlm-qcompare-* / .qlm-qd-* /
 * .qlm-quiz-* / .qlm-today-*）とは名前が重複しないよう、すべて .qlm-home-* に統一している。
 * JavaScriptは使用しない。アニメーションはホバー時の軽いtransitionのみ。
 */

.qlm-home {
	color: var(--qlm-color-text);
	font-size: 16px;
	line-height: 1.7;
	box-sizing: border-box;
	/* 重要：以前は.qlm-home自体をTwenty Twenty-Fiveのレイアウト制約どおり645px幅のままにし、
	   .qlm-home-hero側でwidth:100vw + calc(50% - 50vw)により視覚的にその外へ広げていたが、
	   これが実ブラウザで横スクロールバーを発生させる原因になっていた。
	   （100vwは常にウィンドウ全体の幅を指すため、縦スクロールバーの分だけ
	   document.documentElement.clientWidth（実際に使える幅）より大きくなる。Chromeでは
	   縦スクロールバーが約15px幅を取るため、100vwで広げた要素の右端が実際に使える幅を
	   15px前後超えてしまい、横スクロールバーが表示されていた。全DOM要素をgetBoundingClientRect()で
	   走査し、viewport外へはみ出していたのが.qlm-home-hero（100vw使用）だけであることを確認済み）。

	   修正方針：vw単位を一切使わない。.qlm-home自体をTwenty Twenty-Fiveの645px制約から
	   このページだけ解放し、実際の親要素（entry-content、既にほぼ全幅）と同じ幅まで広げる。
	   これにより.qlm-home-hero側はもう100vwで無理に外へ広がる必要がなくなり、
	   通常のブロック幅（100%）を使うだけで済むため、vw依存によるスクロールバー分の
	   ズレそのものが発生しなくなる（「overflow-x:hiddenで隠す」対処はしていない）。 */
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* Twenty Twenty-Fiveのページテンプレートは、本文の直前に固定の上余白
	   （spacing-60=clamp(30px,7vw,70px)）を2重（mainのmargin-top＋その内側グループの
	   padding-top）に持たせている。今回、固定ページタイトル（wp-block-post-title）を
	   このページだけ非表示にしたことで生まれる余白と合わせ、そのうち1重分だけを
	   打ち消してファーストビューを引き上げる。もう1重分はヘッダー直下の自然な余白として残す。
	   このCSSは[qlm_home]を含むページでしか読み込まれないため、他の固定ページには影響しない。
	   注意：calc(-1 * clamp(...))は実ブラウザで無効な値として無視され、margin-topが0pxに
	   フォールバックしてしまうことを実機検証で確認したため、clamp()自体に負の値を
	   直接渡す形に変更している。さらに、Twenty Twenty-Fiveのグローバルスタイル側に
	   このセレクタより優先されるmargin指定が別途存在することを実機検証で確認したため、
	   !importantで明示的に優先させる（このプロパティ・このページ専用CSSに限定した対応）。 */
	/* ヘッダー直下の余白がやや大きく見えるとのフィードバックを受け、打ち消し量を
	   -100px/-40px から -130px/-60px へ拡大（このページ専用CSSのため、ヘッダー自体の高さや
	   他の固定ページには影響しない）。実機計測で、最も広い/狭い画面幅でもヒーローが
	   ヘッダーへ重ならない正のギャップが残ることを確認済み。 */
	/* 独自のvw係数によるclamp()では、main側のmargin-top・内側グループのpadding-topが
	   参照している--wp--preset--spacing--60自体がclamp(30px,7vw,70px)という
	   区分的な（1000px前後で上限に達する）挙動をするため、幅によってギャップが
	   6px〜27px前後までばらついてしまうことが実機検証で判明した。
	   そこで、同じ--wp--preset--spacing--60変数を直接参照するcalc()に変更し、
	   「2重の余白（main側＋内側グループ側）＋entry-contentの固定margin(約19.2px)」を
	   どの画面幅でも同じロジックで打ち消すようにした。これにより、ヘッダー直下の
	   ギャップが画面幅にかかわらずほぼ一定（目標6px程度）になる（100vwは使用していない）。 */
	margin-top: calc( -2 * var( --wp--preset--spacing--60 ) - 13.2px ) !important;
}

/* このページの固定ページタイトル（Twenty Twenty-Fiveの page.html テンプレートが出力する
   <h1 class="wp-block-post-title">）だけを非表示にする。DB上のページタイトル自体は変更しない。
   このCSS自体が[qlm_home]を含むページでしか読み込まれないため、他の固定ページの
   タイトル表示には影響しない。 */
.wp-block-post-title {
	display: none;
}

.qlm-home * {
	box-sizing: border-box;
	max-width: 100%;
}

.qlm-home a {
	color: var(--qlm-color-secondary);
}

.qlm-home h1,
.qlm-home h2,
.qlm-home h3 {
	color: var(--qlm-color-primary);
	line-height: 1.4;
}

/* ---------------------------------------------------------------------
 * 共通：中央寄せの内側コンテナ（セクション背景はフル幅、内容だけ幅を絞る）。
 * ------------------------------------------------------------------- */

.qlm-home-section,
.qlm-home-today-inner,
.qlm-home-final-cta {
	max-width: 860px;
	margin: 0 auto;
	padding-left: 1.25em;
	padding-right: 1.25em;
}

/* ---------------------------------------------------------------------
 * 1. ファーストビュー
 * ------------------------------------------------------------------- */

/*
 * 全幅化について：100vwは使わない（以前、100vw+calc(50%-50vw)で横スクロールバーが発生した
 * 実績があるため）。代わりに、Twenty Twenty-Fiveがentry-contentへ設定しているCSS変数
 * --wp--style--root--padding-left/right（clamp(30px,5vw,50px)、実機検証で.qlm-home-hero側にも
 * 継承されていることを確認済み）を使い、その分だけ負のmarginで打ち消すことで、あくまで
 * 「entry-contentの内側パディング領域の端」まで広げる（vw単位を一切使わないため、
 * 縦スクロールバー幅とのズレによる横スクロールは発生しない）。
 */
.qlm-home-hero {
	position: relative;
	/* `.qlm-home * { max-width:100%; }`（本ファイル上部の共通ルール）が全幅化を妨げるため、
	   ヒーローだけ明示的に解除する。 */
	max-width: none;
	margin-left: calc( -1 * var( --wp--style--root--padding-left ) );
	margin-right: calc( -1 * var( --wp--style--root--padding-right ) );
	padding: 0;
	display: flex;
	align-items: center;
	min-height: clamp( 380px, 34vw, 520px );
	/* 写真（public/assets/img/home-hero.png）を右寄せでcover表示し、左側だけに
	   「白〜ごく薄い水色→透明」のグラデーションを重ねて文字を読みやすくする。
	   人物は概ね写真幅の65〜90%あたりに写っているため、グラデーションは60%手前で
	   完全に透明になるよう早めに収束させ、人物側にはできるだけ掛からないようにしている
	   （写真全体を白くする・暗くするオーバーレイは使わない）。 */
	background-image:
		linear-gradient( to right, rgba(245,248,251,0.92) 0%, rgba(245,248,251,0.72) 24%, rgba(245,248,251,0.28) 42%, rgba(245,248,251,0) 60% ),
		url( "../img/home-hero.png" );
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	background-color: var( --qlm-color-bg-section );
}

.qlm-home-hero-inner {
	position: relative;
	width: 100%;
	/* 見出し1行化に合わせて横幅を拡張。900px上限、62vwを基準にすることで、
	   人物の写った位置（写真幅の概ね65%あたりから）に対して常に一定の余裕を保ったまま、
	   ビューポート幅に応じて比例的に縮む（固定px単独だと、狭いデスクトップ幅で
	   人物と重なる恐れがあるため、vw基準を主に用いている）。 */
	max-width: min( 900px, 62vw );
	margin: 0;
	/* 左余白は、ヘッダーロゴの左端に近づける（参考画像ではヘッダーとヒーロー文字の左端が
	   概ね揃っている）ものの、見出し1行分の横幅を確保するため、以前より少し控えめにしている。
	   カード的に見えていた背景パネル（半透明の角丸ボックス＋backdrop-filter）は撤去済みで、
	   文字の可読性は.qlm-home-hero側の左側グラデーションだけで確保する。 */
	padding: 2em clamp( 20px, 2vw, 32px ) 2em clamp( 40px, 4vw, 90px );
	text-align: left;
}

/* 円の装飾は無地カード背景向けに作られたもので、写真背景の上では使わない
   （HTML自体は変更せず、表示だけ消す）。 */
.qlm-home-hero-decoration,
.qlm-home-hero-decoration::after {
	display: none;
}

/* 参考画像右上の手書き風コピー。外部Webフォントは読み込まず、OS標準の
   cursive（手書き風）フォールバックのみを使う（環境により見た目は変わるが、
   外部リクエストを増やさないことを優先）。写真の空の部分（人物の左上）に重ね、
   pointer-eventsをnoneにして下の要素の操作を妨げないようにしている。 */
.qlm-home-hero-note {
	position: absolute;
	top: 20px;
	right: clamp( 16px, 3vw, 40px );
	margin: 0;
	max-width: 160px;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", cursive;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: right;
	color: var( --qlm-color-primary );
	transform: rotate( -3deg );
	pointer-events: none;
	z-index: 2;
}

.qlm-home-hero-note::after {
	content: "";
	display: block;
	width: 64px;
	height: 0;
	margin: 4px 0 0 auto;
	border-top: 2px solid var( --qlm-color-accent );
	border-radius: 2px;
	opacity: 0.8;
}

/* 参考画像のように、補助コピーの右に横線を伸ばす（新規DOM要素は追加せず、::afterのみ）。 */
.qlm-home-hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.9em;
	font-weight: 700;
	font-size: 0.85em;
	letter-spacing: 0.08em;
	color: var(--qlm-color-secondary);
	margin: 0 0 0.9em;
}

.qlm-home-hero-eyebrow::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	max-width: 140px;
	background: var(--qlm-color-secondary);
	opacity: 0.4;
}

.qlm-home-hero-title {
	/* 参考画像に合わせて「自分に合う資格を見つける」を1行表示ベースに戻す
	   （HTML側の強制<br>は撤去済み）。hero-innerの拡幅（62vw基準）と合わせて、
	   1365px前後で概ね1行に収まるようにfont-sizeを設計している。ただし幅の狭い
	   デスクトップ幅（1152px付近など）では自然に2行へ折り返ることがあり、その場合も
	   通常のCJK改行のため見た目が破綻することはない。 */
	font-size: clamp( 2.2rem, 1.5rem + 2.3vw, 3.5rem );
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.01em;
	margin: 0 0 0.5em;
}

/* 見出し内の<br>はスマホ専用の改行制御用（PC/タブレットでは非表示にし、1行/自然な折り返しの
   まま維持する）。 */
.qlm-home-hero-title-break {
	display: none;
}

.qlm-home-hero-sub {
	font-size: 1.2rem;
	color: var(--qlm-color-text);
	margin: 0 0 1.85em;
}

.qlm-home-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0.55em;
}

/* ヒーロー内の3CTAだけを、参考画像のようなピル型（角丸を高さの半分に近づける）・
   アイコン付きにする（他セクションの.qlm-home-btnは対象外）。 */
.qlm-home-hero-ctas .qlm-home-btn {
	min-height: 54px;
	padding: 0 1.55em;
	font-size: 1.01rem;
	font-weight: 700;
	border-radius: 999px;
	gap: 0.5em;
}

.qlm-home-hero-cta-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.qlm-home-hero-cta-icon svg {
	display: block;
}

/* 主CTAに軽い影を足して「押したくなる」存在感を出す（情報量は増やさず装飾のみ）。
   末尾の記号も太い矢印(→)ではなく、参考画像に近い細いシェブロン(›)にする。 */
.qlm-home-hero-ctas .qlm-home-btn-primary {
	box-shadow: 0 10px 24px rgba( 46, 92, 138, 0.32 );
}

.qlm-home-hero-ctas .qlm-home-btn-primary::after,
.qlm-home-hero-ctas .qlm-home-btn-secondary::after {
	content: "\203A";
	/* auto marginでアイコン+文言のグループとシェブロンの間を広げる。ボタンが
	   横幅いっぱい（スマホ等）でない限り見た目上の変化はない（＝PC/タブレットでは
	   ボタン幅が内容ぴったりのため実質ノーオペレーション）。 */
	margin-left: auto;
	padding-left: 0.4em;
	font-weight: 400;
	transition: transform 0.15s ease;
}

.qlm-home-hero-ctas .qlm-home-btn-primary:hover,
.qlm-home-hero-ctas .qlm-home-btn-primary:focus-visible {
	box-shadow: 0 12px 28px rgba( 29, 53, 87, 0.38 );
	transform: translateY( -1px );
}

.qlm-home-hero-ctas .qlm-home-btn-primary:hover::after,
.qlm-home-hero-ctas .qlm-home-btn-primary:focus-visible::after {
	transform: translateX( 3px );
}

/* 副CTAは白背景＋青枠で、主CTAとの強弱をはっきりさせる。 */
.qlm-home-hero-ctas .qlm-home-btn-secondary {
	background: var( --qlm-color-bg );
	border-color: var( --qlm-color-secondary );
	color: var( --qlm-color-secondary );
}

/* ---------------------------------------------------------------------
 * ボタン共通（プライマリ／セカンダリ）。過度なピル型にはしない。
 * ------------------------------------------------------------------- */

.qlm-home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.5em;
	border-radius: var(--qlm-radius-button);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/*
 * 実機検証で判明：`.qlm-home a { color: var(--qlm-color-secondary); }`（詳細度0,1,1）が
 * 単一クラスの `.qlm-home-btn-primary` の color 指定（詳細度0,1,0）より詳細度が高く、
 * プライマリボタンの文字色が常に紺色（背景と同色）に上書きされ、文字が見えなくなっていた。
 * `.qlm-home-btn` と組み合わせて詳細度0,2,0にすることで、`.qlm-home a` より確実に優先させる。
 */
.qlm-home-btn.qlm-home-btn-primary {
	background: var(--qlm-color-secondary);
	color: var(--qlm-color-on-primary);
	border: 1.5px solid var(--qlm-color-secondary);
}

.qlm-home-btn.qlm-home-btn-primary:hover,
.qlm-home-btn.qlm-home-btn-primary:focus-visible {
	background: var(--qlm-color-primary);
	border-color: var(--qlm-color-primary);
	color: var(--qlm-color-on-primary);
}

.qlm-home-btn.qlm-home-btn-secondary {
	background: var(--qlm-color-bg);
	color: var(--qlm-color-secondary);
	border: 1.5px solid var(--qlm-color-border);
}

.qlm-home-btn.qlm-home-btn-secondary:hover,
.qlm-home-btn.qlm-home-btn-secondary:focus-visible {
	border-color: var(--qlm-color-secondary);
	background: var(--qlm-color-bg-section);
	color: var(--qlm-color-secondary);
}

.qlm-home-btn:focus-visible {
	outline: 2px solid var(--qlm-color-secondary);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * 2・4. カードセクション（できること／資格を取った先まで考える）。
 * ------------------------------------------------------------------- */

.qlm-home-section {
	padding: var(--qlm-space-xl) 0;
}

.qlm-home-section-alt {
	background: var(--qlm-color-bg-section);
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.qlm-home-section-alt > * {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25em;
	padding-right: 1.25em;
}

.qlm-home-section-title {
	font-size: 1.5rem;
	text-align: center;
	margin: 0 0 0.5em;
}

/* 「資格のカチでできること」セクションだけ、参考画像のようなFEATURESラベル・
   見出し下の短いライン・薄い背景パネルを付ける（「資格を取るだけで終わらない」
   セクション（.qlm-home-section-alt）は対象外、現状のまま）。 */
.qlm-home-section-features-inner {
	background: var( --qlm-color-bg-section );
	border-radius: 20px;
	padding: 2.25em 1.5em;
}

.qlm-home-section-eyebrow {
	text-align: center;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var( --qlm-color-secondary );
	opacity: 0.75;
	margin: 0 0 0.6em;
}

.qlm-home-section-features .qlm-home-section-title::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var( --qlm-color-secondary );
	margin: 0.7em auto 0;
}

.qlm-home-section-lead {
	text-align: center;
	color: var(--qlm-color-text-muted);
	margin: 0 0 2em;
	font-size: 0.98rem;
}

.qlm-home-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25em;
}

.qlm-home-card {
	background: var(--qlm-color-bg);
	border: 1px solid var(--qlm-color-border);
	border-radius: var(--qlm-radius-card);
	padding: var(--qlm-space-md);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.qlm-home-card:hover {
	box-shadow: var(--qlm-shadow-hover);
	transform: translateY(-2px);
}

.qlm-home-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--qlm-color-bg-section);
	color: var(--qlm-color-secondary);
	margin-bottom: 0.85em;
}

.qlm-home-card-title {
	font-size: 1.05rem;
	margin: 0 0 0.5em;
}

.qlm-home-card-text {
	margin: 0;
	color: var(--qlm-color-text);
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------------
 * 3. 今日の資格問題（導線のみ。データ取得ロジックには一切関与しない）。
 * ------------------------------------------------------------------- */

.qlm-home-today {
	padding: var(--qlm-space-lg) 0;
}

.qlm-home-today-inner {
	display: flex;
	align-items: center;
	gap: 1.25em;
	background: var(--qlm-color-bg);
	border: 1px solid var(--qlm-color-border);
	border-radius: var(--qlm-radius-card);
	padding: var(--qlm-space-md);
}

.qlm-home-today-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--qlm-color-bg-section);
	color: var(--qlm-color-accent);
}

.qlm-home-today-text {
	flex: 1 1 auto;
	min-width: 0;
}

.qlm-home-today-title {
	font-size: 1.15rem;
	margin: 0 0 0.35em;
}

.qlm-home-today-lead {
	margin: 0;
	color: var(--qlm-color-text-muted);
	font-size: 0.95rem;
}

.qlm-home-today-cta {
	flex-shrink: 0;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * 5. 最後のCTA。
 * ------------------------------------------------------------------- */

.qlm-home-final-cta {
	text-align: center;
	padding: var(--qlm-space-xl) 0 calc(var(--qlm-space-xl) * 1.1);
}

.qlm-home-final-cta-title {
	font-size: 1.35rem;
	margin: 0 0 1em;
}

/* ---------------------------------------------------------------------
 * レスポンシブ：タブレット幅。
 * ------------------------------------------------------------------- */

@media ( max-width: 820px ) {
	.qlm-home-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	/* タブレット幅：ヒーローの高さが縮む分、写真側に文章が寄りすぎないよう
	   テキスト列の最大幅を少し狭める（人物は引き続き右側に表示されたまま）。 */
	.qlm-home-hero {
		min-height: clamp( 340px, 40vw, 420px );
	}

	.qlm-home-hero-inner {
		max-width: 440px;
	}
}

/* ---------------------------------------------------------------------
 * レスポンシブ：スマホ幅。カードは縦並び、今日の資格問題ブロックも縦積みにする。
 * ------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	/* スマホ：参考画像のように、写真を背景としたまま見出し・説明文を写真の上（左上）に
	   直接重ね、CTAは写真の下（白背景）に続ける。写真部分は.qlm-home-hero::before
	   （position:absoluteでHpx分だけ確保、通常のflowには積まない）で表現し、
	   hero-inner側は.qlm-home-hero-titleなどのテキストをその上に描画したあと、
	   .qlm-home-hero-ctasだけmargin-top:autoで確保した高さ(min-height)の下端まで
	   押し下げる（テキストの長さが変わってもCTAは常に写真の下＝白背景に来る）。 */
	.qlm-home-hero {
		position: relative;
		display: block;
		min-height: 0;
		background: none;
	}

	/* 見出し・人物・手書きコピーの重なりをCSSだけで完全に解消するのが難しかったため、
	   スマホ幅だけ承認済みのヒーロー画像（見出し・説明文・3CTA・手書きコピーを
	   すべて含んだ1枚の画像）を主役にする。画像そのものは
	   public/assets/img/home-hero-mobile.png（新規追加、既存のhome-hero.pngは
	   変更していない）。
	   見た目は画像だが、CTAは実際にタップできる<a>要素を画像の上へ透明で重ねて実現する
	   （リンク先・文言は既存のまま変更していない）。見出し等のテキストはSEO/アクセシビリティ
	   のためDOMに残しつつ、視覚的にのみ非表示（sr-only）にする。 */
	.qlm-home-hero {
		position: relative;
		display: block;
		min-height: 0;
		background: none;
		/* 画像の実寸比率（941:1165）に固定し、画像内のボタン位置と重ねるリンクの
		   位置（%指定）が常に一致するようにする。 */
		aspect-ratio: 941 / 1165;
		overflow: hidden;
	}

	.qlm-home-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: url( "../img/home-hero-mobile.png" );
		background-repeat: no-repeat;
		background-size: 100% 100%;
		z-index: 0;
	}

	.qlm-home-hero-inner {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: block;
		max-width: none;
		background: none;
		padding: 0;
	}

	/* 画像内に見出し・説明文・手書きコピーが既に描かれているため、対応する実テキストは
	   視覚的には隠しつつ、SEO・スクリーンリーダー向けにDOM上へ残す（display:noneにすると
	   読み上げされなくなるため、幅1pxに縮小してクリップする標準的なsr-only手法を使う）。 */
	.qlm-home-hero-eyebrow,
	.qlm-home-hero-title,
	.qlm-home-hero-sub,
	.qlm-home-hero-note {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
		border: 0;
	}

	/* CTA 3つは画像の上に実リンクとして重ねる（見た目は画像、操作は本物のリンク）。
	   位置・サイズは承認済み画像を実測したパーセンテージ（左4.78%・幅52.07%、
	   各ボタンのtop/height）。文言・アイコン・矢印は画像側に既に描かれているため、
	   ここではcolor:transparentで視覚的に隠す（DOM上のテキストは維持されるため、
	   スクリーンリーダーでは通常どおり読み上げられる）。 */
	.qlm-home-hero-ctas {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		display: block;
	}

	.qlm-home-hero-ctas .qlm-home-btn {
		position: absolute;
		left: 4.78%;
		width: 52.07%;
		min-height: 0;
		margin: 0;
		padding: 0;
		background: transparent;
		border: none;
		box-shadow: none;
		color: transparent;
		border-radius: 0;
	}

	.qlm-home-hero-ctas .qlm-home-btn:focus-visible {
		outline: 2px solid #ffffff;
		outline-offset: -2px;
	}

	.qlm-home-hero-ctas .qlm-home-btn:nth-child( 1 ) {
		top: 46.35%;
		height: 8.93%;
	}

	.qlm-home-hero-ctas .qlm-home-btn:nth-child( 2 ) {
		top: 56.82%;
		height: 8.50%;
	}

	.qlm-home-hero-ctas .qlm-home-btn:nth-child( 3 ) {
		top: 66.95%;
		height: 8.50%;
	}

	.qlm-home-cards {
		grid-template-columns: 1fr;
	}

	/* FEATURESセクションのカードを、参考画像のような「アイコン左＋文章右」の
	   横並びリスト行にする（.qlm-home-section-alt側の縦並びカードは対象外、無変更）。 */
	.qlm-home-section-features .qlm-home-card {
		display: flex;
		align-items: flex-start;
		gap: 0.9em;
		text-align: left;
		padding: 1em 1.1em;
	}

	.qlm-home-section-features .qlm-home-card-icon {
		width: 44px;
		height: 44px;
		margin-bottom: 0;
	}

	.qlm-home-section-features .qlm-home-card-icon svg {
		width: 22px;
		height: 22px;
	}

	.qlm-home-section-features .qlm-home-card-body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.qlm-home-section-features .qlm-home-card-title {
		font-size: 0.98rem;
	}

	.qlm-home-section-features-inner {
		padding: 1.75em 1em;
	}

	.qlm-home-section {
		padding: var(--qlm-space-lg) 0;
	}

	/* ヒーロー（写真＋CTA）とFEATURESセクションの間の余白を少し増やす
	   （このセクションだけの調整。他セクション間の余白・文言・構造は変更しない）。 */
	.qlm-home-section-features {
		margin-top: 0.5em;
	}

	.qlm-home-section-title {
		font-size: 1.25rem;
	}

	.qlm-home-today-inner {
		flex-direction: column;
		text-align: center;
	}

	.qlm-home-today-cta {
		width: 100%;
	}

	.qlm-home-final-cta {
		padding: var(--qlm-space-lg) 0;
	}

	.qlm-home-final-cta .qlm-home-btn {
		width: 100%;
	}
}