@charset "utf-8";

/*
 * shopnews.css  -  掲載店ニュース枠
 *
 * 動作確認が済んだら、この内容を basic.css の末尾に移してください。
 * 折りたたみは display の inline style ではなくクラスで制御しています
 * （「全表示」ボタンが $("#shoplist *").css("display","") を実行するため）。
 */

/* ★色と太さの設定。変えるのはここだけです。
   line : 囲み罫線  #E8A860 ふつう ／ #F0C89A 控えめ ／ #F5A623 はっきり
   bg   : 見出し行の背景
   side : 写真セルとアイコンセルの背景（bg と同じ値にすれば完全に揃います）
   body : 展開したニュース本文の背景 */
#shoplist {
	--shopnews-line: #E8A860;
	--shopnews-w: 2px;
	--shopnews-bg: #FFFCF7;
	--shopnews-side: #FDF5EA;
	--shopnews-body-bg: #FFF;
}

/* --- 掲載店ブロックの囲み ------------------------------------
   どの辺を引くかは shopnews.js の frameBlock() がセル単位で判断し、
   sn-t / sn-b / sn-l / sn-r のクラスを付けます。            */

#shoplist td.sn-t { border-top:    var(--shopnews-w) solid var(--shopnews-line, #E8A860); }
#shoplist td.sn-b { border-bottom: var(--shopnews-w) solid var(--shopnews-line, #E8A860); }
#shoplist td.sn-l { border-left:   var(--shopnews-w) solid var(--shopnews-line, #E8A860); }
#shoplist td.sn-r { border-right:  var(--shopnews-w) solid var(--shopnews-line, #E8A860); }

/* 左右の列を淡く色づけて、ブロック全体をひとまとまりに見せる。
   写真セルの既定色 #CCC を確実に上書きするため [rowspan] で詳細度を上げる */
#shoplist tr.shopdata1 td.sn-l[rowspan],
#shoplist tr.shopdata1 td.sn-r[rowspan],
#shoplist td.sn-l,
#shoplist td.sn-r {
	background-color: var(--shopnews-side, #FDF5EA);
}

/* --- ニュース行の中身 ---------------------------------------- */

#shoplist tr.shopnews td.shopnews-cell {
	background-color: var(--shopnews-bg, #FFFCF7);
	padding: 0;
}

.shopnews-inner {
	/* 横スクロール時も見出しが左端に残る。
	   padding はここには置かない。置くと本文の白背景が端まで届かなくなる */
	position: sticky;
	left: 0;
	max-width: 96vw;
	text-align: left;
}

.shopnews-head {
	display: block;
	padding: 5px 8px;
	/* 見出しが nowrap なので、上限を決めないとテーブルごと押し広げてしまう。
	   PC表示は #shoplist が 740px、写真54px とアイコン44px を除いて約635px。
	   titleMax の文字数制限と二重の歯止めにする */
	max-width: 620px;
	text-decoration: none;
	color: #333;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.shopnews-head:hover {
	text-decoration: underline;
}

.shopnews-head::after {
	content: "▼";
	font-size: 9px;
	color: #999;
	margin-left: 5px;
	vertical-align: 1px;
}

.shopnews-inner.is-open .shopnews-head::after {
	content: "▲";
}

.shopnews-today {
	display: inline-block;
	font-size: 10px;
	line-height: 1.0;
	color: #FFF;
	background-color: #C33;
	padding: 3px 5px;
	margin-right: 6px;
	vertical-align: 1px;
	border-radius: 2px;
}

.shopnews-name {
	font-size: 11px;
	color: #666;
	margin-right: 6px;
}

.shopnews-name::after {
	content: "｜";
	color: #BBB;
	margin-left: 4px;
}

.shopnews-title {
	font-size: 13px;
}

/* --- 折りたたみ本体 ------------------------------------------ */

.shopnews-body {
	display: none;
}

.shopnews-inner.is-open .shopnews-body {
	display: block;
	padding: 6px 8px;
	border-top: 1px #DDD dotted;
	background-color: var(--shopnews-body-bg, #FFF);
	overflow: hidden;         /* 画像の回り込みを内側で閉じる */
}

.shopnews-img {
	float: left;
	max-width: 120px;
	height: auto;
	margin: 0 10px 4px 0;
}

.shopnews-text {
	font-size: 12px;
	line-height: 1.6;
	color: #333;
	white-space: pre-wrap;      /* 本文の改行をそのまま活かす */
	overflow-wrap: break-word;
	margin: 0;
}

.shopnews-text a.shopnews-link {
	color: #06C;
	text-decoration: underline;
	overflow-wrap: break-word;
}

.shopnews-text a.shopnews-link:hover {
	color: #C33;
}

@media all and (max-width: 640px) {
	.shopnews-title {
		font-size: 12px;
	}
	.shopnews-img {
		max-width: 84px;
	}
}

/* --- 診断表示（?shopnews=debug のときだけ出る） --------------- */

.shopnews-debug {
	margin: 0 0 10px;
	border: 2px #39C solid;
	background-color: #FFF;
	font-size: 12px;
	text-align: left;
}

.shopnews-debug-h {
	background-color: #39C;
	color: #FFF;
	padding: 4px 8px;
	font-size: 11px;
}

table.shopnews-debug-t {
	width: 100%;
	border-collapse: collapse;
}

table.shopnews-debug-t th,
table.shopnews-debug-t td {
	border: 1px #CCC solid;
	padding: 2px 6px;
	font-size: 11px;
	white-space: nowrap;
}

table.shopnews-debug-t th {
	background-color: #EEE;
}

table.shopnews-debug-t tr.is-warn td {
	background-color: #FFF6E5;
}

table.shopnews-debug-t tr.is-skip td {
	color: #999;
}

.shopnews-debug-lost {
	padding: 6px 8px;
	background-color: #FFE8E8;
	border-bottom: 1px #C33 solid;
	color: #900;
	font-size: 11px;
	line-height: 1.6;
}