/*
 * スマホ・タブレット向けの見た目（2026-10-29 コセイ追加）
 * 画面幅 999px 以下（スマホ・タブレット）だけに効く。パソコンの見た目は変えない。
 * 外すときは functions.php の repro-mobile の読み込み行と、このファイルを消す。
 */
/* 画面幅に関係なく効く修正（このファイルは版番号が自動で変わり、ブラウザの古い一時保存に左右されない） */
/* 小窓3の漫画：横に流す部品が以前から壊れていて画像が枠からはみ出していたため、縦に並べて枠に収める */
.outer-carousel, .outer-carousel2, #carousel, #carousel2 { height: auto !important; }
#carousel ul, #carousel2 ul { display: block !important; height: auto !important; }
#carousel ul li, #carousel2 ul li { float: none !important; display: block !important; margin: 0 0 8px !important; }
#carousel_prev01, #carousel_next01, #carousel_prev02, #carousel_next02 { display: none !important; }
#colorbox, #cboxWrapper, #cboxContent, #cboxLoadedContent, #cboxMiddleLeft, #cboxMiddleRight { height: auto !important; }
#cboxLoadedContent { overflow: visible !important; }
/* ECサイトのバナーを外したので、残る1つのボタンを中央に（パソコン） */
ul.btn-to-autolet { width: 300px; }
ul.btn-to-autolet li.btn-to-autolet-official a { margin-right: 0; }

