@charset "UTF-8";

/* ===========================================================
   ユーザーアンケート結果2026（hanaso kids）専用スタイル
   -----------------------------------------------------------
   ■このファイルの役割
   ・見出し(h2/h3)・.sub-heading・.point・.relation の“字体・色”はサイト既存
     (bootstrap + toppage.css)の継承に委ねる（＝2024ページと同じ見た目）。
   ・一方で、画像の「表示サイズ・2枚横並び・位置微調整・レスポンシブ」は
     このファイルで独自に定義している（下記）。すべて .q2026k 配下にスコープし、
     他ページへ影響させない。
   ■重要な前提（保守時に必ず読むこと）
   ・ペア画像（年齢／選んだ理由）は元スライドを無加工で置き、CSS側で切り出している
     （大人版 public/css/questionnaire2026.css と同じ方式）。画像ファイルは切らない。
   ・下の「位置微調整」の px 値は、現行の切り出し範囲＋PC表示幅を前提に
     “目視で手合わせ”した固定値。画像や切り出し範囲を変えたら再調整が必要。
   ・ペアの幅は固定px（下の「高さを一致させるための幅」）で、高さは aspect-ratio から決まる。
     画像を差し替えたら切り出し範囲を実測し、幅・比率・オフセット%を計算し直すこと。
   ・年度ごとの使い切り静的ページ（2024/2023…と同じ運用）。公開後は基本更新しない。
   =========================================================== */

/* 合成グラフ画像の基本表示。width:100%＋max-width で、大人版チャート幅(≈780px)に合わせつつ
   狭幅ではコンテナに合わせて縮小しはみ出さない（素材1280×720基準なので拡大ボケも無い）。 */
.q2026k img {
	display: block;
	width: 100%;
	max-width: 780px;
	height: auto;
	margin: 0 auto;
}

/* ===== ペア（年齢＋選んだ理由）を2枚横並び =====
   各枠は固定px幅（下の .q2026k-pair-age / -reason）で、高さは切り出し比から自動決定される。
   幅は「同じ高さになる値」を逆算して与えているため2枚の高さが揃う。狭幅では縦積み(下の@media)。 */
.q2026k .q2026k-pair {
	display: flex;
	flex-wrap: wrap;
	gap: 44px;               /* 2枚の左右間隔（縦のリズムはページ本体の流れのまま） */
	justify-content: center;
	align-items: center;
	max-width: 920px;
	margin: 0 auto;
}
/* ===== CSSトリミング（大人版 questionnaire2026.css と同じ方式） =====
   元スライド(1280×720)を無加工のまま配置し、枠(overflow:hidden)＋画像のマイナスマージンで
   必要な範囲だけを表示する。画像ファイルを切らないので、切り出し範囲の調整はCSSだけで完結する。
   ・大人版と同じ思想で「上に余白を残す」＝見出し枠と画像内タイトルの距離を単体セクションに揃える。
   ・切り出し範囲（元画像内の座標・実測）
     年齢   : x=158, y=39, w=810, h=575  （内容bbox L=168,T=87。上余白48px＝単体画像と同等）
     選んだ理由: x=226, y=51, w=614, h=573（内容bbox L=236,T=99。上余白48px）
   ※画像を差し替えたら bbox を実測して下記の % を計算し直すこと。 */
.q2026k .q2026k-crop {
	position: relative;
	overflow: hidden;
	flex: 0 0 auto; /* 幅は下で明示（flex-basis:0 では幅が内容依存になり比率計算の基準が定まらない） */
	/* 高さは aspect-ratio で切り出し範囲の縦横比から決める。
	   ※ padding-bottom 方式を採らない理由: %パディングは「親の幅」基準で解決されるため、
	     親(.q2026k-pair max-width:920px)に対する割合になり、枠自身の幅とは無関係な高さになる
	     （実測 70.99%×920px＝653px で、意図した333pxにならなかった）。 */
}
.q2026k .q2026k-crop img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none; /* 上の .q2026k img{max-width:780px} を打ち消す（拡大して切り出すため） */
	height: auto;
	margin: 0;       /* 同 margin:0 auto を打ち消す（位置は下のマイナスマージンで決める） */
	display: block;
}
/* 年齢: 切り出し 810×575 / 元1280×720
   幅 = 1280/810 = 158.02% ・ 左 = -158/810 = -19.51% ・ 上 = -39/810 = -4.81% ・ 縦横比 = 575/810 = 70.99% */
.q2026k .q2026k-crop.q2026k-pair-age { aspect-ratio: 810 / 575; }
.q2026k .q2026k-crop.q2026k-pair-age img {
	width: 158.02%;
	margin-left: -19.51%;
	margin-top: -4.81%;
}
/* 選んだ理由: 切り出し 614×573 / 元1280×720
   幅 = 1280/614 = 208.47% ・ 左 = -226/614 = -36.81% ・ 上 = -51/614 = -8.31% ・ 縦横比 = 573/614 = 93.32% */
