/* ==========================================================================
   jotsu.co.jp 共通スマートフォン表示 (2026-10-09)
   - 全ページの最後に読み込む。768px 以下でのみ有効、PC 表示には影響しない。
   - 内容 (HTML) はそのまま、見た目だけを整える → 通常ページを更新すればスマホにも自動反映。
   - 計測が必要な補正 (はみ出すグリッド・長文の中央揃え等) は /assets/js/mobile.js が担当。
   ========================================================================== */
@media (max-width: 768px) {

	/* ---------- 基本 ---------- */
	html { -webkit-text-size-adjust: 100%; }
	body { overflow-x: hidden; }
	img, video { max-width: 100%; height: auto; }
	iframe { max-width: 100%; }
	main p, main li, main dd, main td { line-height: 1.8; }
	main p { font-size: max(14px, 1em); }
	h1, h2, h3, h4 {
		text-wrap: balance;
		line-break: strict;
		overflow-wrap: anywhere;
	}
	h2 { line-height: 1.45; }
	h3, h4 { line-height: 1.5; }

	/* ---------- ページ上部タイトル ---------- */
	.page_title h1, .page_title h2 { font-size: clamp(26px, 7.4vw, 32px) !important; line-height: 1.35 !important; letter-spacing: .04em !important; }
	.page_title p, .page_lead { font-size: 14px; line-height: 1.8; }

	/* ---------- セクション見出し ---------- */
	.section-title, .about-content h2, section > h2, .column > h2 {
		font-size: clamp(21px, 5.8vw, 26px);
	}

	/* ---------- ページ内ナビ: 横スクロールのチップ (各ページの折返し指定より優先) ---------- */
	.page-nav ul {
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.page-nav ul::-webkit-scrollbar { display: none; }
	.page-nav li { flex: 0 0 auto !important; min-width: 0; }
	.page-nav a {
		flex-direction: row !important;
		gap: 6px !important;
		padding: 13px 16px !important;
		font-size: 13px !important;
		white-space: nowrap;
	}

	/* ---------- ニュース一覧: 1段目 日付・タグ・閲覧数 / 2段目 タイトル ---------- */
	a:has(> .news-title):has(> .news-tag) {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 10px;
		padding: 16px 16px 16px 14px !important;
		text-align: left;
	}
	a:has(> .news-title):has(> .news-tag) > * { margin: 0 !important; width: auto !important; min-width: 0 !important; }
	a:has(> .news-title):has(> .news-tag) > time,
	a:has(> .news-title):has(> .news-tag) > .news-date { font-size: 13px !important; white-space: nowrap; flex: 0 0 auto; }
	a:has(> .news-title):has(> .news-tag) > .news-tag { font-size: 11px !important; padding: 2px 10px !important; flex: 0 0 auto; }
	a:has(> .news-title):has(> .news-tag) > .news-title {
		order: 10;
		flex: 1 1 100% !important;
		font-size: 14px !important;
		line-height: 1.65;
		text-align: left !important;
	}
	a:has(> .news-title):has(> .news-tag) > .news-arrow { display: none; }
	a:has(> .news-title):has(> .news-tag) > :not(time):not(.news-date):not(.news-tag):not(.news-title):not(.news-arrow) {
		margin-left: auto !important;
		font-size: 12px;
	}

	/* ---------- 浮動お問い合わせボタン: 小さな丸アイコンに ---------- */
	#floating-cta {
		width: 52px; height: 52px;
		padding: 0 !important;
		justify-content: center;
		font-size: 0 !important;
		right: 14px !important; bottom: 14px !important;
		border-radius: 50% !important;
	}
	#floating-cta i { font-size: 20px; }

	/* ---------- ボタン類: 押しやすく ---------- */
	.cta-buttons, .mid-cta-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
	.cta-buttons a, .cta-btn, .mid-cta-btn { justify-content: center; min-height: 48px; }

	/* ---------- 表: 横スクロール (mobile.js が包む) ---------- */
	.m-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
	.m-scroll > table { min-width: 560px; }

	/* ---------- mobile.js が付けるクラス ---------- */
	html body .m-left { text-align: left !important; }
	html body .m-min12 { font-size: 12px !important; }
	html body .m-stack { grid-template-columns: 1fr !important; }
	html body .m-two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html body .m-wrap { flex-wrap: wrap !important; }
	html body .m-wrap > .m-full { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; }
	html body .m-wrap > .m-half { flex: 1 1 calc(50% - 8px) !important; max-width: calc(50% - 4px) !important; width: auto !important; }
	html body .m-col { flex-direction: column !important; align-items: stretch !important; }
	html body .m-col > * { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
	html body .m-fit { max-width: 100% !important; min-width: 0 !important; }
}