/*
 * refine.css — tpl_021_rwd の見た目を整える上書き用スタイル (2026-10-23)
 * style.css の後に読み込む。HTML は変えていないので、このファイルを外せば元の見た目に戻る。
 */

:root {
	--accent: #2c3e63;
	--accent-dark: #1c2a45;
	--accent-soft: rgba(44,62,99,.16);
	--ink: #262b33;
	--muted: #6b7380;
	--line: #e6e8ec;
	--soft: #f6f7f9;
	--radius: 10px;
	--shadow: 0 2px 10px rgba(20, 24, 33, .07);
}

/* 全体 */
body {
	font: 15px/1.85 "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	color: var(--ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	border-top: 4px solid var(--accent);
}
a { color: var(--accent); transition: color .15s, background-color .15s; }
a:hover { color: var(--accent-dark); }

/* ヘッダー */
#header { height: auto; padding-bottom: 14px; overflow: hidden; }
#header h1 { padding: 8px 0 10px 15px; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.logo p { font-size: 24px; font-weight: 700; letter-spacing: .06em; line-height: 1.4; }
.logo span { font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: .04em; }
#header a, #header a:hover { color: var(--ink); }

/* メニュー（PC） */
@media only screen and (min-width: 960px) {
	nav#mainNav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; }
	nav#mainNav div.panel { float: none; }
	nav#mainNav .panel > ul, nav#mainNav .panel > div > ul { display: flex; justify-content: center; }
	nav#mainNav ul li { float: none; }
	nav#mainNav li:last-child { border-right: 0; }
	nav#mainNav .panel > ul > li > a, nav#mainNav .panel > div > ul > li > a { width: auto; padding: 0 26px; white-space: nowrap; }
	nav#mainNav ul li a {
		height: 56px;
		padding-top: 0;
		line-height: 56px;
		font-size: 15px;
		font-weight: 500;
		color: var(--ink);
		border-left: 0;
		box-shadow: inset 0 -3px 0 transparent;
	}
	nav#mainNav ul li a strong { font-weight: 500; }
	nav#mainNav li.current-menu-item a,
	nav#mainNav li a:hover,
	nav#mainNav li.current-menu-item li a:hover {
		padding-top: 0;
		color: var(--accent);
		background: transparent;
		box-shadow: inset 0 -3px 0 var(--accent);
	}
	nav#mainNav ul ul {
		width: 220px;
		top: 56px !important;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 0 0 8px 8px;
		box-shadow: var(--shadow);
	}
	nav#mainNav ul li li { width: 220px; }
	nav#mainNav ul li li a { height: auto; padding: 10px 14px; line-height: 1.6; font-size: 14px; box-shadow: none; }
	nav#mainNav ul li li a:hover { background: var(--soft); box-shadow: none; }
}

/* メニュー（スマホ） */
@media only screen and (max-width: 959px) {
	nav#mainNav { border-color: var(--line); }
	nav#mainNav a.menu { height: 48px; line-height: 48px; background: var(--accent); }
	nav#mainNav a#menu span { color: #fff; letter-spacing: .1em; }
	nav#mainNav ul li a, nav#mainNav ul li.current-menu-item li a { padding: 14px 16px; border-bottom: 1px solid var(--line); }
}

/* メイン画像 */
#mainBanner img { border-radius: var(--radius); }

/* 本文 */
h3.heading {
	margin: 4px 0 6px;
	padding: 10px 16px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ink);
	background: var(--soft);
	border-bottom: 0;
	border-left: 4px solid var(--accent);
	border-radius: 0 6px 6px 0;
}
section.content article { padding: 18px 4px; }
.post p { padding-bottom: 16px; }
.post h1 { border-bottom-color: var(--accent); }
.post h2 { font-weight: 700; border-bottom-color: var(--accent); }
.post h3 { font-weight: 700; color: var(--ink); border-bottom-color: var(--accent); }
.post ul li { background: none; position: relative; }
.post ul li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.post table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.post table th, .post table td { padding: 12px 14px; line-height: 1.7; border: 0; border-bottom: 1px solid var(--line); }
.post table th { width: 28%; text-align: left; font-weight: 700; color: var(--ink); background: var(--soft); letter-spacing: .02em; }
.post table td { background: #fff; }
section.content img, .post img { border-radius: 8px; }

/* サイドバー */
#sidebar li { border-bottom: 1px solid var(--line); }
#sidebar li a { font-size: 14px; color: var(--ink); }
#sidebar li a:hover { color: var(--accent); }

/* フォーム（Jetpack・共通） */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	height: auto;
	padding: 10px 12px;
	line-height: 1.6;
	font: inherit;
	color: var(--ink);
	border: 1px solid #cdd2d9;
	border-radius: 8px;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type="submit"], input[type="reset"], input[type="button"], button[type="submit"], .wp-block-button__link {
	min-width: 200px;
	padding: 12px 28px;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--accent);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}
input[type="submit"]:hover, button[type="submit"]:hover, .wp-block-button__link:hover { background: var(--accent-dark); color: #fff; }
.contact-form label, .grunion-field-label { font-weight: 700; }

/* フッター */
#footer { margin-top: 20px; padding: 24px 10px 10px; color: #cfd5dd; background: #1f242b; box-shadow: 0 0 0 100vmax #1f242b; clip-path: inset(0 -100vmax); }
#footer a, #footer .logo, #footer .info .tel, #footer .info .tel span, #footer #info .open { color: #e6eaef; }
#footer a:hover { color: #fff; }
ul.footnav li { font-size: 13px; border-right-color: rgba(255, 255, 255, .25); }
#copyright { padding: 18px 0 28px; font-size: 12px; color: #9aa3ae; background: #1f242b; box-shadow: 0 0 0 100vmax #1f242b; clip-path: inset(0 -100vmax); }
#copyright a { color: #c3cbd4; }

/* ロゴ画像 (2026-10-23) */
.logo img { height: 56px; width: auto; padding: 4px 0 0 15px; }
#footer .logo img { height: 44px; padding: 8px 14px; margin-bottom: 6px; background: #fff; border-radius: 8px; }
@media only screen and (max-width: 640px) { .logo img { height: 48px; padding: 0; } }