.q2026k .q2026k-crop.q2026k-pair-reason { aspect-ratio: 614 / 573; }
.q2026k .q2026k-crop.q2026k-pair-reason img {
	width: 208.47%;
	margin-left: -36.81%;
	margin-top: -8.31%;
}
/* 2枚の高さを一致させるための幅（切り出し比から逆算）。
   目標高さ 333px → 年齢 333÷(575/810)=469px / 選んだ理由 333÷(573/614)=357px。
   幅を固定pxで与えることで、aspect-ratio により高さが一意に決まり2枚が揃う。 */
.q2026k .q2026k-pair-age    { width: 469px; }
.q2026k .q2026k-pair-reason { width: 357px; }

/* aspect-ratio 非対応ブラウザ（Safari 14 以前など）向けフォールバック。
   枠の中身は position:absolute の img だけなので、高さが決まらないと枠が高さ0＝画像が消える。
   枠幅が固定pxのPC帯に限り、同じ結果になる高さを直接与えて退避する
   （狭幅帯は下の @media で height:auto＝通常フローのため対象外）。
   ※対応ブラウザはこのブロックを無視するので、現行の表示は一切変わらない。 */
@media (min-width: 1366px) {
	/* 見出しと画像の距離を単体セクションに揃える。
	   ペアは切り出し後に縮小率0.579で表示されるため、切り出しで残した上余白48px（元画像上のpx）は
	   表示上27.8pxにしかならない（単体画像は縮小率0.609で47.5〜53.6px）。
	   h3 の margin-bottom:10px と隣接兄弟マージンが相殺されるので、30px指定で実効30px。
	   30＋27.8＝57.8px となり、総合満足度・サポートの58pxと一致する。
	   ※1023.98px以下は切り出しを解除して元スライド全体を出しており、既に53px相当で揃う。
	     1024〜1365.98px は下のブロックで横並びに戻すため、そちらで同じ30pxを指定している。 */
	.q2026k .q2026k-pair { margin-top: 30px; margin-bottom: 60px; }
	/* margin-bottom の根拠: 切り出しは画像の下端も切るため、枠内に残る下余白は10源px＝表示上5.8px。
	   単体セクションの画像は下に105〜117源pxの余白を含み、780px表示で64.0〜71.3pxある。
	   そのままだとペアの直後の本文だけが約62px詰まって見えるため、60pxで補う。
	   直後の div.sub-heading に上マージンが無いので相殺されず、そのまま加算される。
	   ※1024〜1365.98px の横並び帯にも同じ理由で同値を入れている（下のブロック）。 */

	@supports not (aspect-ratio: 1 / 1) {
		/* 値は aspect-ratio 適用時の実測高さに合わせてある（丸め差も出ない）。
		   端数を削ると 1/64px 単位の丸めで数十pxぶん縦位置がずれるため、この桁のまま保つこと。 */
		.q2026k .q2026k-crop.q2026k-pair-age    { height: 332.9219px; } /* 469 × 575/810 */
		.q2026k .q2026k-crop.q2026k-pair-reason { height: 333.1563px; } /* 357 × 573/614 */
	}
}

/* ===== PC用の位置微調整（すべて“目視で手合わせ”した固定px・PC(≥1366px)のみ） =====
   ・現行の切り出し範囲＋PC表示幅が前提。画像や幅が変わったら再調整が必要。
   ・タブレット/スマホ(≤1365.98px)では下の @media で全て無効化（left:0）している。
   ・値は運用リクエストに沿って調整した結果（意味のある算出根拠は無い＝要注意ポイント）。
   ・選んだ理由は無調整（left 指定なし＝position:relative の初期値 auto で基準位置のまま）。 */
.q2026k .q2026k-pair-age    { left: -35px; } /* 年齢を少し左へ（position:relative は .q2026k-crop 側で指定済み） */
.q2026k img.q2026k-shift-l  { position: relative; left: -130px; } /* 目的: 円が画像中央(≈50%)にあるぶん大きく左へ寄せ、満足度系(円≈31%)の円グラフと同一Xに揃える */
.q2026k img.q2026k-shift-r  { position: relative; left: 15px;  } /* 満足度3枚(総合満足度/講師/サポート): 少し右へ */

