@charset "UTF-8";
/*
 * Smartphone adjustments for the cameo2017 theme (loaded after the theme CSS).
 * Everything is inside max-width:640px — the theme's own smartphone breakpoint —
 * so the desktop layout is untouched.
 */
@media screen and (max-width: 640px) {

	/* ---- root cause of the overlaps ----
	   jquery.s-plugins.js uniformHeight() writes a fixed inline height (e.g. height: 278px) on
	   section.main / aside.sub when the page is opened wider than 640px. After the window is
	   narrowed or the phone rotated, the content overflows that box and "Category" is drawn on
	   top of it. On smartphones every block must size to its content. */
	section.main,
	aside.sub,
	section.special.functions ul li { height: auto !important; }

	/* ---- 5. no horizontal overflow ----
	   theme rules use negative margins (-0.51%, -0.806em) and fractional widths (49.5% + 1%)
	   that end up a few px wider than the screen */
	#page { overflow-x: hidden; overflow-x: clip; }
	section.categories ul,
	section.items ul.items,
	section.item section.photos ul { margin-left: 0; margin-right: 0; }
	section.quality .spot .photos { overflow: hidden; }

	/* ---- 1. product grid (category / tag pages): two columns of white cards, as on the old site ---- */
	section.items { background: none; }
	section.items h1 { margin: 0 0 16px; border-bottom: solid 1px #000; }
	section.items ul.items {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 12px;
		padding: 0 12px;
	}
	section.items .items li,
	section.items .items li:nth-child(n) {
		float: none;
		clear: none;
		margin: 0;
		width: auto;
		font-size: 12px;
	}
	/* image, name, price stacked vertically and centred */
	section.items .items li a { display: flex; flex-direction: column; align-items: center; text-align: center; }
	section.items .items li img {
		display: block;
		box-sizing: border-box;
		margin: 0 auto 8px;
		border: 1px solid #eee;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		background: #fff;
	}
	section.items .items li em { display: block; padding: 0; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
	section.items .items li em:first-of-type { margin-bottom: 2px; font-weight: bold; font-size: 13px; }
	section.items ul.pager { margin-top: 18px; }
	/* the theme's smartphone pager also appears when everything fits on one page */
	/* (!important: the theme script shows it with an inline style) */
	section.items ul.pager:not(:has(li + li)) { display: none !important; }

	/* product detail photos: big first image + 3 thumbnails per row, no grey gaps */
	section.item section.photos ul {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		padding: 0 14px;
	}
	section.item section.photos li,
	section.item section.photos li:first-child {
		float: none;
		margin: 0;
		width: auto;
	}
	section.item section.photos li:first-child { grid-column: 1 / -1; margin-bottom: 6px; }
	section.item section.photos li img {
		display: block;
		margin: 0;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: contain;
		background: #fff;
	}
	section.item section.photos li:not(:first-child) img { box-sizing: border-box; border: 1px solid #eee; }

	/* ---- 2. "おすすめ商品": name and price under the image (no overlap), two columns ---- */
	.o_list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin: 28px 0 8px;
	}
	.o_list h2 { grid-column: 1 / -1; margin: 0; }
	.o_list .o_list_in { margin: 0; border: 1px solid #eee; }
	.o_list .o_list_in[hidden] { display: none; }
	.o_list .o_list_in a { display: block; color: inherit; }
	.o_list .o_img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
	.o_list .o_data { position: static; padding: 6px 8px; font-size: 12px; line-height: 1.45; }
	.o_list .o_title { margin-bottom: 2px; font-weight: bold; }
	section.item section.detail { margin-bottom: 1em; }
	/* space + divider between the product list / detail and the Category list below it
	   (only when the sidebar follows the content; on shop pages it sits above the list) */
	article.contents section.main ~ aside.sub { clear: both; margin-top: 40px; border-top: 1px solid #ddd; padding-top: 28px; }

	/* ---- 3. sidebar: Category / Tags ---- */
	aside.sub dl { margin-bottom: 1.8em; }
	aside.sub dt { margin-bottom: 0.6em; font-size: 15px; font-weight: bold; }
	aside.sub dd { margin: 0 0.3em; }
	aside dl.categories li { margin: 0; font-size: 14px; }
	aside dl.categories li a { display: block; padding: 0.45em 0; }
	aside dl.categories li ul { margin: 0 0 0.3em; }
	aside dl.categories li li { font-size: 13px; }
	aside dl.categories li li a { padding: 0.35em 0 0.35em 1em; }
	aside dl.tags ul { display: flex; flex-wrap: wrap; gap: 8px; }
	aside dl.tags li { display: block; margin: 0; }
	aside dl.tags li a { padding: 0.3em 0.7em; font-size: 12px; line-height: 1.4; }
	aside dl.goods li a { display: inline-block; padding: 0.3em 0; font-size: 14px; }

	/* ---- 4. footer ---- */
	/* the old Facebook "like" / Tweet widgets no longer render and left an empty grey bar */
	footer.footer > div { display: none; }
	footer.footer .nav-main { margin: 0 1em 1.5em; }
	footer.footer .nav-main li a,
	footer.footer .nav-main li em { padding: 0.85em 0.5em; font-size: 14px; }
	footer.footer .nav-main li li a { padding: 0.5em 0.5em 0.5em 1.5em; font-size: 13px; }
	footer.footer .nav-main li li a:before { margin-right: 0; }
	footer.footer .nav-sub { margin: 0 auto 1em; }
	footer.footer .copyright { padding: 1.5em 1em 5em; font-size: 11px; }
}