/***************************************
 レスポンシブWEBデザイン
 PC用スタイルシート
 基本情報で設定した画面サイズ以下で適用
***************************************/

/****************************
HTMLの共通の設定
****************************/
body 	{
	background:#f4f1ea;
	font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
	font-size:16px;
	margin: 0;
	}
BODY,TR,TD,TH {
	color : #555555;
	}
h3 { 
	display:block;
	text-align:center;
	font-size:14pt;
	color:green;
	font-style:italic 
	}
p { 	
	display:block;
	text-align:center;
	}
ul, ol, li {
	margin: 0;
	list-style: none;
	padding-top: 30;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	}
.break{
	clear:both;
	}
.pclink{
	float: left;
	}
.alllink{
	float: left;
	}
.menutitle{
	line-height:190%;
	padding: 3px;
	font-size : 14px;
	border:1px solid #999;
	background-image:linear-gradient(#E1F0FF,#BBDDFF);
	}
.listmark{
	vertical-align: middle;
	}
/********** 入力部品 ************/
input[type='text'],input[type='password']{
	max-width: 300px;
	padding: 5px;
	margin:2px;
	border-radius: 5px;
	font-size:16px;
	border: 1px solid #ccc;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
}
input[type="radio"],input[type="checkbox"]{
	margin:2px;
	width: 1.3em;
	height: 1.3em;
	vertical-align:middle;
}
textarea{
	width: 100%;
	max-width: 500px;
	margin:2px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid #ddd;
	padding: 10px;
	font-size: 13px;
}
select{
	padding: 5px;
	margin:2px;
	border-radius: 5px;
	font-size:16px;
	border: 1px solid #ccc;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
}
/****************************
文字のフォント
****************************/
/* カレンダー */
.CWORD {
	font-size : 13px;
	color: #000000;
	}
.CSATWORD {
	font-size : 13px;
	color: #555555;
	}
.CSUNWORD {
	font-size : 13px;
	color: #555555;
	}
.CTODAY {
	font-size : 20px;
	font-weight : bold;
	color: #0000FF;
	}
/****************************
共通のボタンとリンク
****************************/
.BT {
	display: inline-block;
	background: transparent;
	text-transform: uppercase;
	font-weight: 500;
	font-style: normal;
	font-size: 12.5px;
	letter-spacing: 0.3em;
	color: rgba(150,90,50,0.7);
	border-radius: 0;
	padding: 2px 5px 2px 5px;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg, rgba(233,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	margin: 2px;
	border: none;
	border: 1px solid rgba(150,90,50,0.3);
}
.BT:hover {
	color: #FFFFFF;
	background-position: 99% 50%;
}
.small_bt {
	display: inline-block;
	background: transparent;
	text-transform: uppercase;
	font-weight: 500;
	font-style: normal;
	font-size: 12.5px;
	letter-spacing: 0.3em;
	color: rgba(150,90,50,0.7);
	border-radius: 0;
	padding: 2px 5px 2px 5px;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg, rgba(233,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	margin: 2px;
	border: none;
	border: 1px solid rgba(150,90,50,0.3);
	}
.small_bt:hover {
	color: #FFFFFF;
	background-position: 99% 50%;
	}
.cargo_bt {
	display: inline-block;
	background: transparent;
	font-weight: 500;
	font-style: normal;
	font-size: 12.5px;
	letter-spacing: 0.3em;
	color: rgba(150,90,50,0.7);
	border-radius: 0;
	padding: 2px 5px 2px 5px;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg, rgba(233,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	margin: 2px;
	border: none;
	border: 1px solid rgba(150,90,50,0.3);
}
.cargo_bt:hover {
	color: #FFFFFF;
	background-position: 99% 50%;
}
.SUBMITBT {
	padding:6px 12px;
	margin-top:8px;
	background:#8b2e2e;
	font-size : 18px;
	color:#fff;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.SUBMITBT:hover {
	background:#6e2424;
}

/** 決済に進む **/
.PAYBT {
	line-height:180%;
	cursor:pointer;
	font-size : 18px;
	font-weight : bold;
	text-decoration: none;
	padding: 2px 5px 2px;
	margin: 2px;
	color:#FF3300;
	background-image:linear-gradient(#FFFAFA,#EECCCC);
	border : 1px solid #FF9955;
	border-width:2px 2px 2px 2px;
	border-radius:2px;
	}
.PAYBT:hover {
	color:#FFFFFF;
	background-image:linear-gradient(#EEAA55,#FF5500);
	border : 1px solid #FFAAAA;
	border-width:2px 2px 2px 2px;
	}
/** リンクなど **/
.DLINK {
	line-height:210%;
	cursor:pointer;
	text-decoration : none;
	font-size : 16px;
	padding: 3px;
	margin: 2px;
	color: rgba(150,90,50,0.7);
	white-space: nowrap;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg, rgba(233,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	border: 1px solid rgba(150,90,50,0.3);
	border-radius:2px;
	}
.DLINK:hover {
	color: #FFFFFF;
	background-position: 99% 50%;
	}

.KLINK {
	display: inline-block;
	background: transparent;
	font-weight: 500;
	font-style: normal;
	font-size: 12.5px;
	letter-spacing: 0.3em;
	color: rgba(150,90,50,0.7);
	border-radius: 4px;
	padding: 2px 5px 2px 5px;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg, rgba(233,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	margin: 2px;
	border: none;
	border: 1px solid rgba(150,90,50,0.3);
}
.KLINK:hover {
	color: #FFFFFF;
	background-position: 99% 50%;
}

.NOLINK {
	line-height:210%;
	cursor:pointer;
	text-decoration : none;
	font-size : 12px;
	padding: 3px;
	margin: 2px;
	color: rgba(150,90,50,0.5);
	white-space: nowrap;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg, rgba(233,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	border: 1px solid rgba(150,90,50,0.3);
	border-radius:2px;
	}
.BACK {
	line-height:180%;
	cursor:pointer;
	font-size : 18px;
	color: rgba(150,90,50,0.7);
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg, rgba(233,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	white-space: nowrap;
	margin: 2px;
	border: none;
	border: 1px solid rgba(150,90,50,0.3);
	padding:6px 12px;
	margin-top:8px;
	border-radius:4px;
	cursor:pointer;
	}
.BACK:hover {
	color: #FFFFFF;
	background-position: 99% 50%;
	}
#return-top {
	height: 40px;
	line-height: 40px;
	background-color:rgba(153,51,0,0.5);
	border-radius: 30%;
	bottom: 11px;
	color: #fff;
	font-size: 14px;
	outline: 0;
	position: fixed;
	right: 20px;
	text-decoration:none;
	text-align: center;
	width: 50px;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
#return-top:hover {
	background-color: #993300;
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
/*** SORT ボタン***/
.sort-bar{
	margin-bottom:20px;
	font-size:14px;
	display:flex;
	gap:12px;
	align-items:center;
}
.sort-bar .DLINK,
.sort-btn{
	position:relative;
	padding:8px 16px;
	border-radius:20px;
	border:1px solid #ddd;
	text-decoration:none;
	color:#333;
	background:#fff;
	font-size:14px;
	transition:0.2s;
}
/* 矢印 */
.sort-btn::after{
	margin-left:6px;
	font-size:10px;
}
.sort-btn.asc::after{
	content:"▲";
}
.sort-btn.desc::after{
	content:"▼";
}
/* 選択中 */
.sort-btn.active{
	background:#b13a3a;
	color:#fff;
	border-color:#b13a3a;
}
.sort-bar .DLINK:hover,
.sort-btn:hover{
	transform:translateY(-2px);
	box-shadow:0 4px 8px rgba(0,0,0,0.1);
}
/* =========================
	 Pagination
========================= */
.pagearea{
	display:flex;
	justify-content:center;
	margin:20px 0;
}
.pagination{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
.pagination a{
	box-shadow:0 3px 8px rgba(0,0,0,0.04);
}

.pagination a,
.pagination .current{
	min-width:42px;
	height:42px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 14px;
	border-radius:10px;
	font-size:14px;
	text-decoration:none;
	transition:all 0.2s ease;
}
/* 通常ページ */
.pagination a{
	background:#fff;
	border:1px solid #ddd;
	color:#555;
}

.pagination a:hover{
	border-color:#b13a3a;
	color:#b13a3a;
}
/* 現在ページ */
.pagination .current{
	background:#b13a3a;
	color:#fff;
	font-weight:600;
	border:1px solid #b13a3a;
}

/* Pagination　Mobile */
@media (max-width:768px){
	.pagearea{
		margin:35px 0;
	}
	.pagination{
		gap:8px;
	}
	.pagination a,
	.pagination .current{
		min-width:36px;
		height:36px;
		font-size:13px;
		border-radius:8px;
	}
}
/****************************
ヘッダー
****************************/
#header{
	background:#f8f6f2;
	border-bottom:2px solid #2f4f3f;
	font-family:"メイリオ", sans-serif;
	position:relative;
}
#headerlist > ul{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	max-width:1200px;
	margin:0 auto;
	padding:10px 10px 3px 10px;
	list-style:none;
	gap:20px;
}
#headerleft,
#headercargo,
#upmenu{
	display:flex;
	align-items:center;
	height:60px; 
}
/* ロゴ */
#headerleft{
	flex:0 0 250px;
}
.site-logo {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 32px;
  color: #1e3a8a;
  letter-spacing: 0.08em;
  line-height: 1.2;
padding: 20px 0;
}
.site-logo::before {
  content: "■";
  margin-right: 8px;
}

.logo {
	width: 100%;
	max-width: 250px;
	height: auto;
	display:block;
}
/* 電話 */
.headercom a {
	text-decoration:none;
}
#headercenter{
	flex:1;
	font-size:16px;
}
/* 検索 */
#headersearch{
	flex:0 0 320px;
}
#headersearch form{
	display:flex;
	max-width:420px;
}
#headersearch input{
	flex:1;
	padding:10px;
	font-size:16px;
	border:1px solid #ccc;
	border-radius:5px 0 0 5px;
}

#headersearch input[type='text']{
	max-width: 200px;
}
#headersearch button{
	padding:10px 15px;
	font-size:16px;
	border:none;
	background:#2f4f3f;
	color:#fff;
	border-radius:0 5px 5px 0;
	cursor:pointer;
}
.searchbutton {
	padding:10px 15px;
	font-size:16px;
	border:none;
	background:#2f4f3f;
	color:#fff;
	border-radius:0 5px 5px 0;
	cursor:pointer;

}
/* カゴ */
#headercargo{
	flex:0 0 auto;
}
.headercargo{
	margin-top:25px;
	padding:6px 12px;
	font-size:14px;
	border-radius:18px;
	box-shadow:none;
	background: linear-gradient(#b13a3a, #8b2e2e);
	color:#fff;
	font-weight:bold;
	display:flex;
	align-items:center;
	gap:10px;
	transition:0.2s;
	cursor:pointer;
}
/* ホバー効果 */
.headercargo:hover{
	background: linear-gradient(#c94444, #9f3434);
}
/* 数字部分（丸バッジ） */
.headercargoBTR{
	background:#fff;
	color:#8b2e2e;
	font-weight:bold;
	font-size:14px;
	min-width:28px;
	height:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	text-decoration:none;
}
.headercargoBT{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:24px;
	background:#cdcdcd;
	color:#8b2e2e !important;
	font-weight:bold;
	font-size:14px;
	border-radius:50%;
	text-decoration:none !important;
	margin-left:6px;
}
/* 押した時 */
.headercargo:active{
	transform:translateY(3px);
	box-shadow:0 1px 0 #6f2323;
}
/* =========================
	 PCナビ
========================= */
.menu{
	display:flex;
	gap:25px;
	list-style:none;
	padding:10px 0;
	margin:0;
	border-top:1px solid #ddd;
}
.menu li{
	padding:5px 0;
}
.menu li a{
	text-decoration:none;
	color:#333;
	font-size:16px;
}
.menu li a:hover{
	color:#8b2e2e;
}
#menuToggle{
	display:none;
}
.menu-close{
	display:none;
}
/* =========================
	 スマホナビ
========================= */
@media (max-width:768px){
	#headerlist > ul{
		justify-content: flex-start;
		gap:10px;
		padding:6px 3px;
	}
	#headerleft{
		order:1;
		margin-right:auto;
		margin:0;
		padding:0;
	}
	.logo{
		display:block;
		max-width:180px;
	}
	#headercargo{
		order:2;
	}
	.headercargo{
		font-size:15px;
		padding:8px 10px;
	}
	#upmenu{
		order:3;
	}
	#headersearch{
		order:4;
		width:100%;
		margin-top:10px;
		border-top:1px solid #eee;
		padding-top:8px;
	}
	#headercenter{
		display:none;
	}
	#menuToggle{
		display:block;
		font-size:28px;
		cursor:pointer;
		margin-left:10px;
	}
	#headersearch{
		margin-top:0px;
	}
	#headersearch form{
		max-width:100%;
	}
	#menuToggle{
		display:block;
		font-size:28px;
		cursor:pointer;
	}
	/* スライドメニュー */
	.menu{
		position:fixed;
		top:0;
		right:-100%;
		width:280px;
		height:100%;
		background:#ffffff;
		flex-direction:column;
		padding-top:60px;
		gap:0;
		border-left:2px solid #2f4f3f;
		transition:0.3s;
		z-index:999;
	}
	.menu li{
		border-bottom:1px solid #ddd;
		padding:15px 20px;
	}
	.menu.active{
		right:0;
	}
	.menu-close{
		display:block;
	}
}
/* ===================================
ハンバーガーメニュー表示＝背景暗転
=================================== */
.menu-overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.4);
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:998;
}
.menu-overlay.active{
	opacity:1;
	visibility:visible;
}
/* ×ボタン表示 */
.menu-close{
	font-size:18px;
	text-align:right;
	padding:15px 20px;
	cursor:pointer;
	border-bottom:2px solid #2f4f3f;
}
/****************************
コンテンツ
****************************/
#contents {
	max-width:1200px;
	margin:0 auto;
	padding:10px 0px 0px 0px;
	display:flex;
	gap:30px;
	align-items:flex-start;
}
/****************************
左メニュー
****************************/
#leftmenu {
	width:200px;
	padding:0 0 0 3px;
	font-size:14px;
	flex-shrink:0;
	position:sticky;
	top:20px;
}
.menu-box {
	background:#fff;
	border:1px solid #ddd;
	margin-bottom:15px;
	border-radius:4px;
	overflow:hidden;
}
.menu-title {
	background:#f5f5f5;
	padding:8px 10px;
	font-weight:bold;
	font-size:14px;
}
.menu-content {
	padding:10px;
}

