@charset "utf-8";

/**
 * tpl_index.htm 専用（レスポンシブ）
 *
 * ブレークポイント（Bootstrap 5 / Tailwind 系の主流に準拠）
 * - ~639px  … スマホ（狭）
 * - 640–1023px … スマホ（大）・タブレット縦横（iPad mini 等）
 * - 1024px~ … PC（style.css の固定幅レイアウト）
 */

.modoru-mobile-only {
	display: none !important;
}

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

	html {
		-webkit-text-size-adjust: 100%;
	}

	body {
		font-size: 16px;
		text-align: left;
	}

	.modoru-mobile-only {
		display: block !important;
		order: 3;
		border-top: solid 2px var(--primary, #bf0000);
		padding: 10px 5px 8px 5px;
		margin: 0;
	}

	.modoru-mobile-only a:link,
	.modoru-mobile-only a:visited {
		color: #0a0a0a;
	}

	.modoru-mobile-only a:hover,
	.modoru-mobile-only a:active {
		color: #8b2942;
	}

	#wrapper {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		border-radius: 0;
		border-left: none;
		border-right: none;
		box-shadow: none;
	}

	#container {
		display: contents;
	}

	.headerdescription {
		order: 1;
		margin-top: 0;
		text-align: center;
	}

	#header {
		order: 2;
		height: auto;
		min-height: 0;
		text-align: center;
	}

	#header .head1 {
		float: none;
		padding: 10px 0 5px;
		text-align: center;
	}

	#header .head1 .top_logo {
		max-width: 160px;
		height: auto;
	}

	#header .head2 {
		display: none;
	}

	#contents {
		order: 4;
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0 5px;
		box-sizing: border-box;
	}

	#contents img:not([width="1"]) {
		max-width: 100%;
		height: auto;
	}

	#search_area {
		order: 5;
		float: none;
		width: 100%;
		padding: 15px;
		box-sizing: border-box;
		background: linear-gradient(135deg, var(--primary-dark, #8b0000) 0%, var(--primary, #bf0000) 100%);
		border-top: none;
	}

	#search_area .searchform {
		max-width: 100%;
	}

	/* 検索フォーム：縦積み・指タップしやすい高さ・16px で iOS のフォーカズーム回避 */
	#search_area form.search_f {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		gap: 12px;
		width: 100%;
	}

	#search_area .textin,
	#search_area .selectin,
	#search_area .searchbutton {
		width: 100%;
		max-width: 100%;
		margin: 0;
		box-sizing: border-box;
		font-size: 16px;
		min-height: 48px;
		padding: 12px;
		flex: none;
		line-height: 1.35;
	}

	#search_area .searchbutton {
		border-radius: 8px;
	}

	#aside {
		order: 6;
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0 5px 10px;
		box-sizing: border-box;
	}

	#footer {
		order: 7;
		float: none;
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 38px;
		padding: 12px 8px;
		margin-bottom: 0;
		box-sizing: border-box;
	}

	/* SNS（背景無し）：タイトルまでの縦方向の余白を確保 */
	#info .snsbtn,
	#contents > .snsbtn {
		padding: 12px 0 6px;
		margin-bottom: 36px;
	}

	#info .snsbtn .snsbtniti,
	#contents > .snsbtn .snsbtniti {
		gap: 8px;
	}

	/* 一覧ブロック：look_box 相当 */
	#info .kate {
		border-top: solid 2px var(--primary, #bf0000);
		padding: 10px 5px 8px 5px;
		margin-bottom: 0;
		font-size: inherit;
	}

	div.itemsu {
		float: none;
		padding-left: 10px;
		width: 100%;
		box-sizing: border-box;
	}

	#info div.sortnavi {
		float: none;
		width: 100%;
		text-align: left;
		padding: 14px 12px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	/* 上部検索と同様・縦積み／左ベースで整列 */
	#info div.sortnavi form.search {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
		align-items: stretch;
		justify-content: flex-start;
		gap: 12px;
		overflow-x: visible;
	}

	#info div.sortnavi form.search select,
	#info div.sortnavi .selectin {
		width: 100%;
		max-width: 100%;
		flex: none;
		min-width: 0;
		margin-left: 0;
		box-sizing: border-box;
		font-size: 16px;
		line-height: 1.35;
		padding: 12px;
		min-height: 48px;
	}

	#info div.sortnavi .searchbutton {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
		min-height: 48px;
		padding-left: 12px;
		padding-right: 12px;
		font-size: 16px;
		border-radius: 8px;
	}

	.ichiranBox {
		width: 100%;
		max-width: 100%;
		border-top: solid 2px var(--primary, #bf0000);
		margin-top: 10px;
		padding-top: 0;
		overflow: hidden;
		box-sizing: border-box;
	}

	.Box_line {
		display: none;
	}

	.item_img {
		float: left;
		width: 133px;
		text-align: left;
	}

	.item_img img {
		max-width: 128px;
		height: auto;
		padding-left: 5px;
		box-sizing: border-box;
	}

	.item {
		float: none;
		width: auto;
		margin-left: 141px;
		padding-right: 5px;
		line-height: 150%;
	}

	.item_name {
		padding: 8px 0 4px;
	}

	.itemPrice {
		float: none;
		width: auto;
		margin-left: 141px;
		clear: none;
		line-height: 150%;
		padding-bottom: 8px;
	}

	.itemPrice .red_b {
		font-weight: bold;
		color: var(--accent-price, #dc2626);
	}

	/* ページナビ sumaho 風 */
	div.pagenavi {
		font-size: 18px;
		text-align: center;
		margin: 5px auto 15px auto;
		padding-top: 10px;
		border-top: solid 2px var(--primary, #bf0000);
	}

	/* 商品詳細：sumaho item_box 系 */
	.s_aitemu {
		float: none;
		width: 100%;
		text-align: center;
		padding: 10px 0;
		border-top: solid 2px var(--primary, #bf0000);
		border-bottom: solid 2px var(--primary, #bf0000);
	}

	.s_aitemu img {
		max-width: 100%;
		height: auto;
	}

	.s_setumei {
		padding: 10px 5px;
		border-top: solid 2px var(--primary, #bf0000);
	}

	.s_title {
		font-weight: bold;
		padding: 10px 5px;
		line-height: 150%;
	}

	.s_title a {
		word-break: break-word;
	}

	.item_setumei {
		padding: 10px 5px;
		border-top: solid 2px var(--primary, #bf0000);
	}

	.item_setumei img {
		max-width: 100%;
		height: auto;
	}

	/* サイドバー：midasi + link-box 風 */
	#aside div.sideBox,
	#aside div.sideBox_info,
	#aside div.sideBox_qr {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		border: none;
		border-top: solid 1px var(--border-strong, #cbd5e1);
		background: #fff;
		margin-bottom: 0;
	}

	#aside div.sideBox h2,
	#aside div.sideBox_info h2,
	#aside div.sideBox_qr h2 {
		font-size: 18px;
		color: #ffffff;
		background: linear-gradient(135deg, var(--primary-dark, #8b0000) 0%, var(--primary, #bf0000) 100%);
		font-weight: bold;
		margin: 0;
		padding: 8px 8px;
		border-bottom: 2px solid #666666;
		text-align: left;
	}

	#aside div.sideBox_info h2 {
		font-size: 14px;
	}

	#aside div.sideBox ul {
		margin: 0;
		padding: 0;
		list-style: none;
		border-style: solid none none none;
		border-color: var(--border, #e2e8f0);
		border-width: 1px;
	}

	#aside div.sideBox ul li {
		display: block;
		font-size: 16px;
		line-height: 43px;
		border-color: var(--border, #e2e8f0);
		border-style: solid;
		border-width: 0 1px 1px 0;
		margin: 0;
		padding: 0;
		min-height: 0;
		gap: 0;
	}

	#aside div.sideBox ul li img {
		display: none;
	}

	#aside div.sideBox ul li a {
		display: block;
		padding-left: 43px;
		padding-right: 36px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		background-image: url("../img/imgR.png");
		background-repeat: no-repeat;
		background-position: 90% 50%;
		color: #0a0a0a;
		text-decoration: none;
	}

	#aside div.sideBox ul li a:active,
	#aside div.sideBox ul li a:hover {
		color: #8b2942;
	}

	#aside div.sideBox_info div {
		margin: 10px 8px;
		line-height: 1.5;
		background: var(--bg-muted, #f1f5f9);
		padding: 10px;
		border: solid 1px var(--border-strong, #cbd5e1);
	}

	#aside div.sideBox_qr {
		text-align: center;
		padding-bottom: 10px;
	}

	#aside div.sideBox_qr img {
		max-width: 100%;
		height: auto;
	}

	.shop_box {
		float: none;
		width: 100%;
	}
}

@media screen and (min-width: 1024px) {
	#wrapper {
		display: block;
	}

	/* #container は style.css で flex（DOM順補正）— display:block で上書きしない */
}

/* ---------- タブレット（640–1023px）：余白・タッチ領域・一覧の余裕 ---------- */
@media screen and (min-width: 640px) and (max-width: 1023px) {

	#wrapper {
		padding-left: max(0px, env(safe-area-inset-left, 0px));
		padding-right: max(0px, env(safe-area-inset-right, 0px));
	}

	#contents {
		padding-left: max(20px, env(safe-area-inset-left, 0px));
		padding-right: max(20px, env(safe-area-inset-right, 0px));
	}

	#aside {
		padding-left: max(20px, env(safe-area-inset-left, 0px));
		padding-right: max(20px, env(safe-area-inset-right, 0px));
	}

	#search_area {
		padding: 20px 24px;
	}

	#search_area .searchbutton {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}

	#header .head1 .top_logo {
		max-width: 200px;
	}

	div.pagenavi {
		font-size: 20px;
	}

	/* 一覧サムネを少し広げて読みやすく（タブレット幅で余白に合わせる） */
	.item_img {
		width: 160px;
	}

	.item_img img {
		max-width: 152px;
		padding-left: 8px;
	}

	.item,
	.itemPrice {
		margin-left: 172px;
	}

	#info div.sortnavi form.search select,
	#info div.sortnavi .selectin {
		max-width: 560px;
	}

	#info div.sortnavi .searchbutton {
		min-width: 140px;
		min-height: 48px;
	}
}

