@charset "utf-8";
/* 後台「自訂網頁」內容的排版：關於饗家 about.php 與 訂餐須知 notice.php。
 *
 * 為什麼是一支新檔：#19 的規矩是既有六支樣式表只加不改（test_mobile_layout.sh
 * E 段拿 342ebb8 逐字比對守著）。這支走 incHead 既有的 $pageCss 機制載入，
 * 位置在 font-awesome 之後、mobile.css 之前，手機斷點仍是最後一支。
 *
 * ⚠ 內容是老闆在 CKEditor 裡編的，所以樣式只掛在「簡單語意標籤」與少數幾個
 * class 上（h3／p／strong／.cus_*）。老闆日後整段換掉，樣式頂多不生效，
 * 不會把畫面弄壞。不要設計成依賴巢狀結構的樣式。
 *
 * 寫法是手機優先：基底規則在窄螢幕就成立，桌機才用 min-width 加寬。
 */

/* ── 基底：不管有沒有掛 class，讀起來都要舒服 ── */
/* 原本這兩頁的字級是靠內容裡的 inline style 撐到 17px（Word 貼進來的殘留）。
   收到樣式表來管，內容就不必再帶 inline 樣式，老闆在 CKEditor 裡也好編。 */
/* break-word：內容裡出現不含空白的長字串（訂閱信箱 misshomegmail01+subscribe@…、
   網址）時才斷行，其餘不受影響。沒有它，Q3 那個信箱在 375px 下把整頁撐到 455px。 */
#about_area {
	font-size: 17px;
	overflow-wrap: break-word;
}

#about_area p {
	margin: 0 0 12px;
	line-height: 1.9;
}
#about_area ol,
#about_area ul {
	margin: 0 0 14px;
	padding-left: 22px;
	line-height: 1.9;
}
#about_area ol { list-style-type: decimal; }
#about_area ul { list-style-type: disc; }
#about_area li { margin-bottom: 8px; }

/* ── 簡介：跟底下的問答明顯分開的一塊 ── */
/* ⚠ 這個站沒有全域 border-box：內距與框線會加在寬度上，
   375px 下實測整頁被撐到 455px。每一塊都要自己收。 */
.cus_intro {
	box-sizing: border-box;
	margin: 0 0 8px;
	padding: 18px 16px;
	background-color: #F3F7E8;
	border: 1px solid #98CF36;
	border-radius: 8px;
	text-align: center;
}
.cus_intro p { margin: 0; }

/* ── 段落標題：一條橫線把上下切開，這是「段落分明」的主力 ── */
#about_area h3,
.cus_head {
	clear: both;
	margin: 34px 0 16px;
	padding: 0 0 8px;
	border-bottom: 3px solid #98CF36;
	font-family: "微軟正黑體", Arial;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	color: #648E19;
}

/* 標題底下的一句指路，跟問答本體區隔開 */
.cus_note {
	margin: 0 0 16px;
	font-size: 15px;
	color: #6B7F4A;
}

/* ── 問答：一題一張卡，十七題才掃得動 ── */
.cus_qa > p {
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 12px 14px;
	background-color: #FAFAF5;
	border: 1px solid #E2E6D8;
	border-left: 4px solid #98CF36;
	border-radius: 6px;
}
.cus_qa > p > strong:first-child {
	display: block;
	margin-bottom: 4px;
	font-size: 17px;
	color: #3F5A0C;
}

@media (min-width: 768px) {
	#about_area h3,
	.cus_head { font-size: 22px; }
	.cus_intro { padding: 22px 20px; }
	.cus_qa > p { padding: 14px 18px; }
}