.menu-list,
.category-list {
	list-style:none;
	padding:0;
	margin:0;
}
.menu-list a{
	display:flex;
	justify-content:space-between;
	padding:8px 10px;
	text-decoration:none;
	color:#333;
	transition:0.15s;
	font-size:14px;
}
.menu-list a:hover,
.category-list a:hover {
	background:#f0f0f0;
	color:#8b2e2e;
}
.category-list span {
	font-size:12px;
	color:#777;
}
/* 共通 */
.category-list {
	list-style:none;
	padding:0;
	margin:0;
}
.category-list li {
	margin:2px 0;
}

/* 親カテゴリ */
.largecategory > a {
	display:block;
	padding:8px 10px;
	font-weight:bold;
	font-size:14px;
	color:#333;
	text-decoration:none;
	border-radius:4px;
	transition:0.2s;
}
/* 2階層 */
.smallcategory2 > a {
	display:block;
	padding:6px 10px 6px 22px;
	font-size:13px;
	color:#444;
	text-decoration:none;
	position:relative;
	transition:0.2s;
}
/* 3階層 */
.smallcategory3 > a {
	display:block;
	padding:6px 10px 6px 36px;
	font-size:13px;
	color:#555;
	text-decoration:none;
	position:relative;
	transition:0.2s;
}
/* 4階層 */
.smallcategory4 > a {
	display:block;
	padding:6px 10px 6px 50px;
	font-size:13px;
	color:#666;
	text-decoration:none;
	position:relative;
	transition:0.2s;
}
/* 5階層以上ある場合は、上記の1～4階層と同じように記述（数字を増やす） */

