/*
 * News detail (app/views/news/view.php) — mobile overflow repair.
 *
 * Root cause (shared styles.css + third-party ads):
 *   @media (max-width: 750px) { .container { width: 710px } }
 *   fixed header search (568px), footer logo (400px), footer__genre
 *   negative margins, share__items margin-left:-20px, and AdSense
 *   #aswift_*_host hosts with inline widths up to ~1750px / negative left.
 *
 * Scope: body.ar-news-detail only, inside max-width:750px.
 * Desktop (≥751px) untouched. Ads stay visible (no display:none).
 * Do not clip the document via body-level horizontal overflow hiding —
 * fix element geometry instead.
 */

@media screen and (max-width: 750px) {
	body.ar-news-detail,
	body.ar-news-detail .container,
	body.ar-news-detail .contents,
	body.ar-news-detail .main,
	body.ar-news-detail .sidebar,
	body.ar-news-detail .post,
	body.ar-news-detail .header,
	body.ar-news-detail .footer,
	body.ar-news-detail footer {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	body.ar-news-detail .container {
		padding-left: 16px;
		padding-right: 16px;
	}

	/*
	 * Initial mobile chrome: expanded common nav+genre push first CTA below
	 * the fold (~754px). Existing #toggleNav / #headerNavClose JS toggles
	 * .header__nav--fixed; keep that path and collapse only the closed state.
	 */
	body.ar-news-detail #headerNav:not(.header__nav--fixed),
	body.ar-news-detail .header__genre {
		display: none !important;
	}

	body.ar-news-detail .header__menu {
		display: block !important;
	}

	body.ar-news-detail .main,
	body.ar-news-detail .sidebar {
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.ar-news-detail .post {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	body.ar-news-detail .post .content,
	body.ar-news-detail .post .title,
	body.ar-news-detail .post .meta,
	body.ar-news-detail .publisher,
	body.ar-news-detail .publisher__content,
	body.ar-news-detail .follow,
	body.ar-news-detail .tags {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	body.ar-news-detail .post .content img,
	body.ar-news-detail .post img,
	body.ar-news-detail .publisher__image img {
		max-width: 100% !important;
		height: auto !important;
	}

	body.ar-news-detail .post .content iframe,
	body.ar-news-detail .post .content embed,
	body.ar-news-detail .post .content video,
	body.ar-news-detail .post .content object {
		max-width: 100% !important;
	}

	body.ar-news-detail .post .content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* Purchase CTAs in CMS HTML — wrap into viewport; do not alter href/tracking. */
	body.ar-news-detail .post .content a[data-ar-campaign="sato_archive_news_20260809"] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		max-width: 100%;
		min-height: 44px;
		padding: 12px 16px;
		white-space: normal;
		text-align: center;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Related / around — fixed px widths in styles.css exceed phone viewports. */
	body.ar-news-detail .news li a {
		display: block;
		max-width: 100%;
		box-sizing: border-box;
	}

	body.ar-news-detail .news li .image {
		display: block;
		width: 100% !important;
		max-width: 200px;
	}

	body.ar-news-detail .news li .content {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	body.ar-news-detail .around-post li {
		display: block;
		margin: 0 0 15px 0 !important;
		max-width: 100%;
	}

	body.ar-news-detail .around-post li a,
	body.ar-news-detail .around-post li div.empty {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	body.ar-news-detail .sidebar .reviews li .content,
	body.ar-news-detail .sidebar .reviews li a {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/*
	 * AdSense hosts: Google injects #aswift_N_host with inline width/left
	 * (measured up to w1750 / left -163). Override geometry; keep ads visible.
	 */
	body.ar-news-detail .banner,
	body.ar-news-detail .banners,
	body.ar-news-detail .banners ul,
	body.ar-news-detail .banners li,
	body.ar-news-detail .adsbygoogle,
	body.ar-news-detail ins.adsbygoogle {
		position: relative !important;
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
		right: auto !important;
		box-sizing: border-box !important;
		overflow: hidden;
	}

	body.ar-news-detail .banners ul {
		padding: 0 !important;
	}

	body.ar-news-detail .banners li {
		margin: 0 0 15px !important;
	}

	body.ar-news-detail [id^="aswift_"],
	body.ar-news-detail [id^="aswift_"] iframe,
	body.ar-news-detail iframe[id^="aswift_"],
	body.ar-news-detail .adsbyyahoo,
	body.ar-news-detail iframe {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		left: 0 !important;
		right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	/* Header search chain — styles.css sets .header__search { width:568px/640px }. */
	body.ar-news-detail #search.header__search,
	body.ar-news-detail .header__search {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box !important;
	}

	body.ar-news-detail #search.header__search form,
	body.ar-news-detail #search.header__search label,
	body.ar-news-detail #search.header__search input,
	body.ar-news-detail .header__search form,
	body.ar-news-detail .header__search label,
	body.ar-news-detail .header__search input,
	body.ar-news-detail .header__search__input {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	body.ar-news-detail .header__search__button {
		right: 16px !important;
		left: auto !important;
	}

	/* Header logo chain — styles.css sets .header__logo a { width:568px }. */
	body.ar-news-detail .header__logo > div,
	body.ar-news-detail .header__logo > div > a {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	/* Footer logo (400px) and genre (margin:0 -20px, dd width:340px). */
	body.ar-news-detail .footer__logo,
	body.ar-news-detail .footer__logo a {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box !important;
	}

	body.ar-news-detail .footer__logo a {
		background-size: contain !important;
		background-position: center top !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		/* Keep sprite aspect (~400x65) while width is fluid. */
		padding-top: 16.25% !important;
		height: 0 !important;
	}

	body.ar-news-detail .footer__genre {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
		box-sizing: border-box !important;
	}

	body.ar-news-detail .footer__genre__dd {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}

	/*
	 * Fixed share bar — .share__items { margin-left:-20px } pulls LI to x-20.
	 * Contain within viewport without body overflow clipping.
	 */
	body.ar-news-detail .share--fixed {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		box-sizing: border-box !important;
	}

	body.ar-news-detail .share--fixed .share__items {
		display: flex !important;
		flex-wrap: nowrap;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	body.ar-news-detail .share--fixed .share__item {
		width: 25% !important;
		max-width: 25% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	body.ar-news-detail .share--fixed .share__item a {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body.ar-news-detail .follow__items,
	body.ar-news-detail .share__items {
		flex-wrap: wrap;
		max-width: 100%;
	}

	body.ar-news-detail .share__item,
	body.ar-news-detail .follow__item {
		min-width: 0;
		box-sizing: border-box;
	}
}