/* ---------- スマホ狭幅（~639px）：余白とページナビを画面幅に合わせる ---------- */
@media screen and (max-width: 639px) {

	#contents {
		padding-left: max(10px, env(safe-area-inset-left, 0px));
		padding-right: max(10px, env(safe-area-inset-right, 0px));
	}

	#aside {
		padding-left: max(10px, env(safe-area-inset-left, 0px));
		padding-right: max(10px, env(safe-area-inset-right, 0px));
	}

	#search_area {
		padding-left: max(12px, env(safe-area-inset-left, 0px));
		padding-right: max(12px, env(safe-area-inset-right, 0px));
	}

	/* 並び替え帯もノッチ込み・幅いっぱいの縦並び (#info が #contents 内のためコンテンツ余白と揃う) */
	#info div.sortnavi {
		padding-left: max(12px, env(safe-area-inset-left, 0px));
		padding-right: max(12px, env(safe-area-inset-right, 0px));
	}

	div.pagenavi {
		font-size: 16px;
		padding-left: 4px;
		padding-right: 4px;
	}

	div.pagenavi a,
	div.pagenavi span {
		margin-right: 0.15em;
		padding: 0.25em 0.45em;
	}

	#footer {
		padding-left: max(8px, env(safe-area-inset-left, 0px));
		padding-right: max(8px, env(safe-area-inset-right, 0px));
	}

}