/* カテゴリの件数 */
.category-list span {
	color:#999;
	font-size:12px;
	margin-left:4px;
}
/* ホバー */
.category-list a:hover {
	background:#f5f5f5;
	color:#8b2e2e;
}
/* 現在地 */
.category-list a.active {
	background:#8b2e2e;
	color:#fff;
	font-weight:bold;
}
.category-list a.active span {
	color:#fff;
}
/* Mypage */
.btn-small {
	padding:6px 12px;
	margin-top:8px;
	background:#8b2e2e;
	color:#fff;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.btn-small:hover {
	background:#6e2424;
}
.link-small {
	display:block;
	margin-top:8px;
	font-size:13px;
	text-decoration:none;
	color:#666;
}
.category-list span {
	color:#999;
	font-size:12px;
}
/****************************
メインコンテンツ
****************************/
#maincontents {
	display:block;
	width:100%;
	max-width: 1200px;
	background:#fff;
	padding:10px 20px 10px 20px;
	margin: 0 0 10px 0;
	border-radius:6px;
	flex:1;
	min-width:0;
}
/* 画像が原因で広がらないように */
#maincontents img{
	max-width:100%;
	height:auto;
}
#cargo-maincontents {
	width:100%;
	margin:0 0 10px 0;
	background:#fff;
	padding:10px 20px 10px 20px;
	border-radius:6px;
}

@media (max-width: 768px){

  #contents{
    display:block;   /* ← 横並び解除 */
  }

  #leftmenu{
    display:none;    /* ← メニュー非表示 */
  }

  #maincontents{
    width:100%;
    padding:10px;
  }

}


/****************************
右メニュ－
****************************/
#rightmenu {
	display:none;
}
/****************************
フッター
****************************/
.footer {
	background:#f5f5f5;
	padding:20px 20px;
	font-size:15px;
	line-height:1.6;
	color:#222;
	border-top:2px solid #2f4f3f;
}
.footer-inner {
	max-width:1000px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:30px;
}
/* 左右カラム */
.footer-info {
	flex:1;
	min-width:280px;
}

