@charset "utf-8";
/* =====================================================================
   お茶旅 2026 ― 本文の見た目（kimuraen.com 全ページ共通）
   ---------------------------------------------------------------------
   基準：お茶旅 正典 v2
     傘の一行「お茶の香り立つ、そこが、あなただけの心の茶の間。」
     検品基準「思想は濃く、表現は静かに」
   効く範囲：本文の枠（.main-contents）の中だけ。
     ヘッダー・メニュー・左ナビ・フッターの手描きの雰囲気には触らない。
   読み込み：テンプレート（base.dwt）の </head> の直前、ほかのCSSより後ろ。
   作成：クロちゃん 2026-10-21
   ===================================================================== */

/* ---------- 色と書体の決まり（ここを変えれば全体が変わる） ---------- */
.main-contents {
	--ot-ink:    #2b2a28;  /* 墨：本文 */
	--ot-ai:     #1c2f36;  /* 藍：見出し */
	--ot-shu:    #a8452e;  /* 朱：印・価格・大事な一言 */
	--ot-cha:    #6f7d45;  /* 茶：若い茶葉の緑。線や小さな飾り */
	--ot-kinari: #f4eede;  /* 生成り：地 */
	--ot-washi:  #fbf8f0;  /* 和紙：箱の中 */
	--ot-line:   #d8cfb8;  /* 罫線 */
	--ot-sub:    #6a6660;  /* 注記 */
	--ot-mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--ot-tegaki: "fot-klee-pro", "Klee One", "Noto Serif JP", serif;
}

/* ---------- 1. 本文：明朝で、静かに読める文字 ---------- */
.main-contents {
	font-family: var(--ot-mincho);
	font-weight: 400;
	color: var(--ot-ink);
}
.main-contents,
.main-contents * {
	text-shadow: none !important;          /* 全体に掛かっていた文字の影を外す */
}
.main-contents p,
.main-contents li,
.main-contents dd,
.main-contents td,
.main-contents th {
	font-size: 16px;
	line-height: 1.95;
	letter-spacing: .04em;
}
.main-contents .kiji {
	font-weight: 400;                       /* 会社概要用の太字を本文に持ち込まない */
}
.main-contents b,
.main-contents strong {
	font-weight: 600;
}

/* ---------- 2. 見出し：手書きの柔らかさ（クレー）＋朱の小さな印 ---------- */
.main-contents h2 {
	font-family: var(--ot-tegaki);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.6;
	letter-spacing: .1em;
	color: var(--ot-ai);
	text-align: center;
	margin: 32px 0 20px;
}
.main-contents h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin: 12px auto 0;
	background: var(--ot-shu);
}
.main-contents h3 {
	font-family: var(--ot-tegaki);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.6;
	letter-spacing: .08em;
	color: var(--ot-ai);
}
/* 本文の中の区切り見出し（新しいページはこれを使う） */
.main-contents .midashi2,
.main-contents .ot-midashi {
	margin: 44px 0 16px;
	padding: 0 0 8px 0;
	border-bottom: 1px solid var(--ot-line);
}
.main-contents .midashi2::before,
.main-contents .ot-midashi::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 12px 3px 2px;
	background: var(--ot-cha);
	border-radius: 0 8px 0 8px;            /* 茶葉のかたち */
	vertical-align: middle;
}
.main-contents .midashi1-main {
	font-size: 24px;
}

/* ---------- 3. 表：赤いグラデーションをやめ、生成りの罫線に ---------- */
.main-contents table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 10px 0 16px;
	background: var(--ot-washi);
}
.main-contents table tr,
.main-contents table tr:nth-child(2n+1),
.main-contents table tr:hover {
	background: transparent;
	cursor: auto;
}
.main-contents table th,
.main-contents table td {
	border: 1px solid var(--ot-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 10px 14px;
	vertical-align: top;
	text-align: left;
	font-size: 15px;
}
.main-contents table th {
	background: #efe8d6 !important;
	background-image: none !important;
	color: var(--ot-ai);
	font-weight: 600;
	width: 30%;
}
.main-contents table td {
	background: var(--ot-washi);
	color: var(--ot-ink);
}

/* ---------- 4. 商品カード（一覧・商品ページ共通） ---------- */
.main-contents .caption h3 {
	font-family: var(--ot-mincho);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: .04em;
	color: var(--ot-ai);
	margin: 8px 0 6px;
}
.main-contents .caption h3 font {
	font-size: 14px;
	font-weight: 400;
	color: var(--ot-sub);
}
.main-contents .price {
	font-family: var(--ot-mincho);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ot-shu);
	margin: 2px 0 2px;
}
.main-contents .price font {
	font-size: 14px;
	font-weight: 400;
	color: var(--ot-sub);
}
.main-contents .productContent {
	font-size: 14px;
	line-height: 1.75;
	color: var(--ot-ink);
	text-align: center;
	margin: 0 0 8px;
	padding-bottom: 6px;
}