@media screen and (max-width: 999px) {

	/* ---- 全体：横にはみ出さない ---- */
	html, body { min-width: 0 !important; overflow-x: clip !important; overflow-y: visible !important; height: auto !important; }
	body { font-size: 15px; }
	.site, #page, #main, .site-main, #primary, #content, .content-area, .site-content,
	.entry-header, .entry-content, .hentry, article {
		width: auto !important; max-width: 100% !important; min-width: 0 !important;
	}
	img { max-width: 100%; height: auto; }
	/* 動きの演出（回転して現れる等）は、画面外に追い出した文字まで回してページを異常に長くするため、スマホでは止める */
	.wow, .animated { animation: none !important; visibility: visible !important; }
	.dropping01 a, .dropping02 a, h3.start, .entry-title-top { overflow: hidden; }

	/* ---- 見出し帯（ロゴとメニュー） ---- */
	header.site-header { height: 380px; overflow: hidden; }
	.viewer, .viewer ul, .viewer ul li { width: 100% !important; height: 380px !important; }
	.viewer ul li.slide-first, .viewer ul li.slide-second { background-size: auto 380px; background-position: center bottom; }
	/* page-top.php 1行目の注釈の閉じ忘れで出る「-->」の文字を隠す（パソコンでは他の要素の下に隠れている） */
	#main.site-main { font-size: 0; line-height: 0; }
	#main.site-main > * { font-size: 15px; line-height: 1.5; }
	#scroller, .simply-scroll, .simply-scroll-container { display: none !important; }
	#cloud1, #cloud2, #cloud3, #cloud4, #cloud5, #cloud6, #cloud7 { top: -34px !important; }
	#cloud1 img, #cloud2 img, #cloud3 img, #cloud4 img, #cloud5 img, #cloud6 img, #cloud7 img { height: 26px; width: auto; }

	.obi-base { position: absolute; top: 0; left: 0; right: 0; height: auto; background: rgba(255,255,255,.95); box-shadow: 0 2px 4px rgba(0,0,0,.12); }
	.obi-base02 { display: none; }
	h1.site-title { float: none; width: auto; padding: 8px 12px 4px; }
	h1.site-title a { width: 220px; height: 30px; background-size: contain; }
	.navbar { float: none; max-width: none; padding: 0 8px 6px; }
	.main-navigation { margin: 0; min-height: 0; }
	.main-navigation .menu-toggle, .main-navigation .skip-link { display: none !important; }
	ul.nav-menu, div.nav-menu > ul { display: flex !important; flex-wrap: wrap; justify-content: center; }
	ul.nav-menu li { float: none; margin: 0; }
	ul.nav-menu li a,
	ul.nav-menu li.autolet a, ul.nav-menu li.ec a, ul.nav-menu li.company a, ul.nav-menu li.contact a {
		background: none !important; width: auto !important; height: auto; text-indent: 0;
		padding: 6px 9px; font-size: 13px; line-height: 1.3; color: #1e69ce; font-weight: bold;
	}

	/* トップの見出し画像 */
	h2.site-description {
		position: absolute; top: 150px; left: 4%; width: 92%; height: 27vw; max-height: 140px;
		background-size: contain; background-position: center top;
	}
	header.site-header > div[style] { width: auto !important; }
	h3.caption-top { top: -84px; left: 8px; width: 170px; height: 50px; background-size: contain; }
	ul.nav-menu li a,
	ul.nav-menu li.autolet a, ul.nav-menu li.ec a, ul.nav-menu li.company a, ul.nav-menu li.contact a { padding: 14px 8px !important; font-size: 13px !important; line-height: 16px !important; min-height: 44px; box-sizing: border-box; }

	/* 幅の広い町（town03）は文字の箱の部分を大きく見せる */
	.town03 { aspect-ratio: 918 / 335 !important; background-size: contain !important; background-position: center !important; }

	/* トップの青い帯 */
	header.entry-header-top { height: auto; padding: 10px 0; }
	.entry-title-top { top: 0; width: 94%; height: 18vw; background-size: contain; background-position: center; }


	/* 中：下層ページ上部の画像の小さな3行は読めないため、大見出しだけ画像で見せ、3行は文字で出す */
	h2.site-description { height: 13vw; overflow: visible; background-size: 100% auto; }
	h2.site-description::after {
		content: "まだ使える、まだ売れる製品をもう一度、ユーザー様のために再エントリーさせたい。ユーザー様が必要とする限り供給したい。そのための、新しい流通システムやネットショップの確立を目指します。";
		display: block; text-indent: 0; position: absolute; left: 0; right: 0; top: 14vw; font-size: 12.5px; line-height: 1.6; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); font-weight: bold; text-align: center;
	}

	/* 中：プライバシーポリシーの番号が左で切れる */
	#slideBox ol { padding-left: 1.6em; margin-left: 0; }
	/* 中：同意のチェック枠を大きく */
	div#trust-form input[type="checkbox"] { width: 44px; height: 44px; vertical-align: middle; margin-right: 6px; }
	div#trust-form ul li { line-height: 2; }
	/* 低：小窓の見出しが閉じるボタンにかからないように */
	#cboxLoadedContent .box-inner { padding-top: 46px !important; }

	/* ---- トップの「町」の並び：縦に積む ---- */
	.content-top { background: #cfe6a5 url(images/bg_contents_top4.png) 50% 0 / 220% auto repeat-y; height: auto !important; left: 0; padding: 20px 10px 30px; margin-bottom: 0; }
	h3.start { position: static; width: 260px; height: 82px; background-size: contain; margin: 0 auto 16px; }
	.town01, .town02, .town03, .town04, .town05 {
		position: relative !important; top: auto !important; left: auto !important; right: auto !important;
		width: 100% !important; height: auto !important; background-size: contain; background-position: center;
		margin: 0 auto 14px; visibility: visible !important;
	}
	.town01, .town02 { aspect-ratio: 469 / 330; }
	.town03 { aspect-ratio: 918 / 335; }
	.town04, .town05 { aspect-ratio: 468 / 335; }
	.town01 p.btn-detail, .town02 p.btn-detail, .town03 p.btn-detail, .town04 p.btn-detail, .town05 p.btn-detail { margin: 0; }
	.town01 p.btn-detail a, .town02 p.btn-detail a, .town03 p.btn-detail a, .town04 p.btn-detail a, .town05 p.btn-detail a {
		position: absolute; right: 4px; bottom: 4px; width: 64px; height: 64px; margin: 0 !important;
	}
	.town01 p.btn-detail img, .town02 p.btn-detail img, .town03 p.btn-detail img, .town04 p.btn-detail img, .town05 p.btn-detail img { width: 64px; height: 64px; }
	.dropping01 a, .dropping02 a { position: static; width: 150px; height: 176px; background-size: contain; margin: 0 auto 14px; }
	.dropping01, .dropping02 { width: auto !important; }
	body.home #content > article.page { display: none; }

	/* ---- ゴール ---- */
	.goal-area { height: auto; padding-bottom: 24px; }
	.goal { width: 100%; height: auto; padding-top: 37.1%; background-size: 100% auto; background-position: center top; }
	.goal p.autolet-paradise { position: absolute; top: 0; left: 50%; margin-left: -120px; width: 240px; height: 72px; background-size: contain; }
	.goal p.goal-car01, .goal p.goal-car02, .goal p.goal-car03, .goal p.goal-car04, .goal p.goal-car05 { display: none; }
	.goal p.goal-autolet { position: absolute; top: calc(37.1vw - 100px); left: 50%; margin-left: -45px; width: 90px; height: 104px; background-size: contain; }
	ul.btn-to-autolet { width: auto; margin: 16px 10px 0; }
	ul.btn-to-autolet li { float: none; }
	ul.btn-to-autolet li a { width: 100%; max-width: 300px; height: 80px; margin: 0 auto 10px !important; background-size: contain !important; background-position: center !important; }

	/* ---- フッター ---- */
	.contact-area { height: auto; padding: 30px 10px; }
	p.btn-to-contact a { width: 100%; max-width: 412px; height: 0; padding-top: 33.7%; background-size: contain; }
	p.footer-logo a, p.footer-logo-home a { width: 280px; height: 40px; background-size: contain; }
	#bg-footer .site-info { width: auto; padding: 20px 10px; }
	p.copyright { font-size: 12px; }

	/* ---- 下層ページ（会社概要・お問い合わせ など） ---- */
	.entry-content[style] { top: 0 !important; padding: 16px 12px; }
	h3.title-co, h3.title-contact, h3.text-pp { max-width: 100%; background-size: contain; }
	p.text-co { width: auto; height: auto; padding: 0; background: none; margin: 16px 0 20px; text-indent: 0; font-size: 15px; line-height: 1.8; color: #333; }
	table.company-info, table.company-info tbody, table.company-info tr, table.company-info th, table.company-info td { display: block; width: 100% !important; box-sizing: border-box; }
	table.company-info th, table.company-info td { padding: 10px 12px; }
	#slideBox { padding: 14px; font-size: 14px; }
	.text-thanks-contact { width: 100%; height: 0; padding-top: 20%; background-size: contain; }

	/* お問い合わせフォーム：1列に */
	div#trust-form.contact-form table, div#trust-form.contact-form tbody, div#trust-form.contact-form tr,
	div#trust-form.contact-form th, div#trust-form.contact-form td { display: block; width: 100% !important; max-width: none !important; box-sizing: border-box; }
	div#trust-form.contact-form table { width: 100% !important; }
	div#trust-form.contact-form table th { text-align: left; padding: 10px 12px 6px; border-bottom: 0; }
	div#trust-form.contact-form table td { padding: 8px 12px 14px; }
	div#trust-form input[type="text"], div#trust-form textarea, div#trust-form select { width: 100% !important; max-width: 100%; box-sizing: border-box; font-size: 16px; }
	div#trust-form input[type="submit"] { font-size: 16px; padding: 10px 24px; }

	/* ---- 「詳細」の小窓：中身をすべて画面幅に収める ---- */
	#cboxLoadedContent { width: auto !important; max-width: 100% !important; overflow: visible !important; }
	#colorbox, #cboxWrapper, #cboxContent, #cboxLoadedContent, #cboxMiddleLeft, #cboxMiddleRight { height: auto !important; }
	#cboxLoadedContent * { max-width: 100%; box-sizing: border-box; }
	#cboxClose { top: -14px !important; right: -10px !important; width: 44px !important; height: 44px !important; background-size: contain !important; }
	.box-inner { padding: 8px; border-width: 5px; }
	.box-area { width: auto; padding-bottom: 20px; }
	.box-area p, .box-text-area p { margin-left: 0 !important; font-size: 15px; line-height: 1.7; }
	.white-line, .box2-white-line { width: auto !important; margin: 16px 0 !important; }
	.box1-img { width: 100%; height: 0; padding-top: 31.7%; background-size: contain; }
	h3.box1-title { width: 100%; height: 0; padding-top: 10.6%; background-size: contain; margin: 12px 0; }
	.box2-img { float: none; width: 60%; height: 0; padding-top: 94.5%; background-size: contain; margin: 0 auto; }
	.box-text-area { float: none; width: auto; }
	h3.box2-title { width: 100%; height: 0; padding-top: 29.2%; background-size: contain; margin: 14px 0 0; }
	.outer-carousel, .outer-carousel2, #carousel, #carousel2 { margin: 16px auto; width: auto !important; max-width: 300px; height: auto !important; box-shadow: none; border: 0; }
	#carousel ul, #carousel2 ul { display: block; width: auto !important; height: auto !important; overflow: visible; left: 0 !important; position: static !important; }
	#carousel ul li, #carousel2 ul li { float: none; display: block; width: auto !important; margin: 0 0 10px; }
	#carousel_prev01, #carousel_next01, #carousel_prev02, #carousel_next02 { display: none !important; }
	.box3-text { position: static; width: auto; }
	h3.box3-text-title { width: 100%; height: 0; padding-top: 24.5%; background-size: contain; }
	h3.box3-text-title2 { width: 100%; height: 0; padding-top: 24.3%; background-size: contain; }
	h3.box4-title, h3.box5-title { width: 100%; height: 0; padding-top: 12%; background-size: contain; }
	h3.box6-title { width: 100%; height: 0; padding-top: 13%; background-size: contain; }
	h3.box7-title { width: 100%; height: 0; padding-top: 11.7%; background-size: contain; }
	p.to-form a { width: 100%; max-width: 402px; height: 0; padding-top: 22.9%; background-size: contain; margin: 16px auto 0; }
	.town1-icon, .town2-icon, .town3-icon, .town4-icon, .town5-icon, .town6-icon,
	p.autolet-car01, p.autolet-car03, p.autolet-car05, p.autolet-car06 { display: none !important; }
	#cboxLoadedContent img { max-width: 100% !important; height: auto !important; }
}

/* タブレット：中身を読みやすい幅に収める */
@media screen and (min-width: 600px) and (max-width: 999px) {
	.content-top > #primary, .town01, .town02, .town03, .town04, .town05 { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
	.entry-content[style] { max-width: 760px !important; margin: 0 auto; }
	header.site-header, .viewer, .viewer ul, .viewer ul li { height: 420px !important; }
	.viewer ul li.slide-first, .viewer ul li.slide-second { background-size: auto 420px; }
	h2.site-description { top: 120px; }
	h3.caption-top { top: -110px; width: 230px; height: 67px; }
	.goal { max-width: 700px; margin: 0 auto; padding-top: 260px; }
	.goal p.goal-autolet { top: 160px; }
	.town03 { aspect-ratio: 918 / 335 !important; background-size: contain !important; background-position: center !important; }
}

/* スマホ（599px以下）だけ：横長の町（town03）は文字で見せる */
@media screen and (max-width: 599px) {
	/* 高3：横長の町（town03）の絵の中の文字はスマホでは小さすぎるため、絵の代わりに文字で見せる */
	.town03 { aspect-ratio: auto !important; background: #fff !important; border: 5px solid #3596e5; border-radius: 10px; padding: 16px 16px 84px; height: auto !important; }
	.town03::before {
		content: "単なる安売りはしません!!\Aオートレットではただ安いだけの低品質な商品は扱いません。品質が確かな商品を納得価格でご提供します。\Aその商品、安いけど大丈夫でしょうか？その商品が安いことにこしたことはありません。しかし、ちょっと待ってください！そこには思わぬ落とし穴があります。";
		white-space: pre-line; display: block; font-size: 16px; line-height: 1.7; color: #1e3f8f; font-weight: bold;
	}
	.town03 p.btn-detail a { right: 50% !important; margin-right: -32px !important; bottom: 10px !important; }

}