.footer-links {
	flex:1;
	min-width:220px;
}
/* リンク装飾 */
.footer-links ul {
	list-style:none;
	padding:0;
	margin:0;
}
.footer-links li {
	margin:6px 0;
}
.footer a {
	text-decoration:none;
	color:#333;
	transition:0.2s;
}
.footer a:hover {
	color:#8b2e2e;
}
/* バー装飾 */
.footer-links a::before {
	content:"";
	display:inline-block;
	width:3px;
	height:12px;
	background:#ccc;
	margin-right:8px;
	transition:0.2s;
}
.footer-links a:hover::before {
	background:#8b2e2e;
}
.copyright {
	text-align:center;
	margin-top:40px;
	font-size:13px;
	color:#666;
}
.footer p {
	margin:4px 0;
}
.tel a {
	font-size:20px;
	font-weight:bold;
	color:#b13a3a;
	text-decoration:none;
}
.hours {
	font-size:14px;
	color:#555;
}

@media (max-width:768px) {
	.footer-inner {
		flex-direction:column;
	}
}
/****************************
ボックス、一覧画面
****************************/
.titlebox {
	width:100%;
	text-align:left;
	padding:1px;
	margin: 2px;
	color : #555555;
	box-sizing: border-box;
	clear:both;
	}
.listbox{
	width:100%;
	text-align:left;
	padding:1px;
	margin: 2px;
	color : #555555;
	box-sizing: border-box;
	}
.listbox ul li {
	padding: 0px;
	margin: 1px;
	}
.rightbox{
	width:100%;
	text-align:right;
	padding:1px;
	margin: 2px;
	color : #555555;
	box-sizing: border-box;
	}
.ibox{
	padding:1px;
	margin: 0px;
	border : 1px solid #999999;
	border-width : 1px 1px 1px 1px;
	}
.centerarea{
	display: block;
	width: 100%;
	padding:0px;
	margin:0px;
	text-align:center;
	box-sizing: border-box;
	}
.centerbox{
	display:block;
	width:100%;
	padding:0px;
	margin:0px;
	text-align:center;
	box-sizing: border-box;
	}
#stateimage {
	padding:20px 0px 20px 0px;
	margin:0px;
	width:100%;
	text-align:center;
	}

/***　ランダム画面　***/
.randumarea {
	float: center;
	display:inline-block;
	margin:0px;
	padding:0px;
	width:100%;
	text-align:center;
	box-sizing: border-box;
	}
.randumarea ul li {
	float: center;
	display:inline-block;
	margin:0px;
	padding:0px;
	width:100%;
	box-sizing: border-box;
	}
.randumvalue {
	float: center;
	display:inline-block;
	margin:0px;
	padding:0px;
	width:200px;
	text-align:center;
	box-sizing: border-box;
	}
.randumlink img {
	width:100%;
	height:120px;
	object-fit: cover;
	}
/****************************
メニューのページ（FreePage7）
****************************/
#menupage {
	width:98%;
	margin: 5px 1px 1px 1px;
	padding:0px;
}
#menulist{
	width:100%;
	margin:0px;
	padding:0px;
}
.PMENU{
	line-height:140%;
	display:inline-block;
	width:96%;
	font-size : 14px;
	font-weight:bold;
	padding: 3px;
	margin: 5px 0px 0px 0px;
	color : #555555;
	text-align : left;
	text-decoration : none;
	}
.PMENU:hover {
	background-color: #FFEECC;
	color:#FF5555;
	}
.PMENU2{
	line-height:110%;
	display:inline-block;
	width:96%;
	font-size : 13px;
	padding: 3px;
	margin: 3px 0px 0px 25px;
	color : #555555;
	text-align : left;
	text-decoration : none;
	}
.PMENU2:hover {
	background-color: #FFEECC;
	color:#FF5555;
	}
/****************************
管理者注文
****************************/
#KANRIORDER {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 1;
	padding:3px 10px 3px 10px;
	vertical-align: middle;
	font-size:20px;
	font-weight:bold;
	color:#FF5555;
	background-color: #FFEECC;
	border : 1px solid #FF5555;
	border-width:1px 1px 1px 1px;
	border-radius:3px;
}
.KOOUT{
	cursor:pointer;
	font-size : 12px;
	padding: 3px 5px 3px 5px;
	color:#555555;
	background-image:linear-gradient(#FAFAFA,#CCCCCC);
	border : 1px solid #999999;
	border-width:0px 1px 1px 0px;
	border-radius:5px;
}
.KOOUT:hover {
	color :#FFFFFF;
	background-image:linear-gradient(#999999,#CCCCCC);
	border : 1px solid #999999;
	border-width:0px 1px 1px 0px;
	}
/**************************
商品一覧
**************************/
#maincontents .product-list{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	column-gap:40px;
	row-gap:60px;
	gap:50px 40px !important;
	width:100%;
	align-items:stretch;
}
#maincontents .product-card{
	display:flex;
	flex-direction:column;
	width:100% !important;
	height:100%;
	float:none !important;
	background:#fff;
	border:1px solid #ddd;
	padding:20px;
	box-sizing:border-box;
}
.product-card{
	display:flex;
	flex-direction:column;
	height:100%;
	transition:all 0.3s ease;
	border:3px solid red;
}
.product-card:hover{
	box-shadow:0 10px 25px rgba(0,0,0,0.08);
	transform:translateY(-3px);
}
.product-image img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
}
.product-title{
	font-size:18px;
	margin:10px 0;
	color:#2f4f2f;
	line-height:1.4;
	min-height:4.2em;
}
.main-image{
	position:relative;
	width:100%;
	aspect-ratio:1/1;
	overflow:hidden;
}

.main-image > a{
	display:block;
	height:100%;
}

.main-image > a > img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform 0.4s ease;
}

