/*-------------------------------
デザインのブラッシュアップ（2026-10 に追加。css/main.css のあとに全ページで読み込む。functions/css_js.php）
・大きくは変えずに、うっすら高級感を足す：見出しは今のゴシック体のまま、太さを少し抑えて字間を広げ、文字色を少し温かみのある濃い色に、
  木の色の細い線を添える（明朝体は使わない）。NEWS の一覧・記事は読みやすさを中心に整える
・css/main.css（src/stylus）は変えていない
-------------------------------*/
:root {
	--rf-ink: #3d3833;        /* 見出しの色 */
	--rf-text: #4d4741;       /* 本文の色（以前は #555） */
	--rf-muted: #9a9086;      /* 日付など */
	--rf-wood: #9c8263;       /* アクセント（木の色） */
	--rf-wood-dark: #74593a;
	--rf-line: #e8e2da;
	--rf-paper: #faf8f5;      /* 引用・リストの背景 */
}

body {
	color: var(--rf-text);
}

/* 段落（以前は #707070。少しだけ濃く、温かみのある色に。写真の上の白い文字などは main.css の指定のまま） */
p {
	color: #635c55;
}

/*-------------------------------
各ページのタイトル
-------------------------------*/
h2.page-title,
h1.page-title {
	font-weight: 500;
	letter-spacing: .2em;
	color: var(--rf-ink);
}

h2.page-title::after,
h1.page-title::after {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	margin: .9em auto 0;
	background-color: var(--rf-wood);
}

/*-------------------------------
NEWS の一覧
-------------------------------*/
div#newsArchive ul#news li.post {
	padding-bottom: 2em;
	border-bottom: 1px solid var(--rf-line);
}

div#newsArchive ul#news li.post:last-child {
	border-bottom: 0;
}

div#newsArchive ul#news li.post div.thumb {
	border-color: transparent;
	transition: opacity .4s;
}

div#newsArchive ul#news li.post:hover div.thumb {
	opacity: .85;
}

div#newsArchive ul#news li.post div.text h3 {
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: .06em;
	color: var(--rf-ink);
	transition: color .3s;
}

div#newsArchive ul#news li.post:hover div.text h3 {
	color: var(--rf-wood-dark);
}

div#newsArchive ul#news li.post div.text p.date {
	color: var(--rf-muted);
	letter-spacing: .18em;
}

div#newsArchive ul#news li.post div.text div.exc {
	line-height: 2;
	color: #6a635c;
}

/*-------------------------------
NEWS の記事
-------------------------------*/
div#newsSingle section {
	max-width: 760px;
}

div#newsSingle section h2.title {
	margin-top: 2.2em;
	font-size: 1.6em;
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: .06em;
	color: var(--rf-ink);
}

div#newsSingle section p.date {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 1.4em 0 3.2em;
	color: var(--rf-muted);
	letter-spacing: .2em;
}

div#newsSingle section p.date::before {
	content: "";
	width: 24px;
	height: 1px;
	background-color: var(--rf-wood);
}

/* 本文 */
div#newsSingle div.post {
	line-height: 2.05;
	color: var(--rf-text);
}

div#newsSingle div.post p {
	margin-bottom: 1.6em;
	color: var(--rf-text);
}

div#newsSingle div.post strong {
	font-weight: 600;
	color: var(--rf-ink);
}

/* 本文の見出し（以前は UIkit の大きな太字のまま） */
div#newsSingle div.post h1,
div#newsSingle div.post h2,
div#newsSingle div.post h3,
div#newsSingle div.post h4 {
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--rf-ink);
}

div#newsSingle div.post h1 {
	margin: 0 0 1.4em;
	padding-bottom: .9em;
	border-bottom: 1px solid var(--rf-line);
	font-size: 1.35em;
	line-height: 1.7;
}

div#newsSingle div.post h2 {
	margin: 3em 0 1.2em;
	padding-left: .9em;
	border-left: 2px solid var(--rf-wood);
	font-size: 1.2em;
	line-height: 1.6;
}

div#newsSingle div.post h3 {
	margin: 2.4em 0 1em;
	font-size: 1.08em;
	line-height: 1.7;
}

div#newsSingle div.post h4 {
	margin: 2em 0 .8em;
	font-size: 1em;
}

/* リスト */
div#newsSingle div.post ul,
div#newsSingle div.post ol {
	margin: 1.4em 0 2em;
	padding: 1.3em 1.6em;
	background-color: var(--rf-paper);
	border-radius: 4px;
}