/* カート（e-shops）の選択肢 */
.main-contents .caption select,
.main-contents .caption textarea,
.main-contents .caption input[type="text"] {
	width: 100%;
	max-width: 340px;
	font-family: var(--ot-mincho);
	font-size: 15px;
	padding: 4px 6px;
	margin: 2px 0 8px;
	border: 1px solid #cfc6b0;
	border-radius: 4px;
	background: #fff;
	color: var(--ot-ink);
}

/* ---------- 5. リンクと注記 ---------- */
.main-contents a {
	color: var(--ot-ai);
}
.main-contents a:hover,
.main-contents a:focus {
	color: var(--ot-shu);
}
.main-contents .ot-note {
	font-size: 14px;
	color: var(--ot-sub);
}
.main-contents .ot-shu {
	color: var(--ot-shu);
}

/* ---------- 6. 新しいページ用の部品（任意） ---------- */
/* 冒頭のひとこと */
.main-contents .ot-lead {
	font-size: 18px;
	line-height: 2.1;
	text-align: center;
	margin: 28px 0 12px;
	color: var(--ot-ai);
}
/* 和紙の箱（ギフトの案内・カートなど） */
.main-contents .ot-box {
	background: rgba(251, 248, 240, .92);
	border: 1px solid var(--ot-line);
	border-radius: 6px;
	padding: 18px 20px;
	margin: 16px 0;
}

/* ---------- 7. スマホ ---------- */
@media (max-width: 767px) {
	.main-contents p,
	.main-contents li,
	.main-contents dd,
	.main-contents td,
	.main-contents th {
		font-size: 15px;
		line-height: 1.9;
	}
	.main-contents h2 { font-size: 22px; }
	.main-contents h3 { font-size: 19px; }
	.main-contents .caption h3 { font-size: 16px; }
	.main-contents table th { width: 34%; }
}

/* =====================================================================
   8. ページいちばん上のロゴ（判子の茶娘＋「お茶旅」＋小さく「掛川 木村園」）
   ---------------------------------------------------------------------
   ヘッダーのライブラリ（Library/00-head.lbi）の
   <a class="navbar-brand ot-brand"> に効く。フッターのロゴには効かない。
   判子の真ん中の高さに、2段の文字の真ん中がそろう。
   ===================================================================== */
.navbar .navbar-brand.ot-brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: auto;
	min-width: 200px;
	height: 56px;
	margin: 0;
	padding: 0 0 0 58px;
	background-image: url(../img/logo.png);
	background-repeat: no-repeat;
	background-size: 46px 46px;
	background-position: 4px center;
	text-align: left;
	text-shadow: none;
	box-shadow: none;
	letter-spacing: 0;
	color: #2b2a28;
	text-decoration: none;
}
.navbar .navbar-brand.ot-brand:hover,
.navbar .navbar-brand.ot-brand:focus {
	color: #2b2a28;
	text-decoration: none;
}
.ot-brand .ot-brand-main {
	display: block;
	font-family: "fot-klee-pro", "Klee One", "Noto Serif JP", serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: .14em;
	color: #2b2a28;
}
.ot-brand .ot-brand-sub {
	display: block;
	margin-top: 4px;
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-weight: 400;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .32em;
	color: #a8452e;
}
@media (max-width: 767px) {
	.navbar .navbar-brand.ot-brand {
		min-width: 0;
		height: 52px;
		padding-left: 52px;
		background-size: 42px 42px;
	}
	.ot-brand .ot-brand-main { font-size: 21px; }
	.ot-brand .ot-brand-sub  { font-size: 10px; letter-spacing: .26em; }
}