/* NEWバッジ */
/* バッジをまとめる箱 */
#maincontents .main-image .badge-area{
	position:absolute;
	top:12px;
	left:12px;
	display:flex;
	flex-direction:column;
	gap:6px;
	z-index:10;
}
/* バッジ画像サイズ統一 */
#maincontents .main-image .badge-area img{
	width:52px;
	height:auto;
	display:block;
	filter:drop-shadow(0 3px 6px rgba(0,0,0,0.15));
}
.product-price{
	margin-bottom:15px;
}
.product-price .member{
	font-size:20px;
	font-weight:bold;
	color:#b22222;
	display:block;
}
.product-price .normal{
	font-size:14px;
	color:#555;
}
.product-info{
	display:flex;
	flex-direction:column;
	flex-grow:1;
	padding-top:15px;
}
.cart-area{
	margin-top:auto;
	padding-top:15px;
}
.cart-area button{
	width:100%;
	padding:12px;
	background:#2f4f2f;
	color:#fff;
	border:none;
	font-size:16px;
	cursor:pointer;
}
.cart-area button:hover{
	background:#244024;
}
.badge{
	background:#c93a3a;
	color:#fff;
	font-size:12px;
	padding:3px 6px;
}
@media(max-width:768px){
	#maincontents{
		padding: 0 14px;
	}
	#maincontents .product-list{
		grid-template-columns: 1fr;
		gap:40px 0 !important;
	}
}
/**************************
商品詳細画面
**************************/
/* 子要素を縮められるようにする */
#maincontents .product-gallery,
#maincontents .product-info{
	flex:1;
	min-width:0;
}
#maincontents .product-page{
	margin:30px 0 60px;
}

/* 上部2カラム */
#maincontents .product-main{
	display:flex;
	gap:60px;
	align-items:flex-start;
}
/* ==== 左：画像 === */
#maincontents .product-gallery{
	flex:1;
	min-width:0;
}
/* メイン画像の枠を固定 */
#maincontents .gallery-main{
	width:100%;
	aspect-ratio: 1 / 1;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	border:1px solid #eee;
	box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
/* メイン画像 */
#maincontents .gallery-main img{
	width:100%;
	height:100%;
	object-fit:cover;
}
/* サムネ */
#maincontents .gallery-thumbs{
	margin-top:15px;
}
#maincontents .gallery-thumbs table{
	width:100%;
}
#maincontents .gallery-thumbs img{
	height:60px;
	width:auto;
	border:1px solid #ddd;
	padding:3px;
	background:#fff;
	transition:0.3s;
}
#maincontents .gallery-thumbs img:hover{
	border:1px solid #b22222;
	opacity:0.85;
}
/* === 右：情報 === */
#maincontents .product-info{
	flex:1;
	min-width:0;
}
#maincontents .product-title{
	font-size:26px;
	font-weight:500;
	margin-bottom:10px;
	color:#2f4f2f;
}
/* マイリスト */
#maincontents .product-title .DLINK{
	display:inline-block;
	margin-top:10px;
	padding:8px 16px;
	font-size:14px;
	text-decoration:none;
	border:1px solid #ccc;
	border-radius:20px;
	color:#555;
	background:#fff;
	transition:0.3s;
}
/* ハートを前に付ける */
#maincontents .product-title .DLINK::before{
	content:"? ";
	font-size:14px;
}