div#newsSingle div.post ul > li {
	position: relative;
	padding-left: 1.1em;
	line-height: 2;
}

div#newsSingle div.post ul > li::before {
	content: "";
	position: absolute;
	top: .95em;
	left: 0;
	width: 5px;
	height: 5px;
	background-color: var(--rf-wood);
}

div#newsSingle div.post ol {
	padding-left: 2.6em;
	list-style: decimal;
}

div#newsSingle div.post ol > li {
	line-height: 2;
}

/* 引用 */
div#newsSingle div.post blockquote {
	margin: 2em 0;
	padding: 1.3em 1.6em;
	border-left: 2px solid var(--rf-wood);
	background-color: var(--rf-paper);
	font-style: normal;
	font-size: .95em;
	line-height: 2;
	color: #5c554e;
}

div#newsSingle div.post blockquote p:last-child {
	margin-bottom: 0;
}

/* リンク */
div#newsSingle div.post a {
	font-weight: normal;
	color: var(--rf-wood-dark);
	text-decoration: underline;
	text-decoration-color: rgba(116, 89, 58, .35);
	text-underline-offset: 4px;
	transition: text-decoration-color .3s;
}

div#newsSingle div.post a:hover {
	text-decoration-color: currentColor;
}

/* 画像 */
div#newsSingle div.post img {
	margin: 2.4em auto;
}

/* 一覧・次 */
div#newsSingle section ul.postnav {
	padding-top: 2.4em;
	border-top: 1px solid var(--rf-line);
	letter-spacing: .15em;
}

div#newsSingle section ul.postnav a {
	color: var(--rf-ink);
	transition: color .3s;
}

div#newsSingle section ul.postnav a:hover {
	color: var(--rf-wood-dark);
	text-decoration: none;
}

/*-------------------------------
スマホ
-------------------------------*/
@media only screen and (max-width: 740px) {
	h2.page-title,
	h1.page-title {
		letter-spacing: .14em;
	}

	div#newsSingle section h2.title {
		font-size: 1.35em;
	}

	div#newsSingle section p.date {
		margin-bottom: 2.4em;
	}

	div#newsSingle div.post h1 {
		font-size: 1.2em;
	}

	div#newsSingle div.post h2 {
		margin-top: 2.4em;
		font-size: 1.1em;
	}

	div#newsSingle div.post ul,
	div#newsSingle div.post ol,
	div#newsSingle div.post blockquote {
		padding: 1.1em 1.2em;
	}

	div#newsSingle div.post ol {
		padding-left: 2.2em;
	}
}

/*-------------------------------
化粧合板のページ（ツキ板シートなど。single-plywood.php・ブロックエディタの本文）
-------------------------------*/
main.plywood article {
	color: var(--rf-text);
}

main.plywood article p {
	line-height: 2;
	color: var(--rf-text);
}

/* 見出し（［納期について］など） */
main.plywood article h2.wp-block-heading {
	margin: 3.6em 0 1.2em;
	padding-bottom: .7em;
	border-bottom: 1px solid var(--rf-line);
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--rf-ink);
}

/* 最初のリード文（「ご希望の樹種、サイズで〜」）は線を付けない */
main.plywood article > .wp-block-group:first-of-type h2.wp-block-heading:first-child {
	margin: 0 0 1.6em;
	padding-bottom: 0;
	border-bottom: 0;
	text-align: center;
	font-size: 1.15em;
	font-weight: 500;
	letter-spacing: .1em;
}

main.plywood article h3.wp-block-heading {
	margin: 2.4em 0 .8em;
	padding-left: .8em;
	border-left: 2px solid var(--rf-wood);
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.6;
	color: var(--rf-ink);
}

/* 写真 */
main.plywood article figure.wp-block-image {
	margin: 2.2em 0;
}

main.plywood article figure.wp-block-image + p {
	margin-top: .4em;
}

/* リスト（ご利用例の小見出しや、ご注文の流れなど） */
main.plywood article ul.wp-block-list {
	margin: 1.8em 0 .6em;
	padding-left: 0;
	list-style: none;
}

main.plywood article ul.wp-block-list > li {
	position: relative;
	padding-left: 1.1em;
	line-height: 1.9;
	color: var(--rf-ink);
}

main.plywood article ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	top: .85em;
	left: 0;
	width: 5px;
	height: 5px;
	background-color: var(--rf-wood);
}

/* 本文のリンク */
main.plywood article p a {
	color: var(--rf-wood-dark);
	text-decoration: underline;
	text-decoration-color: rgba(116, 89, 58, .35);
	text-underline-offset: 4px;
	transition: text-decoration-color .3s;
}