/* ===== レスポンシブ =====
   境界は 1365.98px。iPad Pro(1024/1366相当)までタブレットとして扱い、PC用の固定pxシフトが
   当たらないようにしている。PC用シフトは枠が広い前提の値のため、この帯に効かせると
   幅によって位置がバラつく（実測: 1006pxで左に130pxはみ出し、1162pxで左-99/右161の偏り）。
   そのため ≤1365.98px では全て left:0 に戻し、中央寄せへ統一する。
   ※このブロックで縦積みにしたうえで、1024〜1365.98px だけ下の @media で横並びに戻している。
     left:0 はその帯でも維持される（PC用シフトを使わないため）。 */
@media (max-width: 1365.98px) {
	/* PC用の位置微調整を全て無効化 */
	.q2026k img.q2026k-shift-l,
	.q2026k img.q2026k-shift-r,
	.q2026k .q2026k-pair-age,
	.q2026k .q2026k-pair-reason { left: 0; }

	/* タブレット/スマホ: ペアを縦積みにし、2枚とも「目的」など単体画像と同じ表示幅に揃える。
	   単体画像は .q2026k img{width:100%; max-width:780px} なので、枠も同じ指定にすれば
	   3セクションすべて同一幅になる（PCの固定px幅 469/357 はここで打ち消す）。
	   ※この縦積みが最終的に残るのは 1023.98px 以下と、aspect-ratio 非対応ブラウザのみ。
	     1024〜1365.98px は下の @media で横並びに戻している。
	   高さは aspect-ratio により幅から自動決定されるため、切り出し比は保たれる。 */
	.q2026k .q2026k-pair { display: block; }
	/* 枠のトリミングを解除し、元スライドを「目的」と同じ等倍・全体表示に戻す。
	   （PCの拡大切り出しのままだと、同じ枠幅でも中身が目的よりはるかに大きく見え、はみ出す） */
	.q2026k .q2026k-pair .q2026k-crop {
		width: 100%;
		max-width: 780px;    /* 単体画像と同一の最大幅 */
		margin: 0 auto 22px; /* 中央寄せ＋下マージン */
		aspect-ratio: auto;  /* 切り出し比を解除（高さは画像なりに） */
		overflow: visible;
		height: auto;
	}
	/* 画像は絶対配置・拡大・マイナスマージンをすべて解除し、単体画像と同じ描画にする */
	.q2026k .q2026k-pair .q2026k-crop img {
		position: static;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0;
	}
	/* 年齢のみ、「画像枠」ではなく「画像内の円グラフ」が中央に来るよう補正する。
	   元スライド(1280px)内で円中心x=740、画像中心640に対し +100px(+7.81%) 右寄りのため、
	   同じだけ左へ戻す。
	   ※理由・目的の画像は現状のまま（動かさない）。
	   ※既知のズレ（現行の見た目を維持するため、意図的に直していない）:
	     left の % は自要素ではなく包含ブロック = .q2026k-pair の幅で解決される。
	     .q2026k-pair は max-width:920px（上の base 側指定がこの帯でも生きている）、
	     枠 .q2026k-crop は max-width:780px のため、両者が一致するのはコンテンツ列が
	     780px 以下のときだけ。列幅は viewport×0.75−30px（#maincontents = col-sm-9）なので、
	     viewport 1081〜1365px の帯では補正量が最大約11px 過剰になるが、この帯は下の @media で
	     横並びに戻して left:0 にしているため、現在このズレが出るのは aspect-ratio 非対応
	     ブラウザだけ（1365px時: 実際 -71.9px / 円を列中心に置くなら -60.9px。実測確認済み）。
	     1023.98px以下は列幅が780px以下で包含ブロックと枠幅が一致するため誤差ゼロ。
	     PC帯(≥1366px)はこの指定自体が効かず、上の .q2026k-pair-age{left:-35px} で調整している。
	     直す場合は、この @media 内の .q2026k-pair に max-width:780px を足せば
	     包含ブロックと枠幅が一致して解消する（当該帯の年齢グラフが約11px右へ動く）。 */
	.q2026k .q2026k-pair .q2026k-crop.q2026k-pair-age    { position: relative; left: -7.81%; }
	/* 選んだ理由も同じ考え方で画像中心に合わせる。縦積みで2枚を上下に並べると、
	   年齢(補正後50.00%)と理由(無補正48.75%)の差1.25%がそのまま円の横位置のズレになり、
	   780px表示で約10px・375px幅で約4pxぶん年齢の円が右に見えるため。
	   元スライド(1280px)内の円中心は実測で 年齢x=740 / 理由x=624。
	   理由は画像中心640より16px(1.25%)左にあるので、右へ同じだけ戻して50%に揃える
	   （年齢は右寄りなので左へ、理由は左寄りなので右へ。符号が逆になる）。 */
	.q2026k .q2026k-pair .q2026k-crop.q2026k-pair-reason { position: relative; left: 1.25%; }

}