/* ホバー */
#maincontents .product-title .DLINK:hover{
	border-color:#d4a017;
	color:#d4a017;
	background:#faf8f4;
}
/* バッジ */
#maincontents .badge-area{
	margin:15px 0;
}
#maincontents .badge-area img{
	height:28px;
	margin-right:6px;
}
/* === 価格 === */
#maincontents .price-box{
	margin:25px 0;
	padding:20px;
	background:#faf8f4;
	border-left:4px solid #d4a017;
}
#maincontents .price-main{
	font-size:32px;
	font-weight:bold;
	color:#b22222;
}
#maincontents .price-main span{
	font-size:14px;
	color:#777;
}
#maincontents .price-sub{
	margin-top:8px;
	font-size:14px;
	color:#555;
}
/* 在庫 */
#maincontents .stock{
	margin:15px 0;
	font-size:14px;
	color:#444;
}
/* ==== 購入エリア ==== */
#maincontents .purchase-box{
	margin-top:20px;
}
#maincontents .purchase-box select{
	padding:8px;
	border:1px solid #ccc;
	margin-right:10px;
	margin-bottom:10px;
}
/* 売れるボタン */
#maincontents .SUBMITBT{
	padding:14px 30px;
	background:#d4a017;
	color:#fff;
	border:none;
	font-size:16px;
	font-weight:bold;
	letter-spacing:1px;
	cursor:pointer;
	transition:0.3s;
}
#maincontents .SUBMITBT:hover{
	background:#b8860b;
}
/* ==== 説明 === */
#maincontents .product-description{
	text-align:left;
	margin-top:70px;
	line-height:1.9;
}
#maincontents .product-description h2{
	font-size:20px;
	border-bottom:2px solid #eee;
	padding-bottom:8px;
	margin-bottom:20px;
}
#maincontents .product-description p{
	text-align:left;
}
/* === 詳細テーブル ==== */
#maincontents .product-spec{
	margin-top:60px;
}
#maincontents .product-spec h2{
	font-size:20px;
	border-bottom:2px solid #eee;
	padding-bottom:8px;
	margin-bottom:20px;
}
#maincontents .product-spec table{
	width:100%;
	border-collapse:collapse;
}
#maincontents .product-spec th{
	width:30%;
	background:#f7f7f7;
	padding:14px;
	text-align:left;
}
#maincontents .product-spec td{
	padding:14px;
	border-bottom:1px solid #eee;
}
/*** スマホ ****/
@media(max-width:768px){
	#maincontents .product-main{
		flex-direction:column;
	}
	#maincontents .SUBMITBT{
		width:100%;
	}
}
/* ============================
LOGIN画面
============================= */
.member-dashboard {
	padding: 10px 0 30px;
}
/* 上部エリア */
.member-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	padding: 20px 25px;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
	margin-bottom: 25px;
	flex-wrap: wrap;
}
.member-info h2 {
	margin: 0;
	font-size: 22px;
}
.member-id {
	margin: 5px 0 0;
	font-size: 13px;
	color: #888;
}
/* 操作ボタン */
.member-actions a {
	display: inline-block;
	padding: 8px 14px;
	margin: 5px 6px;
	background: #b13a3a;
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-size: 14px;
	transition: 0.2s;
}
.member-actions a:hover {
	background: #8b2e2e;
}
.member-actions .danger {
	background: #666;
}
.member-actions .logout {
	background: #333;
}
/* グリッド */
.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-bottom: 30px;
}
/* 共通カード */
.dashboard-card {
	background: #fff;
	padding: 20px;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.dashboard-card h3 {
	margin-top: 0;
	font-size: 16px;
	margin-bottom: 15px;
}
/* ポイント強調 */
.point-card {
	text-align: center;
}
.point-value {
	font-size: 32px;
	font-weight: bold;
	color: #b13a3a;
	margin: 0;
}
.point-expire {
	font-size: 12px;
	color: #777;
}
/* ランク */
.rank-card {
	text-align: center;
}
.rank-card img {
	margin-bottom: 10px;
}
/* レスポンシブ */
@media (max-width: 768px) {
	.member-top {
		flex-direction: column;
		align-items: flex-start;
	}
	.member-actions {
		margin-top: 15px;
	}
}
/* ===== LOGIN ALERT (Dashboard Only) ===== */
.member-dashboard + .break,
.login-alert {
	margin-bottom: 25px;
}
.login-alert {
	background: linear-gradient(135deg, #fff8f8, #ffecec);
	border-left: 5px solid #b13a3a;
	padding: 18px 22px;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	animation: fadeInAlert 0.4s ease;
}
.login-alert ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.login-alert li {
	margin-bottom: 6px;
	font-size: 14px;
	color: #333;
}
.login-alert li:first-child {
	font-weight: bold;
	font-size: 15px;
	color: #b13a3a;
}
/* 軽いフェードイン */
@keyframes fadeInAlert {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* スマホ対応 */
@media (max-width: 768px) {
	.login-alert {
		padding: 15px;
	}
	.login-alert li {
		font-size: 13px;
	}
}
/* ===== LOGIN ALERT with CLOSE ===== */
.login-alert {
	position: relative;
	background: linear-gradient(135deg, #fff8f8, #ffecec);
	border-left: 5px solid #b13a3a;
	padding: 18px 22px;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	margin-bottom: 25px;
	animation: fadeInAlert 0.4s ease;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 閉じるボタン */
.alert-close {
	position: absolute;
	top: 10px;
	right: 12px;
	border: none;
	background: none;
	font-size: 18px;
	cursor: pointer;
	color: #b13a3a;
	font-weight: bold;
}
.alert-close:hover {
	opacity: 0.6;
}
/* フェードアウト用 */
.login-alert.hide {
	opacity: 0;
	transform: translateY(-5px);
}
/* アニメーション */
@keyframes fadeInAlert {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* ===== THUMBNAIL GRID ===== */
.thumbnail-grid .flexarea {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
/* カード */
.thumb-item {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0,0,0,0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* カードは浮かせる */
.thumb-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 26px rgba(0,0,0,0.14);
}
/* ===== 正方形 ===== */
.thumb-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f5f5f5;
}
/* リンクはブロック化 */
.thumb-image a {
	display: block;
	width: 100%;
	height: 100%;
}

/* 画像 */
.thumb-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
/* ★ 写真リンクにhoverした時だけズーム */
.thumb-image a:hover img {
	transform: scale(1.08);
}
/* 価格 */
.thumb-price {
	text-align: center;
	padding: 14px 10px;
	font-weight: bold;
	font-size: 16px;
	color: #b13a3a;
}
/* ===== スマホ ===== */
@media (max-width: 768px) {
	.thumbnail-grid .flexarea {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.thumb-price {
		font-size: 14px;
		padding: 10px;
	}
}
/* badge */
/* 画像を基準にする */
.thumb-item {
	position: relative;
}

/* 画像の上に重ねる */
.thumb-item .badge-area {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 5;
	pointer-events: none; /* クリック邪魔しない */
}
/* バッジサイズ調整 */
.thumb-item .badge-area .listmark {
	height: 26px;
	width: auto;
	display: block;
}
/* ============================
カゴの中
============================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}
/* コンテナ */
#cargo-maincontents {
	max-width: 1200px;
	margin: 10px auto;
	padding: 0 20px;
}
/* 進捗バー */
.stepbar {
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 0;
	margin-bottom: 10px;
	counter-reset: step;
}
.stepbar li {
	flex: 1;
	text-align: center;
	color: #aaa;
	font-size: 14px;
	position: relative;
}
.stepbar li::before {
	counter-increment: step;
	content: counter(step);
	display: inline-block;
	width: 28px;
	height: 28px;
	line-height: 28px;
	border-radius: 50%;
	background: #ddd;
	margin-bottom: 8px;
}
/* step-1～4 */
.step-1 li:nth-child(-n+1),
.step-2 li:nth-child(-n+2),
.step-3 li:nth-child(-n+3),
.step-4 li:nth-child(-n+4) {
	color: #b13a3a;
	font-weight: 600;
}
.step-1 li:nth-child(-n+1)::before,
.step-2 li:nth-child(-n+2)::before,
.step-3 li:nth-child(-n+3)::before,
.step-4 li:nth-child(-n+4)::before {
	background: #b13a3a;
	color: #fff;
}
/*　textarea　*/
.cargohoucom {
	width: 100%;
	max-width: 500px;
	background: #fafafa;
	border: 1px solid #ddd;
	padding: 10px;
	font-size: 13px;
}
/* =========================
 Checkout Table Card化
========================= */
#cargo-maincontents table{
	width:100% !important;
	border-collapse:separate;
	border-spacing:0;
	background:#fff !important;
	border-radius:16px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,0.05);
	margin-bottom:40px;
}
/* 外側グレー背景を消す */
#cargo-maincontents table[bgcolor]{
	background:transparent !important;
}
/* セクションタイトル専用テーブル（bgcolor付きだけ対象） */
#cargo-maincontents table[bgcolor] tr:first-child td{
	font-weight:600;
	font-size:16px;
	padding:18px 20px 18px 26px;
	border-bottom:1px solid #eee;
	position:relative;
	text-align:left;
}
/* 縦バー */
#cargo-maincontents table[bgcolor] tr:first-child td::before{
	content:"";
	position:absolute;
	left:14px;
	top:20px;
	width:4px;
	height:18px;
	background:#b13a3a;
	border-radius:2px;
}
/* 発送業者名セルだけ装飾 */
#cargo-maincontents td.INPOSTTDM{
	width:20%;
	font-weight:600;
	background:#fafafa;
	border-top:2px solid #eee;
	padding:18px 20px;
	vertical-align:top;
}
#cargo-maincontents td.INPOSTTDM + td{
	padding:18px 25px;
}
#cargo-maincontents table td{
	background:#fff !important;
	padding:14px 20px;
	border:none !important;
	font-size:14px;
	vertical-align:top;
}
#cargo-maincontents input[type="text"],
#cargo-maincontents input[type="password"],
#cargo-maincontents input[type="email"],
#cargo-maincontents input[type="tel"],
#cargo-maincontents input[type="number"],
#cargo-maincontents select,
#cargo-maincontents textarea{
	padding:10px 12px;
	border:1px solid #ddd;
	border-radius:8px;
	font-size:14px;
	box-sizing:border-box;
}
#cargo-maincontents input[type="radio"]{
	margin-right:6px;
}