main.plywood article p a:hover {
	text-decoration-color: currentColor;
}

main.plywood article p.readmore a {
	color: var(--rf-ink);
	text-decoration: none;
	letter-spacing: .12em;
}

/* 表（会社概要） */
main.plywood article .wp-block-table table {
	border-collapse: collapse;
	border-top: 1px solid var(--rf-line);
}

/* 見出しのすぐ下の表は、見出しの線と二重にならないように */
main.plywood article h2.wp-block-heading + .wp-block-table table {
	border-top: 0;
}

main.plywood article .wp-block-table td {
	padding: 1.1em .8em;
	border: 0;
	border-bottom: 1px solid var(--rf-line);
	color: var(--rf-text);
}

main.plywood article .wp-block-table td:first-child {
	width: 9em;
	color: var(--rf-ink);
	font-weight: 600;
	letter-spacing: .08em;
}

/*-------------------------------
お問い合わせ（page-contact.php・Contact Form 7）
-------------------------------*/
div#pageContact div.content form.wpcf7-form label {
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--rf-ink);
}

/* 必須（入力が必須の項目だけ。:has() に対応していないブラウザでは出ない） */
div#pageContact div.content form.wpcf7-form p:has([aria-required="true"]) > label::after {
	content: "必須";
	display: block;
	width: fit-content;
	margin-top: .4em;
	padding: 0 .55em;
	border: 1px solid var(--rf-wood);
	border-radius: 2px;
	font-size: 10px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .1em;
	color: var(--rf-wood-dark);
}

/* スマホ（項目名が入力欄の上に来る）では横に並べる */
@media only screen and (max-width: 1025px) {
	div#pageContact div.content form.wpcf7-form p:has([aria-required="true"]) > label::after {
		display: inline-block;
		margin: 0 0 0 .7em;
	}
}

html[lang^="en"] div#pageContact div.content form.wpcf7-form p:has([aria-required="true"]) > label::after {
	content: "Required";
}

div#pageContact div.content form.wpcf7-form input:not([type="submit"]),
div#pageContact div.content form.wpcf7-form textarea {
	padding: .85em 1em;
	border: 1px solid #d6cec4;
	border-radius: 2px;
	background-color: #fcfbf9;
	color: var(--rf-ink);
	font-size: 16px;
	line-height: 1.6;
	outline: none;
	transition: border-color .3s, box-shadow .3s, background-color .3s;
}

div#pageContact div.content form.wpcf7-form input:not([type="submit"]):hover,
div#pageContact div.content form.wpcf7-form textarea:hover {
	border-color: #bfb3a5;
}

div#pageContact div.content form.wpcf7-form input:not([type="submit"]):focus,
div#pageContact div.content form.wpcf7-form textarea:focus {
	border-color: var(--rf-wood);
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(156, 130, 99, .15);
}

div#pageContact div.content form.wpcf7-form input::placeholder,
div#pageContact div.content form.wpcf7-form textarea::placeholder {
	color: #b9b1a8;
}

/* 送信ボタン（以前は灰色のベタ塗り） */
div#pageContact div.content form.wpcf7-form p.send {
	margin-top: 2.8em;
}

div#pageContact div.content form.wpcf7-form p.send input[type="submit"] {
	padding: 1em 0;
	border: 0;
	border-radius: 2px;
	background-color: var(--rf-ink);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .3em;
	transition: background-color .3s;
}

div#pageContact div.content form.wpcf7-form p.send input[type="submit"]:hover {
	background-color: var(--rf-wood-dark);
}

/* 入力エラー・送信の結果 */
div#pageContact div.content form.wpcf7-form .wpcf7-not-valid {
	border-color: #c4553f !important;
	background-color: #fdf6f4 !important;
}

div#pageContact div.content form.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: .5em;
	font-size: 13px;
	color: #b0442f;
}

div#pageContact div.content form.wpcf7-form .wpcf7-response-output {
	margin: 0 0 2em;
	padding: 1em 1.2em;
	border: 1px solid var(--rf-line);
	border-radius: 2px;
	background-color: var(--rf-paper);
	font-size: 14px;
	line-height: 1.8;
	text-align: center;
}

/* フォームの下の説明 */
div#pageContact div.content div.text {
	padding-top: 1.6em;
	border-top: 1px solid var(--rf-line);
	font-size: .9em;
	line-height: 2;
	color: #6a635c;
}

div#pageContact div.content div.text p {
	color: #6a635c;
}

