@charset "utf-8";
/*
 * スマートフォン表示用（簡易レスポンシブ）
 * PC 表示は変えず、画面幅 768px 以下のときだけ上書きする。
 * 2026-11 Refine
 */

.sp-menu-toggle { display: none; }

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

	html, body { min-width: 0; }
	body { background-image: none; font-size: 15px; }
	img { max-width: 100%; height: auto; }

	/* ---------- ヘッダー ---------- */
	#headwrapper { height: auto; width: 100%; }
	#header { width: auto; height: auto; padding: 8px 12px; position: relative; box-sizing: border-box; }
	#site-description { display: none; }
	#header .logo { position: static; width: 150px; height: auto; float: none; margin: 0; }
	#header .logo img { width: 150px; height: auto; }
	#site-title, #header .contact_banner { display: none; }

	/* ハンバーガーボタン */
	.sp-menu-toggle {
		display: block; position: absolute; top: 14px; right: 12px; z-index: 1001;
		width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
	}
	.sp-menu-toggle span,
	.sp-menu-toggle span::before,
	.sp-menu-toggle span::after {
		display: block; position: absolute; left: 10px; width: 24px; height: 2px; background: #333;
		transition: transform .2s, opacity .2s; content: "";
	}
	.sp-menu-toggle span { top: 21px; }
	.sp-menu-toggle span::before { left: 0; top: -8px; }
	.sp-menu-toggle span::after { left: 0; top: 8px; }
	.sp-menu-open .sp-menu-toggle span { background: transparent; }
	.sp-menu-open .sp-menu-toggle span::before { transform: translateY(8px) rotate(45deg); }
	.sp-menu-open .sp-menu-toggle span::after { transform: translateY(-8px) rotate(-45deg); }

	/* メニュー本体（画像スプライトをやめて文字で表示） */
	#header nav { display: none; }
	.sp-menu-open #header nav { display: block; }
	ul#menu { width: auto; height: auto; margin: 8px -12px 0; padding: 0; border-top: 1px solid #ddd; background: #fff; }
	ul#menu li { float: none; width: auto; margin: 0; border-bottom: 1px solid #ddd; }
	ul#menu li a {
		display: block; width: auto; height: auto; padding: 14px 16px;
		background: none !important; text-indent: 0; color: #333; text-decoration: none; font-size: 15px;
	}
	ul#menu li a::before { content: attr(title); }

	/* ---------- 本文 ---------- */
	#wrapper, #main, #container, #content, #primary, #secondary, #undercolumn,
	.one-column #content, .single-attachment #content {
		float: none; width: auto; height: auto; margin-left: 0; margin-right: 0; box-sizing: border-box;
	}
	#main { padding: 0 12px; }
	#content { margin: 0 0 24px; }
	#primary, #secondary { margin: 0 0 24px; text-align: center; }
	.entry-content table { width: 100% !important; max-width: 100%; table-layout: auto; }
	.entry-content th, .entry-content td { width: auto !important; padding: 8px 6px; word-break: break-all; }
	.entry-content th:first-child, .entry-content td:first-child { white-space: nowrap; word-break: normal; }
	.entry-content iframe, .entry-content embed, .entry-content video { max-width: 100%; }
	.wp-caption { max-width: 100% !important; }
	.alignleft, .alignright, img.alignleft, img.alignright { float: none; display: block; margin: 0 auto 12px; }

	/* トップ：商品の並び */
	.index_produxts_box { display: flex; flex-wrap: wrap; width: auto; height: auto; }
	.index_produxts_box > p { display: none; }
	.index_box, .index_box02 { float: none; width: 50%; height: auto; margin: 0 0 12px; box-sizing: border-box; padding: 4px; text-align: center; }
	.shopindex { width: auto; height: auto; float: none; }

	/* トップ：新着情報・バナー */
	.index_news_box, .news_box, .banner_box { width: auto; height: auto; }
	.news_text { float: none; width: auto; }
	.category_icon01, .category_icon02, .category_icon03 { float: none; margin-bottom: 4px; }
	.banner_left, .banner_right { float: none; width: auto; margin: 0 0 12px; text-align: center; }

	/* 一覧 */
	.listwrp { float: none; width: auto; height: auto; margin: 0 0 16px; }

	/* ---------- フッター ---------- */
	#footwrapper { height: auto; width: 100%; }
	#footernaviwrp { width: auto; padding: 16px 12px; box-sizing: border-box; }
	.footernavi01, .footernavi02, .footernavi03 { float: none; width: auto; margin: 0 0 20px; }
	#colophon, #footer-widget-area .widget-area, #site-info, #site-generator { float: none; width: auto; }
	.copy { box-sizing: border-box; width: auto; }
	.copy { padding: 8px 12px; }
}