/*
	Snow テーマのスマホ表示（2026-10-21）
	qa-styles.css は PC 固定幅（980px）のまま残し、狭い画面だけここで上書きする。
	qa-theme.php の head_css() から読み込む。管理画面は viewport を出さないので効かない。
*/

.qam-login-sp {
	display: none;
}

@media (max-width: 768px) {
	body {
		margin-bottom: 0;
		-webkit-text-size-adjust: 100%;
	}

	/* iOS は 16px 未満の入力欄をタップすると勝手にズームするため */
	input[type="text"], input[type="password"], input[type="email"], textarea, select,
	.qa-form-tall-text, .qa-form-wide-text, .qa-form-tall-select, .qa-form-wide-select {
		font-size: 16px !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	img, video, iframe {
		max-width: 100%;
		height: auto;
	}

	pre {
		overflow-x: auto;
	}

	.qa-q-view-content, .qa-a-item-content, .qa-c-item-content {
		overflow-wrap: anywhere;
	}

	/* ログインバー：フォームは畳んで「ログイン｜ユーザー登録｜検索」の1行に */
	.qam-login-bar {
		height: auto;
	}
	.qam-login-group {
		width: auto;
		padding: 4px 10px;
		display: flex;
		align-items: center;
		gap: 4px 10px;
		flex-wrap: wrap;
	}
	.qam-login-form {
		display: none;
	}
	.qam-login-sp {
		display: inline-block;
		font-size: 14px;
		font-weight: 700;
		color: #fff !important;
		background: #1a7fc1;
		border-radius: 3px;
		padding: 4px 12px;
		text-decoration: none !important;
	}
	.qa-nav-user {
		float: none;
		margin: 0;
		font-size: 14px;
		white-space: normal;
	}
	.qa-nav-user-register .qa-nav-user-link, .qa-nav-user-register .qa-nav-user-link:visited {
		margin-top: 0;
		height: auto;
		line-height: inherit;
	}
	.qa-search {
		float: none;
		margin-left: auto;
		flex: 1 1 100px;
		min-width: 0;
		max-width: 220px;
	}
	.qa-search form {
		display: flex;
	}
	.qa-search-field, input[type="text"].qa-search-field {
		width: auto;
		flex: 1;
		min-width: 0;
		height: 30px;
		padding: 2px 6px;
	}
	input[type="submit"].qa-search-button {
		width: 30px;
		height: 30px;
		flex: none;
		background-position: center 2px;
	}

	/* 全体の固定幅をはずす */
	.qa-body-wrapper {
		width: auto;
		margin-bottom: 0;
	}
	.qa-header {
		padding: 10px 10px 4px;
	}
	.qa-logo {
		float: none;
		font-size: 22px;
		line-height: 1.3;
	}
	div.header-banner {
		float: none;
		font-size: 12px;
		line-height: 1.5;
		margin-top: 4px;
	}
	.qa-main-shadow {
		padding: 6px 0 0;
		background: none;
	}

	/* サイドパネル（ようこそ・カテゴリ等）は本文の下へ回す */
	.qa-main-wrapper {
		display: flex;
		flex-direction: column;
	}
	.qa-main-wrapper > .qa-sidepanel {
		order: 1;
	}
	.qa-main {
		float: none;
		width: auto;
		padding: 0 10px;
		margin: 10px 0 16px;
	}
	.qa-sidepanel {
		float: none;
		width: auto;
		padding: 0 10px 10px;
	}
	.qa-sidebar {
		padding: 12px;
	}
	.qa-feed {
		padding: 12px;
		background-position: 12px 14px;
	}

	/* メニュー */
	.qa-nav-main-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.qa-nav-main-item {
		float: none;
	}
	.qa-nav-main-link {
		padding: 9px 10px;
	}
	.qa-nav-main-item-opp {
		margin-left: auto;
	}
	.qa-nav-sub-list {
		font-size: 13px;
	}
	.qa-nav-sub-link {
		padding: 5px 8px;
	}

	h1 {
		font-size: 20px;
		line-height: 1.4;
	}
	.qa-main-heading {
		margin-bottom: 14px;
	}

	/* 質問一覧：支持・回答の箱を小さくして、タイトルは残り幅いっぱいに */
	.qa-q-list-item {
		padding: 8px 0;
	}
	.qa-q-item-main {
		float: none;
		width: auto;
		overflow: hidden;
		padding-left: 8px;
	}
	.qa-q-item-stats .qa-voting,
	.qa-q-item-stats .qa-a-count,
	.qa-q-item-stats .qa-view-count {
		width: 44px;
		height: 50px;
		margin-right: 3px;
	}
	.qa-q-item-stats .qa-voting {
		display: none;
	}
	.qa-q-item-stats .qa-a-count-data,
	.qa-q-item-stats .qa-view-count-data {
		font-size: 17px;
		margin-top: 6px;
	}
	.qa-q-item-stats .qa-a-count-pad,
	.qa-q-item-stats .qa-view-count-pad {
		font-size: 10px;
	}
	.qa-q-item-tags {
		float: none;
	}

	/* 質問・回答の本文：左の支持ボックスの横に残り幅で流す */
	.qa-q-view {
		padding-left: 0;
	}
	.qa-q-view-main, .qa-a-item-main {
		float: none;
		width: auto;
		display: block;
		overflow: hidden;
		padding-left: 8px;
	}
	.qa-a-list-item {
		padding-left: 0;
		padding-right: 0;
	}
	.qa-a-selection {
		left: 0;
	}
	.qa-c-list {
		margin-left: 0;
	}

	/* フォーム：ラベルと入力欄を縦積み */
	.qa-form-tall-data {
		width: auto;
	}
	.qa-form-tall-label, .qa-form-tall-data {
		padding-left: 0;
		padding-right: 0;
	}
	.qa-form-wide-table, .qa-form-wide-table > tbody, .qa-form-wide-table tr,
	.qa-form-wide-label, .qa-form-wide-data {
		display: block;
		width: auto;
	}
	.qa-form-wide-label {
		white-space: normal;
		border-bottom: none;
		padding: 10px 0 2px;
	}
	.qa-form-wide-data {
		padding: 2px 0 8px;
	}
	.qa-form-wide-text {
		width: 100%;
	}
	.qa-form-tall-buttons, .qa-form-wide-buttons {
		padding-left: 0;
		padding-right: 0;
	}
	.qa-form-tall-button, .qa-form-wide-button, .qa-form-basic-button {
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.qa-form-light-button {
		min-height: 28px;
	}

	/* ユーザー・タグの一覧 */
	.qa-ranking-item, .qa-top-tags-item {
		width: calc(50% - 6px);
		box-sizing: border-box;
	}

	/* ユーザーのプロフィール：左右2段を縦積み */
	.qa-template-user .qa-main {
		padding-right: 10px;
	}
	.qa-template-user .qa-part-form-profile,
	.qa-template-user .qa-part-form-activity,
	.qa-template-user .qa-part-message-list {
		float: none;
		width: auto;
		min-height: 0;
		padding: 0;
		border-right: none;
	}

	/* フッター：画面下に絶対配置だと本文と重なるので普通に流す */
	.qa-footer-bottom-group {
		position: static;
	}
	.qa-footer {
		width: auto;
		font-size: 12px;
	}
	.qa-footer {
		text-align: center;
	}
	.qa-nav-footer-list, .qa-nav-footer-item, .qa-attribution {
		float: none;
	}
	.qa-nav-footer {
		margin-bottom: 6px;
	}
}