#cargo-maincontents input[type="radio"] + *{
	display:inline-block;
	margin-bottom:8px;
}
#cargo-maincontents .postnosearch .small_bt{
	padding:10px 12px;
	border:1px solid #ddd;
	border-radius:8px;
	font-size:14px;
	box-sizing:border-box;
}
#cargo-maincontents input:focus,
#cargo-maincontents select:focus,
#cargo-maincontents textarea:focus{
	border-color:#b13a3a;
	outline:none;
	box-shadow:0 0 0 3px rgba(177,58,58,0.1);
}
@media (max-width:768px){
	#cargo-maincontents table{
		border-radius:12px;
	}
	#cargo-maincontents table td{
		padding:12px 15px;
		font-size:13px;
	}
}
/* === メインアクションボタン === */
#cargo-maincontents input.SUBMITBT{
	display:block;
	width:100%;
	max-width:480px;
	margin:50px auto 0;
	padding:18px 20px;
	font-size:18px;
	font-weight:700;
	text-align:center;
	background:#b13a3a;
	color:#fff;
	border:none;
	border-radius:14px;
	cursor:pointer;
	transition:all 0.25s ease;
}
/* hover（PC） */
#cargo-maincontents input.SUBMITBT:hover{
	background:#992f2f;
	transform:translateY(-2px);
	box-shadow:0 12px 25px rgba(0,0,0,0.18);
}
/* 押したとき */
#cargo-maincontents input.SUBMITBT:active{
	transform:translateY(0);
	box-shadow:0 6px 15px rgba(0,0,0,0.12);
}
@media (max-width:768px){
	#cargo-maincontents input.SUBMITBT{
		font-size:17px;
		padding:16px;
		border-radius:12px;
	}
}
/* ============================
関連商品
============================= */
.related-products {
	margin-top: 40px;
}
/* タイトル */
.related-title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 25px;
	padding-left: 15px;
	border-left: 4px solid #b13a3a;
}
/* 共通：横スクロール＋スナップ */
.related-list {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.related-item {
	flex: 0 0 240px;	 /* ← PCは固定幅 */
	scroll-snap-align: start;
}
/* 画像 */
.related-item img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0;
}
/* カードデザイン */
.related-item a {
	display: block;
	background: #fff;
	padding: 10px;
	border-radius: 16px;
	text-decoration: none;
	color: #333;
	box-shadow: 0 8px 25px rgba(0,0,0,0.05);
	transition: 0.2s;
	text-align: center;
}
.related-item a:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 35px rgba(0,0,0,0.08);
}
.related-name {
	font-size: 14px;
	font-weight: 600;
	min-height: 40px;
}
.related-price {
	font-size: 16px;
	font-weight: bold;
	color: #b13a3a;
	margin-top: 10px;
}
.related-link {
	display: block;
	text-decoration: none;
	background: #fff;
	padding: 20px;
	border-radius: 16px;
	box-shadow: 0 8px 25px rgba(0,0,0,0.05);
	transition: 0.2s;
	text-align: center;
	color: #333;
}
.related-link:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 35px rgba(0,0,0,0.08);
}
/* 画像 */
.related-link img {
	width: 100%;
	max-width: 160px;
	border-radius: 0px;
	margin-bottom: 15px;
}
/* 商品名 */
.related-name {
	font-size: 14px;
	font-weight: 600;
	min-height: 40px;
}
/* 価格 */
.related-price {
	font-size: 16px;
	font-weight: bold;
	color: #b13a3a;
	margin-top: 10px;
}
@media (max-width: 768px) {
	.related-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.related-item {
		flex: 0 0 50%;	 /* ← スマホだけ割合 */
	}
	.related-item img {
		height: 140px;	 /* 少し小さめ */
	}
}
/* ==============================
LOGIN LOGOUT
=============================== */
.logout-wrapper{
	display:flex;
	justify-content:center;
	padding:60px 20px;
}
.logout-card{
	width:100%;
	max-width:420px;
	background:#fff;
	padding:40px;
	border-radius:16px;
	box-shadow:0 15px 40px rgba(0,0,0,0.08);
}
.logout-title{
	font-size:22px;
	font-weight:600;
	margin-bottom:15px;
	text-align:center;
	letter-spacing:1px;
}
.logout-message{
	text-align:center;
	margin-bottom:30px;
	color:#666;
}
.login-form{
	display:flex;
	flex-direction:column;
	gap:20px;
}
.form-group{
	display:flex;
	flex-direction:column;
	gap:6px;
}
.form-group label{
	font-size:14px;
	color:#555;
}
.form-group input{
	padding:12px;
	border:1px solid #ccc;
	border-radius:8px;
	font-size:15px;
	transition:0.2s;
}
.form-group input:focus{
	border-color:#b13a3a;
	outline:none;
	box-shadow:0 0 0 3px rgba(177,58,58,0.1);
}
.btn-primary{
	padding:12px;
	border:none;
	border-radius:8px;
	background:#b13a3a;
	color:#fff;
	font-weight:600;
	cursor:pointer;
	transition:0.2s;
}
.btn-primary:hover{
	background:#992f2f;
}
.logout-links{
	margin-top:25px;
	display:flex;
	justify-content:space-between;
	font-size:14px;
}
.logout-links a{
	text-decoration:none;
	color:#555;
}
.logout-links a:hover{
	color:#b13a3a;
}
/* ==============================
table maincontents カゴの中と分離
================================*/
#maincontents table{
	width:100% !important;
	border-collapse:separate;
	border-spacing:0;
	background:#fff !important;
	border-radius:16px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,0.05);
	margin-bottom:40px;
}
/* 外側グレー背景を消す */
#maincontents table[bgcolor]{
	background:transparent !important;
}
/* セクションタイトル専用テーブル（bgcolor付きだけ対象） */
#maincontents table[bgcolor] tr:first-child td{
	font-weight:600;
	font-size:16px;
	padding:18px 20px 18px 26px;
	border-bottom:1px solid #eee;
	position:relative;
	text-align:left;
}
/* 縦バー */
#maincontents table[bgcolor] tr:first-child td::before{
	content:"";
	position:absolute;
	left:14px;
	top:20px;
	width:4px;
	height:18px;
	background:#b13a3a;
	border-radius:2px;
}
/* 発送業者名セルだけ装飾 */
#maincontents td.INPOSTTDM{
	width:20%;
	font-weight:600;
	background:#fafafa;
	border-top:2px solid #eee;
	padding:18px 20px;
	vertical-align:top;
}
#maincontents td.INPOSTTDM + td{
	padding:18px 25px;
}
#maincontents table td{
	background:#fff !important;
	padding:14px 20px;
	border:none !important;
	font-size:14px;
	vertical-align:top;
}
#maincontents input[type="text"],
#maincontents input[type="password"],
#maincontents input[type="email"],
#maincontents input[type="tel"],
#maincontents input[type="number"],
#maincontents select,
#maincontents textarea{
	padding:10px 12px;
	border:1px solid #ddd;
	border-radius:8px;
	font-size:14px;
	box-sizing:border-box;
}
#maincontents input[type="radio"]{
	margin-right:6px;
}