/*-------------------------------
ヘッダー（header.php）
-------------------------------*/
header {
	border-bottom: 1px solid rgba(232, 226, 218, .7);
}

/* 言語の切り替え（以前は大きな太字） */
header ul.lang li a {
	font-size: 1em;
	font-weight: 600;
	letter-spacing: .12em;
	color: #c9c1b8;
	transition: color .3s;
}

header ul.lang li a:hover,
header ul.lang li.current-lang a {
	color: var(--rf-ink);
}

header ul.lang li.lang-item-ja::after {
	font-weight: 300;
	color: #c9c1b8;
}

/* PC のメニュー */
header ul.menu > li > a,
header ul.menu > li div.submenu > p {
	font-size: .9em;
	letter-spacing: .14em;
	color: var(--rf-ink);
	transition: color .3s;
}

header ul.menu > li > a {
	display: inline-block;
	padding-bottom: 6px;
}

/* 乗せたときの下線（以前は 2px の黒い線がそのまま出ていた）。細い木の色の線が中央から伸びる */
header ul.menu > li > a::after,
header ul.menu > li > a:hover::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: var(--rf-wood);
	transform: scaleX(0);
	transition: transform .35s ease;
}

header ul.menu > li > a:hover {
	color: var(--rf-wood-dark);
}

header ul.menu > li > a:hover::after {
	transform: scaleX(1);
}

header ul.menu > li div.submenu > p:hover {
	color: var(--rf-wood-dark);
}

/* サブメニュー（以前は背景・枠がなく、下のページと重なって読みにくかった） */
header ul.menu > li div.submenu ul.submenu {
	top: 2.2em;
	padding: 1em 1.6em 1.1em;
	border: 1px solid var(--rf-line);
	border-radius: 2px;
	background-color: #fff;
	box-shadow: 0 16px 32px -20px rgba(61, 56, 51, .35);
}

header ul.menu > li div.submenu ul.submenu li {
	margin: .55em 0;
}

header ul.menu > li div.submenu ul.submenu li a {
	font-size: .85em;
	letter-spacing: .1em;
	color: var(--rf-text);
	transition: color .3s;
}

header ul.menu > li div.submenu ul.submenu li a:hover {
	color: var(--rf-wood-dark);
}

header ul.menu > li div.submenu ul.submenu li a:hover::after {
	display: none;
}

/* スマホ・タブレットのメニュー（以前は灰色のベタ塗りに太字） */
header div.dmenu {
	background-color: #2f2b27;
	box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .6);
}

header div.dmenu section > ul {
	row-gap: 0;
	column-gap: 2.4em;
}

header div.dmenu section > ul > li {
	padding: 1.1em 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

header div.dmenu section > ul > li > a,
header div.dmenu section > ul > li > p {
	font-weight: 600;
	letter-spacing: .14em;
	color: #f4efe8;
}

header div.dmenu section > ul > li ul.submenu {
	margin-top: .4em;
}

header div.dmenu section > ul > li ul.submenu li {
	padding: .45em 0;
}

header div.dmenu section > ul > li ul.submenu li a {
	font-size: .9em;
	letter-spacing: .08em;
	color: #cbbfb1;
	transition: color .3s;
}

header div.dmenu section > ul > li ul.submenu li a:hover,
header div.dmenu section > ul > li > a:hover {
	color: #fff;
}

@media only screen and (max-width: 740px) {
	header div.dmenu {
		padding: 1.6em 2em 2.4em;
	}

	header div.dmenu section > ul {
		column-gap: 1.6em;
	}
}

/* 製品紹介のページ（ヘッダーが写真の上に透明で重なる。header.products）：文字は今まで通り白、線は出さない */
header.products {
	border-bottom-color: transparent;
}

header.products ul.lang li a {
	font-size: 1em;
	font-weight: 600;
	color: rgba(255, 255, 255, .6);
}

header.products ul.lang li a:hover,
header.products ul.lang li.current-lang a,
header.products ul.lang li.lang-item-ja::after {
	color: #fff;
}

header.products ul.menu > li > a,
header.products ul.menu > li div.submenu > p,
header.products ul.menu > li > a:hover,
header.products ul.menu > li div.submenu > p:hover {
	color: #fff;
}

header.products ul.menu > li > a::after {
	background-color: #fff;
}

header.products ul.menu > li div.submenu ul.submenu {
	border-color: transparent;
	background-color: rgba(47, 43, 39, .92);
}

header.products ul.menu > li div.submenu ul.submenu li a,
header.products ul.menu > li div.submenu ul.submenu li a:hover {
	color: #fff;
}