@charset "utf-8";
/* CSS Document */
/* ==========================================================================0. ページ全体の大枠・基本設定========================================================================== */
#outer {
	width: 1260px;
	margin: 0 auto;
}
/* マウスオーバーで不透明度を調整 */
#outer a:hover,.gallery-btn:hover,.tokusyu li:hover,.nav-selection-btn:hover {
	opacity: 0.7;
	transition: opacity 0.2s;
}
/* 全体の共通フォント設定 */
#outer .container {
	font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Kosugi Maru", "Yu Gothic", sans-serif;
	font-weight: bold;
	margin: 10px;
	color: #6B0000;
}
/* ==========================================================================1. のエリア（見出し・ナビ・種類一覧ギャラリー）========================================================================== */
/* --- 1-1.最上部の大見出し帯 --- */
#outer .top_parts {
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: #FFB1D3;
	margin-bottom: 45px;
	border-radius: 12px !important;
}
#outer .top_parts .top_txt {
	width: 54%;
	color: #FFFFFF!important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 0 0 25px;
}
#outer .top_parts .top_txt h1 {
	font-size: 2.0em;
	font-weight: bold;
	padding-bottom: 5px;
	line-height: 1.2;
}
#outer .top_parts .top_txt p {
	font-size: 1.1em;
	padding-top: 10px;
	border-radius: 12px;
}
#outer .top_parts .top_img {
	width: 44%;
}
#outer .top_parts .top_img img {
	width: 100%;
}
/* --- 1-2.上部2ナビゲーション選択ボタン（種類から選ぶ／サイズから選ぶ） --- */
#outer .nav-selection-container {
	display: flex;
	width: 100%;
	border-top: 1px solid #FF97B1;
	border-bottom: 1px solid #FF97B1;
	border-left: 1px solid #FF97B1;
	box-sizing: border-box;
	background-color: #FF97B1;
	overflow: hidden;
	border-radius: 12px;
}
#outer .nav-selection-btn {
	flex: 1;
	display: block;
	text-align: center;
	padding: 14px 10px;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF!important;
	text-decoration: none;
	border-right: 1px solid #FF90BC;
	box-sizing: border-box;
}
#outer .nav-selection-btn:first-child {
	border-right: 1px solid #FF5187;
}
/* --- 1-3.「種類から選ぶ」中間タイトル帯 --- */
#outer .gallery-main-section-title {
	width: 100%;
	margin: 10px 0 30px 0;                  /* 下の余白を少し調整 */
	padding: 0 0 8px 0 !important;          /* 線と文字の間の隙間を設定 */
	background-color: transparent !important;/* 塗りつぶし背景を透明（消去）にします */
	color: #6B0000 !important;              /* 文字色を読みやすい濃い色にします */
	font-size: 20px;
	font-weight: bold;
	text-align: left !important;            /* 左寄せにします（中央寄せがいい場合は center のままでOK） */
	border: none !important;                /* 元の上下枠線をリセット */
	border-bottom: 3px solid #8FD7F5 !important; /* 2枚目の画像のような下線を引きます（色は自由に指定OK） */
	box-sizing: border-box;
	border-radius: 0 !important;            /* 角丸を消します */
}
/* --- 1-4.「種類一覧」4分割画像ギャラリー --- */
#outer .product-gallery-container {
	width: 100%;
	box-sizing: border-box;
	font-family: sans-serif;
}
#outer .gallery-main-title {
	font-size: 20px;
	font-weight: bold;
	margin: 0 0 10px 0;
	color: #6B0000;
	text-align: left;
}
#outer .gallery-grid {
	display: flex;
	width: 100%;
	color: #6B0000;
	border-top: 1px solid #FF3894;
	border-left: 1px solid #FF3894;
	box-sizing: border-box;
}
#outer .gallery-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	border-right: 1px solid #FF3894;
	border-bottom: 1px solid #FF3894;
	box-sizing: border-box;
	background-color: #ffffff;
}
#outer .gallery-sub-title {
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 10px 5px;
	border-bottom: 1px solid #ffffff;
}
#outer .gallery-img-box {
	background-color: #ffffff;
	padding: 20px 10px;
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
#outer .gallery-img-box img {
	max-width: 100%;
	height: auto;
	display: block;
}
#outer .gallery-btn {
	display: block;
	background-color: #FF97B1;
	color: #FFFFFF!important;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	padding: 12px 5px;
	border-top: 1px solid #ffffff!important;
}
/* --- 1-5.「サイズと容量から選ぶ」中間タイトル帯 --- */
#outer .category_btn {
	width: 100%;
	font-size: 1.2em;
	margin: 15px auto 60px;
}
#outer .category_btn a {
	color: #FFFFFF !important;
	border-bottom: solid 3px #ffffff;
	text-decoration: none !important;
	position: relative;
	display: block;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	padding: 10px;
	font-weight: bold;
	border-radius: 100vh;
	background-color: #FF82B4;
	transition: background-color 0.3s ease !important;
}
/* ==========================================================================各商品共通：左右2分割レイアウト設定（崩さずに外枠だけ消去）========================================================================== */
#outer .section-title {
	font-size: 18px;
	font-weight: bold;
	margin: 0.5px 0 0.5px 0;
	padding: 10px 16px;
	color: #9B0000;
	border: 2px solid #FF97B1;
	border-radius: 10px;
	background-color: #FFC0D3;
	display: inline-block;
}
/* 左右を2分割する親箱 */
#outer .content-wrapper {
	display: table;
	width: 100%;
	box-sizing: border-box;
	border: none !important;
	background-color: #FFD2E0;
	border-radius: 12px;
	margin-top: 0 !important;
}
/* 左側：商品画像が入る共通エリア */
#outer .image-area {
	display: table-cell;
	width: 35%;
	vertical-align: middle;
	text-align: left;
	padding-left: 0;
	border-right: 0;
	position: relative;
	background-color: transparent;
}
/* 左側の画像自体の設定 */
#outer .product-img {
	max-width: 100%;
	max-height: 100%;
	display: inline-block;
	margin: 0;
}
/* 右側：表が入る共通エリア */
#outer .table-area {
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	text-align: left;
	padding: 0;
	background-color: transparent;
	margin-bottom: 25px !important;
}
/* ==========================================================================H-PET食品容器アルミ蓋（ドッキング表）========================================================================== */
#outer .table-title {
	font-size: 16px;
	margin-bottom: 2px;
	padding-left: 2px;
}
/* アルミ蓋の表本体 */
#outer .joint-table {
	border-collapse: collapse;
	margin: 30px;
	background-color: #FFD2E0;
	width: px !important;
	max-width: 100%;
}
/* アルミ蓋の表の文字が入るセル */
#outer .joint-table td {
	border: 1px solid #FF3894;
	padding: 10px 8px;
	font-size: 16px;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	color: #ffffff!important;
}
/* ケース（角型・長角）などのサイズが入るセル */
#outer .data-table td.size,#outer .data-table td.capacity {
	text-align: center !important;
}
/* サイズ（リンク）の入るマス */
#outer .joint-table td.size-cell {
	text-align: center;
	background-color: #ffffff;
}
/* 右下の透明な余白マス */
#outer .joint-table td.empty-cell {
	border: none;
	border-left: 1px solid #FF90BC;
	background: #FFD2E0;
}
/* 最終行の左側、枠線を表示しない空のセル用 */
#outer .data-table td.empty-cell {
	border-right: 1px solid #FF90BC !important;
	border-bottom: 1px solid #FF90BC !important;
}
/* ==========================================================================ページ最下部（人気ランキング・おすすめ・関連記事）========================================================================== */
#recommend_block .ec-shelfRole {
	margin-bottom: 0px;
}
#recommend_block {
	border-top: inherit;
}
#outer .column {
	width: 100%;
	margin-bottom: 45px;
	color: #FF5187;
	background-color: #FFFFFF;
	border: none !important;
	border-radius: 12px;
	padding: 0 10px 0 10px;
	box-sizing: border-box;
	margin-top: 0 !important;
}
#outer .column h3 {
	font-size: 1.5em;
	font-weight: bold;
	margin: 0.5em auto;
	color: #6B0000;
	text-align: center;
}
#outer .contents_02 {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}
#outer .contents_02 .item_ {
	width: 48%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	margin: 0.5em;
	
}
#outer .contents_02::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
}
#outer .contents_02 .item_ ul.btns_2 {
	margin-top: auto;
	margin-bottom: 10px;
	padding: 0;
	list-style: none;
	list-style-type: none;
}
#outer .contents_02 .item_ ul.btns_2 li.btn_gazou_2 {
	position: relative;
}
#outer .contents_02 .item_ ul.btns_2 li.btn_gazou_2 a {
	display: block;
	position: relative;
	padding: 10px;
	color: #ffffff !important;
	background-color: #FF97B1 !important;
	font-weight: bold;
	border-radius: 20px;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
}
/* 下部特集バナー一覧 */
#outer .column ul.tokusyu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	list-style: none;
	margin: 0 auto;
}
#outer .column ul.tokusyu li {
	width: 23%;
	margin-bottom: 10px;
}
#outer .column ul.tokusyu li img {
	width: 100%;
	height: auto;
}
#outer .column ul.tokusyu::before {
	content: "";
	display: block;
	width: 23%;
	order: 1;
}
#outer .column ul.tokusyu::after {
	content: "";
	display: block;
	width: 23%;
}
/* ==========================================================================下の3つの表をバラバラに、単独で編集するための個別設定========================================================================== */
#ps-table .data-table {
	width: 230px !important;
	max-width: 100%;
	margin-left: 30px !important;
	margin-right: auto !important;
}
#entou-table .data-table {
	width: 380px !important;
	max-width: 100%;
	margin-left: 30px !important;
	margin-right: auto !important;
}
#kakugata-table .data-table {
	width: 280px !important;
	max-width: 100%;
	margin-left: 30px !important;
	margin-right: auto !important;
}
#outer h2.uline_b {
	color: #6B0000 !important;
	font-size:25px;
	font-weight: bold;
	text-align: center;
}
#outer .contents_02 .item_ .shizai-img-box {
	width: 100%;
	text-align: center;
	padding: 15px 0 ;
	box-sizing: border-box;
}
#outer .contents_02 .item_ .shizai-img-box img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}
/* 【重要修正】古い「ピン留め（position）」の命令を無効化しました */
#outer .container {
	position: static !important;
	padding-bottom: 0 !important;
	overflow: visible !important;
}
/* ==========================================================================【新アプローチ】独立丸角ボタン設定========================================================================== */
/* 1. ボタンを包む外箱 */
#outer .custom-rounded-btn {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 50px 0 !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
	position: static !important;
	list-style: none !important;
	list-style-type: none !important;
}
/* 2. 中のリンク（ボタン本体） */
#outer .custom-rounded-btn a {
	display: block !important;
	background-color: #FF82B4 !important;
	/* 淡いピンク色 */
	color: #ffffff !important;
	font-weight: bold !important;
	text-align: center !important;
	text-decoration: none !important;
	font-size: 1.1em !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 10px 0 !important;
	box-sizing: border-box !important;
	text-indent: 0 !important;
	border-radius: 12px !important;
}
/* === PET円筒ケースの数字を中央揃えにする設定 === */
#outer #entou-table .num-cell {
	text-align: center !important;
	vertical-align: middle !important;
}
#outer #entou-table td[style*="background-color"] {
	text-align: center !important;
	vertical-align: middle !important;
}
/* ==========================================================================【1枚目デザイン維持・2枚目表差し替え】専用デザインCSS========================================================================== */
/* 見出し：ピンクの角丸デザイン */
#outer h3.section-title {
	font-size: 18px !important;
	font-weight: bold !important;
	margin: 0 0 0 0 !important;
	padding: 10px 16px !important;
	color: #9B0000 !important;
	border: 2px solid #FF97B1 !important;
	border-radius: 10px !important;
	background-color: #FFF0F5 !important;
	display: inline-block !important;
	clear: both !important;
}
/* 1枚目のピンクの背景枠（カヌレ・ドーナツ画像の背景色 #FFC0D3 に完全に統一） */
#outer .pink-product-box {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;


	background-color: #FFD2E0 !important;
	/* ★指示通り画像と同じ背景ピンク色に固定 */
	border-radius: 15px !important;
	padding: 30px !important;
	margin-bottom: 15px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	flex-wrap: nowrap !important;
	clear: both !important;
}
/* 左側：商品画像エリア */
#outer .product-image-container {
	flex: 0 0 38% !important;
	width:38% !important;
	max-width: 38% !important;
	margin-right: 4% !important;
	box-sizing: border-box !important;
	display: block !important;
}
#outer .product-image-container img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
	margin: 0 !important;
}
/* 右側：表のエリア */
#outer .product-table-container {
	flex: 0 0 58% !important;
	width: 58% !important;
	max-width: 58% !important;
	box-sizing: border-box !important;
	display: block !important;
}
/* 詳細表のスタイル */
#outer .detail-data-table {
	width: 100% !important;
	max-width: 100% !important;
	border-collapse: collapse !important;
	background-color: #ffffff !important;
	table-layout: auto !important;
	margin: 0 !important;
}
/* 表のヘッダー */
#outer .detail-data-table th {
	background-color: #FF6699 !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: bold !important;
	padding: 10px 8px !important;
	border: 1px solid #FF99BB !important;
	text-align: center !important;
}
/* 表のマス目 */
#outer .detail-data-table td {
	font-size: 16px !important;
	font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Kosugi Maru", "Yu Gothic", sans-serif !important;
	font-weight: bold !important;
	color: #333333 !important;
	padding: 10px 8px !important;
	border: 1px solid #FF99BB !important;
	text-align: center !important;
	line-height: 1.4 !important;
	background-color: #ffffff !important;
}
/* 「65口径」「85口径」の部分 */
#outer .detail-data-table td.spec-cell {
	background-color: #FFB3CC !important;
	color: #ffffff !important;
	font-size: 16px !important;
	vertical-align: middle !important;
}
/* PET entou table target attribute force color */
#outer .detail-data-table td[number="name-cell"] {
	background-color: #FFB3CC !important;
	color: #FFFFFF !important;
}
/* PET entou table right bottom empty cells transparent */
#outer .detail-data-table td.empty-cell {
	background-color: transparent !important;
	border: none !important;
}
/* ==========================================================================【完全解決】表のコンテナの背景も透明化し、表自体を右端にぴったり合わせる========================================================================== */
/* 表を包む右側の箱自体を透明にし、中の表を横幅100%に広げます */
#outer div.product-table-container {
	background: transparent !important;
	background-color: transparent !important;
}
#outer table.detail-data-table {
	width: 100% !important;
	margin: 0 !important;
}
/* 右下2マスの裏側を完全に透過させます */
#outer table.detail-data-table td.empty-cell {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
}
/* 右下3マスの裏側と枠線を完全に透過させます */
#outer table.detail-data-table td.empty-cell {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-top: none !important;
	border-bottom: none !important;
	border-left: none !important;
	border-right: none !important;
}
/* ==========================================================================【根本解決】一括の白色指定を打ち消し、右下の余白マスを完全透過========================================================================== */
/* tableの背景に白が敷かれているのを透明化します */
#outer table.detail-data-table {
	background-color: transparent !important;
}
/* 全てのマスへの一括白色指定を上書きし、empty-cellのみ背景と枠線を完全消去します */
#outer table.detail-data-table td.empty-cell {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
/* 下部：「商品一覧はこちら」のピンクの横長ボタン */
#outer .list-button-container {
	width: 100% !important;
	text-align: center !important;
	margin-bottom: 40px !important;
}
#outer .pink-list-button {
	display: block !important;
	width: 100% !important;
	background-color: #FF80A8 !important;
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: bold !important;
	text-align: center !important;
	padding: 12px 0 !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	transition: opacity 0.2s;
}
/* ==========================================================================ご指示項目：表の中のリンク色の完全指定 ＆ 不要なホバー解除========================================================================== */
/* �@ すべての表の中の商品名リンク（古い指定も含めて強制上書き） */
#outer .detail-data-table td.name-cell a,#outer .joint-table td.size-cell a,#outer td a,#outer table a {
	color: #00A3FF !important;
	/* ★指示通りの青色に固定 */
	text-decoration: underline !important;
	font-size: 16px !important;
}
/* �A リンクにマウスを置いたとき（ホバー時）の設定 */
/* ピンクに変わってしまっていた不要な命令を完全に打ち消し、青色のままキープします */
#outer .detail-data-table td.name-cell a:hover,#outer .joint-table td.size-cell a:hover,#outer td a:hover,#outer table a:hover {
	color: #00A3FF !important;
	/* ★ホバー時もピンクに変えず、指示通りの青を維持 */
	background-color: transparent !important;
	opacity: 0.8 !important;
	/* 触れたことがわかるよう少しだけ優しく光らせます */
}
/* ==========================================================================ご指示項目：商品一覧はこちら ボタンを触った時に #FF5187 にする========================================================================== */
#outer .pink-list-button:hover,#outer .custom-rounded-btn a:hover {
	background-color: #FF5187 !important;
	/* ★指示通りのピンク色に変更 */
	color: #ffffff !important;
	opacity: 1 !important;
}
/* ==========================================================================【PC用】「サイズと容量から選ぶ」の下の大きな隙間をギュッと詰める========================================================================== */
/* 背景が水色（#8FD7F5）の見出しだけを狙って、下側の余白を 15px まで縮めます */
#outer .gallery-main-section-title[style*="#8FD7F5"] {
	margin-bottom: 0 !important;
	/* ★この数字を小さくするほど、下の表の箱が上に詰まります */
}
/* ==========================================================================768px以下のスマートフォン向け表示設定========================================================================== */
@media screen and (max-width: 768px) {
	#outer {
		width: 100%;
	}
	#outer .pink-product-box {
		flex-wrap: wrap !important;
		padding: 15px !important;
		gap: 20px !important;
	}
	#outer .product-image-container,#outer .product-table-container {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	/* 見出し */
	#outer .top_parts {
		flex-direction: column-reverse;
	}
	#outer .top_parts .top_txt {
		width: 100%;
		padding: 15px;
	}
	#outer .top_parts .top_txt h1 {
		font-size: 1.2em;
		padding: 5px 5px 0 5px;
	}
	#outer .top_parts .top_txt p {
		font-size: 1em;
		padding: 5px;
	}
	#outer .top_parts .top_img {
		width: 100%;
	}
	#outer .top_parts .top_img img {
		width: 100%;
	}
	/* カテゴリボタン設定 */
	#outer .category_btn {
		width: 95%;
		font-size: 1.1em;
		margin: 15px auto 40px;
	}
	#outer .category_btn a {
		padding: 6px;
	}
	/* 2並びナビゲーションボタン */
	#outer .nav-selection-container {
		display: flex !important;
	}
	#outer .nav-selection-btn {
		padding: 10px 5px !important;
		font-size: 14px !important;
		display: inline-flex !important;
		justify-content: center !important;
		align-items: center !important;
		min-height: 54px !important;
	}
	/* 関連記事のスマホ設定 */
	.column {
		width: 100%;
	}
	.column h3 {
		padding: 5px;
		font-size: 1.3em;
		margin: 0;
	}
	.contents_02 {
		padding: 0 10px;
	}
	.contents_02 .item_ {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.contents_02::after {
		content: none;
	}
	.contents_02 .item_ ul.btns_2 {
		font-size: 0.8em;
		width: 100%;
		margin-bottom: 0;
		padding: 0;
	}
	.contents_02 .item_ ul.btns_2 li.btn_gazou_2 {
		position: relative;
	}
	.item_ .btn_gazou_2 a {
		padding: 10px 0;
		border-radius: 100vh;
		color: #ffffff!important;
		font-weight: bold;
		text-align: center;
		display: block;
		position: relative;
		transition: .3s;


		margin: 0;
	}
	/* 4分割ギャラリーのスマホ用の親箱設定（2列で折り返すようにします） */
	.column ul.tokusyu {
		width: 100% !important;
		margin: 0 auto !important;
		padding: 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		/* ★2列になったら下に回り込ませる命令 */
		justify-content: space-between !important;
	}
	/* 4つの各ボタンを横幅「48%」にして、2枠並んだら綺麗に下に落ちるようにします */
	.column ul.tokusyu li {
		width: 48% !important;
		/* ★2並びにするために少し余裕を持たせた横幅 */
		margin-bottom: 15px !important;
		/* 下の段との間の隙間 */
		box-sizing: border-box !important;
	}
	#outer .contents_02 .item_ {
		width: 100%;
	}
	/* === スマホ時のレイアウトとボタン順序の入れ替え設定 === */
	#outer .container {
		display: flex !important;
		flex-direction: column !important;
	}
	#outer .content-wrapper {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}
	#outer .custom-rounded-btn {
		order: 2 !important;
		margin: 15px auto 25px !important;
	}
	/* ==========================================================================【スマホ用】関連コラムボタンの上下の隙間をキュッと詰める========================================================================== */
	#outer .custom-rounded-btn {
		margin: 0 0 5px 0 !important;
		/* 下側の余白を50pxから15pxに縮めて上に詰めます */
	}
	#outer .table-area {
		order: 3 !important;
		width: 100% !important;
		display: block !important;
		padding: 0 !important;
	}
	#outer .image-area {
		order: 1 !important;
		border-right: none !important;
		width: 100% !important;
		text-align: center !important;
		padding-right: 0 !important;
		margin-bottom: auto !important;
	}
	#outer .product-image-container img,#outer .image-area img {
		width: 95% !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
	}
	#outer .content-img,#outer .content-text {
		display: block !important;
		width: 100% !important;
	}
	#outer .joint-table td.group-cell {
		min-width: auto !important;
	}
	#outer .joint-table {
		margin: 0 auto 1em !important;
	}
	#outer .data-table,#outer .joint-table,#ps-table .data-table,#entou-table .data-table,#kakugata-table .data-table {
		width: 92% !important;
		max-width: 100%;
		margin: 0 auto 15px !important;
	}
}
/* ===================================================PC画面用：その他のボタンのホバー一括設定（干渉除去）=================================================== */
#outer .gallery-item .gallery-btn:hover,#outer .gallery-btn:hover,#outer .category_btn a:hover,#outer .contents_02 .item_ ul.btns_2 li.btn_gazou_2 a:hover,#outer .nav-selection-container .nav-selection-btn:hover {
	background-color: #FF5187 !important;
	opacity: 1 !important;
	color: #ffffff !important;
}
.mainframe_ h3:has(+ .contents_02){
	color: #6B0000;
	text-align: center;
}
.mainframe_ .contents_02 .item_ ul.btns_{
	background-color: #FFD2E0;
	color: white !important;
}
/* ==========================================================================【スマホ対策】4つの表をすべて横スクロール可能にする設定========================================================================== */
@media screen and (max-width: 768px) {
	/* 表を包むコンテナに横スクロールの機能をつけます */
	#outer .product-table-container {
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		/* スマホでのスクロールを滑らかにします */
		margin-bottom: 15px !important;
	}
	/* 一括の横幅固定を解除して、下の個別設定（table-1など）に任せます */
	#outer .detail-data-table {
		width: auto !important;
		min-width: auto !important;
		table-layout: fixed !important;
	}
}
/* /* ==========================================================================【スマホ対策】4つの表ごとに横幅を個別にコントロールする設定========================================================================== */
@media screen and (max-width: 768px) {
	/* --- 1つ目の表 (table-1) の設定 --- */
	#outer .table-1 tr th:nth-child(4), #outer .table-1 tr td:nth-child(4),#outer .table-1 td[number="name-cell"], #outer .table-1 td:first-child, #outer .table-1 th:first-child {
		width: 40px !important;
		min-width: 40px !important;
		text-align: center !important;
	}
	#outer .table-1 tr th:nth-child(2), #outer .table-1 tr td:nth-child(2),#outer .table-1 tr th:nth-child(5), #outer .table-1 tr td:nth-child(5) {
		width: 180px !important;
		min-width: 100px !important;
		/* ★商品名の幅 */
	}
	#outer .table-1 tr th:nth-child(3), #outer .table-1 tr td:nth-child(3),#outer .table-1 tr th:nth-child(6), #outer .table-1 tr td:nth-child(6) {
		width: 100px !important;
		min-width: 100px !important;
		/* ★サイズの幅 */
	}
	#outer table.table-1 {
		box-sizing: border-box !important;
		table-layout: fixed !important;
		width: 640px !important;
		min-width: 640px !important;
		/* ★全体の幅 (40+180+100)×2 */
	}
	/* --- 2つ目の表 (table-2) の設定 --- */
	#outer .table-2 tr th:nth-child(4), #outer .table-2 tr td:nth-child(4),#outer .table-2 td[number="name-cell"], #outer .table-2 td:first-child, #outer .table-2 th:first-child {
		width: 40px !important;
		min-width: 40px !important;
		text-align: center !important;
	}
	#outer .table-2 tr th:nth-child(2), #outer .table-2 tr td:nth-child(2),#outer .table-2 tr th:nth-child(5), #outer .table-2 tr td:nth-child(5) {
		width: 130px !important;
		min-width: 130px !important;
		/* ★ここを自由に変更可能 */
	}
	#outer .table-2 tr th:nth-child(3), #outer .table-2 tr td:nth-child(3),#outer .table-2 tr th:nth-child(6), #outer .table-2 tr td:nth-child(6) {
		width: 150px !important;
		min-width: 150px !important;
		/* ★ここを自由に変更可能 */
	}
	#outer table.table-2 {
		box-sizing: border-box !important;
		table-layout: fixed !important;
		width: 640px !important;
		min-width: 640px !important;
	}
	/* --- 3つ目の表 (table-3) の設定 --- */
	#outer .table-3 tr th:nth-child(4), #outer .table-3 tr td:nth-child(4),#outer .table-3 td[number="name-cell"], #outer .table-3 td:first-child, #outer .table-3 th:first-child {
		width: 40px !important;
		min-width: 40px !important;
		text-align: center !important;
	}
	#outer .table-3 tr th:nth-child(2), #outer .table-3 tr td:nth-child(2),#outer .table-3 tr th:nth-child(5), #outer .table-3 tr td:nth-child(5) {
		width: 180px !important;
		min-width: 180px !important;
	}
	#outer .table-3 tr th:nth-child(3), #outer .table-3 tr td:nth-child(3),#outer .table-3 tr th:nth-child(6), #outer .table-3 tr td:nth-child(6) {
		width: 100px !important;
		min-width: 100px !important;
	}
	#outer table.table-3 {
		box-sizing: border-box !important;
		table-layout: fixed !important;
		width: 640px !important;
		min-width: 640px !important;
	}
	/* --- 4つ目の表 (table-4) の設定 --- */
	#outer .table-4 tr th:nth-child(4), #outer .table-4 tr td:nth-child(4),#outer .table-4 td[number="name-cell"], #outer .table-4 td:first-child, #outer .table-4 th:first-child {
		width: 20px !important;
		min-width: 20px !important;
		text-align: center !important;
	}
	#outer .table-4 tr th:nth-child(2), #outer .table-4 tr td:nth-child(2),#outer .table-4 tr th:nth-child(5), #outer .table-4 tr td:nth-child(5) {
		width: 180px !important;
		min-width: 180px !important;
	}
	#outer .table-4 tr th:nth-child(3), #outer .table-4 tr td:nth-child(3),#outer .table-4 tr th:nth-child(6), #outer .table-4 tr td:nth-child(6) {
		width: 120px !important;
		min-width: 120px !important;
	}
	#outer table.table-4 {
		box-sizing: border-box !important;
		table-layout: fixed !important;
		width: 640px !important;
		min-width: 640px !important;
	}
	/* 万が一横に潰れて並んでしまう場合の干渉クリア命令 */
	#outer .gallery-grid {
		display: flex !important;
		flex-wrap: wrap !important;
	}
	#outer .gallery-item {
		flex: none !important;
		width: 48% !important;
		margin-bottom: 15px !important;
	}
	/* ==========================================================================【決定版】4分割ギャラリーの上下の隙間を完全に詰める設定========================================================================== */
	/* 1. 親箱の余計な隙間（改行や浮き）を完全に排除します */
	#outer .gallery-grid,#outer .column ul.tokusyu {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0 !important;
		/* ★上下左右の隙間をゼロにします */
		padding: 0 !important;
		margin: 0 auto !important;
		border: none !important;
		/* 古い親枠の線をリセット */
	}
	/* 2. 各マス（li または gallery-item）をぴったり50%幅にして隙間なく敷き詰めます */
	#outer .gallery-item,#outer .column ul.tokusyu li {
		flex: none !important;
		width: 50% !important;
		/* ★確実に横並び2要素で100%ぴったりにします */
		max-width: 50% !important;
		margin: 0 !important;
		/* ★外側の余白（隙間の原因）を完全にゼロにします */
		box-sizing: border-box !important;
		background-color: #ffffff !important;
		/* 線の追加：すべてのマスの周りに1マスずつ綺麗に線を引きます */
		border: none !important;
	}
	/* 3. 線が重複して太くなったり、ズレたりするのを防ぐための微調整 */
	#outer .gallery-item:nth-child(even),#outer .column ul.tokusyu li:nth-child(even) {
		border-left: none !important;
		/* 右側のマスの左線を消して、中央の線が太くなるのを防ぐ */
	}
	#outer .gallery-item:nth-child(n+3),#outer .column ul.tokusyu li:nth-child(n+3) {
		border-top: none !important;
		/* 下の段（3個目・4個目）の上線を消して、赤丸部分の重複を防ぐ */
	}
}
/* スマホ設定全体の閉じカッコ */