/* ===== タブレット帯(1024〜1365.98px)だけ横並びに戻す =====
   上の縦積み指定を打ち消し、PC(≥1366px)と同じ「切り出し表示の2枚横並び」にする。
   ・PCの固定幅(469/357px)はgap込みで870px要り、この帯のコンテンツ幅に収まらない
     （実測: viewport1006pxでコンテンツ724px / 1262pxで916px）。そこで幅だけ可変にする。
   ・469:357 は2枚の高さを揃えるための比(= (573/614)÷(575/810) = 1.314625 : 1)なので、
     その比のまま calc で配分する。0.56797 / 0.43203 がその内訳。
     検算: ペア870px なら (870-44)×0.56797=469.1 / ×0.43203=356.9 で現行と一致し、
     高さはどちらも333.0pxで揃う。
   ・max-width:870px は PC 時のペア実幅。これを上限にすることで 1365px→1366px で
     大きさが飛ばない（1366px以上は base の固定幅がそのまま効く）。
   ・aspect-ratio 非対応ブラウザは可変幅だと枠の高さを決められず潰れるため、@supports で
     囲ってある。非対応時は上の縦積み指定がそのまま残る＝現行の挙動を維持する。 */
@media (min-width: 1024px) and (max-width: 1365.98px) {
	@supports (aspect-ratio: 1 / 1) {
		/* 見出しと画像の距離を単体セクションに揃える（PC帯と同じ理由）。
		   切り出し表示では画像内に残した上余白48源pxが縮小されて効くため、実測で
		   VP1200〜1365は27.8px / VP1100は24.8px / VP1024は23.4px にしかならない。
		   同じ幅の単体セクションは上余白47.5〜53.6px（VP1024では45.0〜50.7px）。
		   h3 の margin-bottom:10px と隣接兄弟マージンが相殺されるので30px指定で実効30px。
		   30を足すと帯全体で53〜58pxとなり、PC帯の実測ばらつき(58/58/62/64)の範囲に収まる。 */
		.q2026k .q2026k-pair { display: flex; max-width: 870px; margin-top: 30px; margin-bottom: 60px; }
		/* margin-bottom の根拠: 切り出しは画像の下端も切るため、枠内に残る下余白は10源pxしかない。
		   単体セクションの画像は下に105〜117源pxの余白を含んでおり、780px表示で64.0〜71.3px。
		   枠内10源pxは同条件で5.2〜5.8pxにしかならず、画像と直後の本文の間だけが詰まって見える。
		   不足分は実測で VP1024が59.1px / VP1100が62.5px / VP1280〜1365が61.8px なので60pxで吸収する。
		   直後の div.sub-heading に上マージンが無いため相殺されず、そのまま加算される。
		   ※PC帯(≥1366px)も切り出しのため同じ詰まり方をするので、上のブロックに同値を入れてある。
		   ※1023.98px以下は切り出しを解除して元スライド全体を出すので、この補正は不要。 */

		/* 縦積み用に入れた width:100% / max-width:780px / 下マージン / overflow:visible を戻す */
		.q2026k .q2026k-pair .q2026k-crop {
			max-width: none;
			margin: 0;
			overflow: hidden;
			height: auto;
		}
		/* 画像を絶対配置・拡大の切り出しモードへ戻す（倍率と位置は下で枠ごとに指定） */
		.q2026k .q2026k-pair .q2026k-crop img {
			position: absolute;
			top: 0;
			left: 0;
			max-width: none;
			height: auto;
			margin: 0;
		}

		/* 年齢: 切り出し 810×575。縦積み用の left:-7.81% もここで打ち消す */
		.q2026k .q2026k-pair .q2026k-crop.q2026k-pair-age {
			left: 0;
			width: calc((100% - 44px) * 0.56797);
			aspect-ratio: 810 / 575;
		}
		.q2026k .q2026k-pair .q2026k-crop.q2026k-pair-age img {
			width: 158.02%;
			margin-left: -19.51%;
			margin-top: -4.81%;
		}

		/* 選んだ理由: 切り出し 614×573。同じく left:1.25% を打ち消す */
		.q2026k .q2026k-pair .q2026k-crop.q2026k-pair-reason {
			left: 0;
			width: calc((100% - 44px) * 0.43203);
			aspect-ratio: 614 / 573;
		}
		.q2026k .q2026k-pair .q2026k-crop.q2026k-pair-reason img {
			width: 208.47%;
			margin-left: -36.81%;
			margin-top: -8.31%;
		}
	}
}
@media (max-width: 600px) {
	/* ペア2枚の縦間隔を詰める。元スライドに上下の余白が含まれており、
	   下マージン22pxと二重になって広く見えるため（実測: 2枚の間100px / 他セクション間60px）。 */
	.q2026k .q2026k-pair .q2026k-crop.q2026k-pair-age { margin-bottom: -18px; }
}