#maincontents input[type="radio"] + *{
	display:inline-block;
	margin-bottom:8px;
}
#maincontents .postnosearch .small_bt{
	padding:10px 12px;
	border:1px solid #ddd;
	border-radius:8px;
	font-size:14px;
	box-sizing:border-box;
}
#maincontents input:focus,
#maincontents select:focus,
#maincontents textarea:focus{
	border-color:#b13a3a;
	outline:none;
	box-shadow:0 0 0 3px rgba(177,58,58,0.1);
}
@media (max-width:768px){
	#maincontents table{
		border-radius:12px;
	}
	#maincontents table td{
		padding:12px 15px;
		font-size:13px;
	}
}

/* =============================
Top Page
===============================*/
/* ヒーロー */
.hero {
  display: flex;
  gap: 30px;
  align-items: center;
  background: #ffffff;
  padding: 0 20px 20px 20px;
  border-radius: 6px;
  border: 1px solid #e1e5ea;
  margin-bottom: 30px;
}

.hero-image img {
  width: 260px;
  border-radius: 4px;
}

.hero-content h2 {
  font-size: 28px;
  color: #0f2d4a;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.lead {
  font-size: 16px;
  color: #444;
  margin-bottom: 25px;
  line-height: 1.8;
	text-align:left;
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  border-left: 3px solid #2f6fab;
  padding-left: 12px;
}
.feature-list li::before {
  content: none;
}

/* レスポンシブ */
@media (max-width: 768px) {
	.hero {
		display: inline-block;
		flex-direction: column;
		margin:10px 0 0 0;
		text-align: center;
	}
	.feature-list {
		text-align:left;
		list-style: none;
		padding: 0;
	}
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #0f2d4a;
  border-left: 4px solid #1f4e79;
  padding-left: 12px;
  margin-bottom: 30px;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}

.topic-card {
  background: #ffffff;
  padding: 30px;
  border: 1px solid #e1e5ea;
  border-radius: 6px;
  transition: 0.3s;
}

.topic-card:hover {
  border-color: #1f4e79;
}

.topic-card h3 {
  margin-bottom: 15px;
  color: #0f2d4a;
}

.btn-outline {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 18px;
  border: 1px solid #1f4e79;
  color: #1f4e79;
  text-decoration: none;
  border-radius: 4px;
}

.btn-outline:hover {
  background: #1f4e79;
  color: #fff;
}
/*** CM ***/
.cmarea {
	background: #fff;
	border-radius: 8px;
	padding: 30px;
	text-decoration:none;
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
	margin-bottom: 40px;
}
.cmarea a {
	text-decoration:none;
	color:#555;
}

/*** HistoryArea ***/
.historyarea {
  background: #ffffff;
  border: 1px solid #e6e9ee;
  padding: 20px;
	margin:0 0 30px 0;
  border-radius: 0;          /* 角丸なし */
}


/* 行全体 */
.historyarea .history-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* 日付（固定幅） */
.historyarea .history-date {
  flex: 0 0 120px;
  font-size: 15px;        /* ← サイズUP */
  font-weight: 500;       /* ← 少しだけ強く */
  color: #5f6b78;         /* ← 少し濃く */
  line-height: 1.7;
  white-space: nowrap;
}
.historyarea .history-date,
.historyarea .history-body {
  line-height: 1.3;   /* 1.7 → 1.5 */
}

/* 本文側 */
.historyarea .history-body {
  flex: 1;
  min-width: 0;
}
.historyarea .toplink {
  color: #0f2d4a;
  text-decoration: none;
  font-weight: 500;
}


/* 説明文 */
.historyarea .history-text {
  margin-left: 6px;
}
/* 共通バッジ */
.historyarea .topix {
  position: relative;
  padding: 5px 90px 5px 18px;
}
.historyarea .topix::after {
  position: absolute;
  right: 0;
  top: 5px;        /* paddingと揃える */
  transform: none;
  font-size: 12px;
  letter-spacing: 1px;
}

/* NEW */
.historyarea .topix.new::after {
  content: "新着";
  color: #0f3d66;   /* 少し明るめブルー */
  font-size: 12px;
  background: #f3f6f9;
  padding: 2px 8px;
  letter-spacing: 1px;
}

/* UPDATE */
.historyarea .topix.update::after {
  content: "更新";
  color: #7a8896;   /* もっと薄く */
  font-size: 12px;
  background: #f3f6f9;
  padding: 2px 8px;
  border-radius: 2px;
}

/* IMPORTANT */
.historyarea .topix.important::after {
  content: "重要";
  color: #b00020;   /* しっかり赤 */
  font-size: 12px;
  background: #f3f6f9;
  padding: 2px 8px;
  font-weight: 600;
}
.historyarea .topix.important::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: #b00020;
}