/* =========================================================
   HRCWEB Blog — main stylesheet
   ========================================================= */

:root {
	--hrc-orange: #FA8000;
	--hrc-navy: #1a3a5f;
	--hrc-text: #1a1a1a;
	--hrc-text-soft: #707070;
	--hrc-border: #E6E6E6;
	--hrc-content-width: 800px;
	--hrc-title-width: 900px;
	--hrc-wide-width: 1340px;
}

/* ---------- Header / Footer（メインサイトと共通デザイン） ---------- */

.hrc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	padding: 20px 0;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	color: #333;
	font-size: 14px;
	line-height: 1.6;
}

body.admin-bar .hrc-header {
	top: 32px;
}

.hrc-header a {
	color: #333;
	text-decoration: none;
}

.hrc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 12px;
}

.hrc-logo {
	display: inline-block;
	line-height: 0;
	flex-shrink: 0;
}

.hrc-logo img {
	display: block;
	width: auto;
	max-width: 300px;
	height: auto;
	max-height: 50px;
}

.hrc-search {
	display: flex;
	align-items: center;
	width: 405px;
	padding: 10px;
	background: #E6E6E6;
	margin: 0;
}

.hrc-search input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 10px;
	border: 0;
	background: #fff;
	font-size: 16px;
	font-family: inherit;
}

.hrc-search button {
	flex-shrink: 0;
	margin-left: 5px;
	padding: 9px 12px;
	border: 1px solid #333;
	background: #fff;
	color: #333;
	font-size: 12px;
	font-family: inherit;
	cursor: pointer;
}

.hrc-header-menu {
	display: flex;
}

.hrc-gnav {
	display: flex;
	align-items: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hrc-gnav li {
	margin-left: 20px;
	font-size: 10px;
	text-align: center;
}

.hrc-gnav-account li:last-child {
	margin-right: 16px;
}

.hrc-gnav-main a {
	font-weight: bold;
}

.hrc-gnav i {
	display: block;
	margin-bottom: 2px;
	font-size: 16px;
	color: #707070;
}

.hrc-gnav a:hover,
.hrc-gnav a:hover i {
	color: #FA8000;
}

.hrc-free-shipping {
	max-width: 1200px;
	margin: 12px auto 0;
	padding: 5px;
	background: #FA8000;
	text-align: center;
	font-size: 14px;
}

.hrc-free-shipping a {
	color: #fff;
	text-decoration: none;
}

.hrc-main {
	min-height: 40vh;
}

.hrc-footer {
	margin-top: 60px;
	color: #333;
	font-size: 14px;
	line-height: 1.6;
}

.hrc-footer a {
	color: #333;
	text-decoration: none;
}

.hrc-guide {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 12px 50px;
}

.hrc-guide-title {
	margin: 0 0 8px;
	padding: 4px 8px;
	border-left: 4px solid #FA8000;
	font-size: 16px;
	font-weight: bold;
}

.hrc-guide-cols {
	display: flex;
	justify-content: space-between;
	gap: 60px;
}

.hrc-guide-col {
	flex: 1;
	min-width: 0;
}

.hrc-guide-section h3 {
	margin: 32px 0 24px;
	padding: 0 0 4px;
	border-bottom: 1px solid #ccc;
	font-size: 15px;
	font-weight: normal;
}

.hrc-guide-body p,
.hrc-guide-body dl,
.hrc-guide-body dd {
	margin: 0;
}

.hrc-guide-body dt {
	margin: 16px 0 8px;
	padding: 2px 8px;
	border-left: 4px solid #ccc;
	font-weight: bold;
}

.hrc-guide-body ul {
	margin: 0;
	padding-left: 1.5em;
}

.hrc-guide-body p + p {
	margin-top: 8px;
}

.hrc-guide-link {
	display: flex;
	justify-content: center;
	margin-top: 16px;
	padding: 16px;
	border: 1px solid #333;
	background: #fff;
}

.hrc-guide-link:hover {
	background: #333;
	color: #fff !important;
}

.hrc-footer-bar {
	background: #E6E6E6;
}

.hrc-footer-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 35px 12px;
}

.hrc-footer-nav {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hrc-footer-nav li {
	margin-right: 30px;
}

.hrc-footer-copy {
	max-width: 320px;
	font-size: 12px;
}

@media screen and (max-width: 1024px) {
	.hrc-gnav-account {
		display: none;
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar .hrc-header {
		top: 0;
	}
}

@media screen and (max-width: 768px) {
	.hrc-header {
		padding: 10px 0;
	}

	.hrc-header-inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	.hrc-logo img {
		max-width: 180px;
		max-height: 40px;
	}

	.hrc-gnav li {
		margin-left: 14px;
	}

	.hrc-search {
		order: 3;
		width: 100%;
		padding: 6px;
	}

	.hrc-search input {
		height: 36px;
	}

	.hrc-free-shipping {
		margin: 8px 12px 0;
		font-size: 12px;
	}

	.hrc-guide-cols {
		display: block;
	}

	.hrc-guide-section h3 {
		position: relative;
		margin: 0;
		padding: 14px 24px 14px 0;
		cursor: pointer;
	}

	.hrc-guide-section h3::after {
		content: "+";
		position: absolute;
		right: 4px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 18px;
		color: #707070;
	}

	.hrc-guide-section.is-open h3::after {
		content: "−";
	}

	.hrc-guide-body {
		display: none;
		padding: 8px 0 20px;
	}

	.hrc-guide-section.is-open .hrc-guide-body {
		display: block;
	}

	.hrc-footer-bar-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 28px 16px;
	}

	.hrc-footer-nav li {
		margin: 0 20px 8px 0;
	}
}

/* ---------- Shared page title / lead ---------- */

.hrc-page-title {
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	margin: 40px 0 12px;
	color: #333;
}

.hrc-page-lead {
	max-width: 720px;
	margin: 0 auto 40px;
	color: var(--hrc-text-soft);
	font-size: 14px;
	line-height: 1.9;
	text-align: center;
}

.hrc-empty,
.hrc-empty-page {
	text-align: center;
	color: var(--hrc-text-soft);
	padding: 40px 0 80px;
}

/* ---------- Article list / archive grid ---------- */

.hrc-articles-page {
	padding: 16px 100px 60px;
}

.hrc-article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hrc-article-card {
	border: 1px solid var(--hrc-border);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .2s ease, transform .2s ease;
}

.hrc-article-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

.hrc-card-thumb {
	display: block;
	aspect-ratio: 1440 / 756;
	overflow: hidden;
	background: #F8F5F1;
}

.hrc-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hrc-card-thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
}

.hrc-card-title {
	font-size: 18px;
	line-height: 1.5;
	margin: 18px 20px 6px;
}

.hrc-card-title a {
	color: #333;
	text-decoration: none;
	font-weight: bold;
}

.hrc-article-card:hover .hrc-card-title a {
	color: var(--hrc-orange);
}

.hrc-card-date {
	display: block;
	font-size: 12px;
	color: #999;
	margin: 0 20px 16px;
}

.hrc-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.hrc-pagination a,
.hrc-pagination span {
	border: 1px solid var(--hrc-border);
	border-radius: 5px;
	padding: 6px 12px;
	font-size: 13px;
	color: #333;
	text-decoration: none;
}

.hrc-pagination a:hover {
	border-color: var(--hrc-orange);
	color: var(--hrc-orange);
}

.hrc-pagination span.current {
	background: var(--hrc-orange);
	border-color: var(--hrc-orange);
	color: #fff;
}

@media screen and (max-width: 900px) {
	.hrc-article-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 560px) {
	.hrc-article-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Breadcrumb (list & single) ---------- */

.hrc-breadcrumb {
	max-width: var(--hrc-title-width);
	margin: 24px auto 16px;
	padding: 0 24px;
	font-size: 13px;
	color: #767676;
	line-height: 1.6;
}

.hrc-breadcrumb a {
	color: #767676;
	text-decoration: none;
}

.hrc-breadcrumb a:hover {
	color: var(--hrc-orange);
}

.hrc-breadcrumb .sep {
	margin: 0 6px;
}

/* ---------- Single article ---------- */

.hrc-post-content {
	display: block;
}

.hrc-article-title {
	max-width: var(--hrc-title-width);
	margin: 0 auto 24px;
	padding: 0 24px;
	font-size: 28px;
	line-height: 1.5;
	font-weight: bold;
	color: #333;
}

.hrc-article-thumb {
	max-width: var(--hrc-content-width);
	margin: 0 auto 32px;
	padding: 0 24px;
}

.hrc-article-thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.hrc-article-body {
	max-width: var(--hrc-content-width);
	margin: 0 auto;
	padding: 0 24px;
	font-size: 15px;
	line-height: 1.9;
	font-weight: 400;
	color: var(--hrc-text);
}

.hrc-article-body p {
	margin: 0 0 20px;
}

.hrc-article-body a {
	color: var(--hrc-orange);
	text-decoration: underline;
}

.hrc-article-body h2 {
	font-size: 20px;
	font-weight: bold;
	border-left: 4px solid var(--hrc-orange);
	padding: 4px 12px;
	margin: 44px 0 20px;
	color: var(--hrc-navy);
	scroll-margin-top: 16px;
}

.hrc-article-body h3 {
	font-size: 17px;
	font-weight: bold;
	margin: 32px 0 14px;
	color: var(--hrc-text);
}

.hrc-article-body h4 {
	font-size: 15px;
	font-weight: bold;
	margin: 24px 0 10px;
	color: var(--hrc-navy);
}

.hrc-article-body ul,
.hrc-article-body ol {
	margin: 0 0 20px;
	padding-left: 1.4em;
}

.hrc-article-body li {
	margin-bottom: 8px;
}

.hrc-article-body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 28px auto;
	border-radius: 8px;
}

/* FAQ Q&A */
.hrc-article-body p.q,
.hrc-article-body p.a {
	position: relative;
	margin: 0 0 12px;
	padding: 2px 0 2px 34px;
}

.hrc-article-body p.q {
	font-weight: bold;
	color: #333;
	margin-top: 28px;
}

.hrc-article-body p.a {
	color: var(--hrc-text-soft);
	margin-bottom: 28px;
}

.hrc-article-body p.q .badge,
.hrc-article-body p.a .badge {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}

.hrc-article-body p.q .badge {
	background: var(--hrc-orange);
}

.hrc-article-body p.a .badge {
	background: var(--hrc-navy);
}

.hrc-article-body th,
.hrc-article-body td {
	border: 1px solid var(--hrc-border);
	padding: 10px 14px;
	font-size: 14px;
	text-align: left;
	vertical-align: top;
}

.hrc-article-body th {
	background: #FAF6F1;
	color: var(--hrc-navy);
	white-space: nowrap;
}

.hrc-article-body th:first-child,
.hrc-article-body td:first-child {
	white-space: nowrap;
}

.hrc-article-body td:last-child {
	min-width: 220px;
}

.hrc-article-body table {
	border-collapse: collapse;
	width: 100%;
	min-width: 900px;
	table-layout: auto;
}

/* Tables with many columns (6+) need more room so text-heavy columns
   (like "主な用途") aren't squeezed into tall, awkward wrapping. */
.hrc-article-body table:has(th:nth-child(6)) {
	min-width: 1300px;
}

.hrc-article-body tr:nth-child(even) td {
	background: #FBFBFB;
}

.hrc-table-wrap {
	overflow-x: auto;
	margin: 0 0 28px;
	-webkit-overflow-scrolling: touch;
}

.hrc-table-wrap::before {
	content: "→ 横にスクロールできます";
	display: none;
	font-size: 11px;
	color: #999;
	margin-bottom: 8px;
}

@media screen and (max-width: 840px) {
	.hrc-table-wrap::before {
		display: block;
	}
}

/* Table of contents */
.hrc-toc {
	background: #FAF6F1;
	border-radius: 8px;
	padding: 20px 24px;
	margin: 0 0 32px;
}

.hrc-toc-label {
	font-weight: bold;
	margin: 0 0 10px;
	color: #333;
}

.hrc-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hrc-toc li {
	margin: 0 0 8px;
}

.hrc-toc li:last-child {
	margin-bottom: 0;
}

.hrc-toc a {
	color: var(--hrc-navy);
	text-decoration: none;
	font-size: 14px;
}

.hrc-toc a::before {
	content: "›";
	color: var(--hrc-orange);
	margin-right: 6px;
}

.hrc-toc a:hover {
	color: var(--hrc-orange);
}

/* Tags */
.hrc-tag-list {
	max-width: var(--hrc-content-width);
	margin: 0 auto 32px;
	padding: 0 24px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
}

.hrc-tag-list a {
	font-size: 13px;
	color: var(--hrc-text-soft);
	text-decoration: none;
	background: #F5F5F5;
	border-radius: 999px;
	padding: 4px 12px;
	display: inline-block;
}

.hrc-tag-list a:hover {
	color: var(--hrc-orange);
}

/* Shop CTA */
.hrc-shop-cta {
	max-width: var(--hrc-content-width);
	margin: 0 auto 40px;
	padding: 24px;
	background: #FFF7ED;
	border-radius: 8px;
	text-align: center;
}

.hrc-shop-cta p {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--hrc-text);
}

.hrc-shop-cta a {
	display: inline-block;
	background: var(--hrc-orange);
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	padding: 10px 28px;
	border-radius: 999px;
}

.hrc-shop-cta a:hover {
	opacity: .9;
}

/* Prev / next post nav */
.hrc-post-nav {
	max-width: var(--hrc-content-width);
	margin: 0 auto 40px;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	border-top: 1px solid var(--hrc-border);
	padding-top: 24px;
}

.hrc-post-nav a {
	flex: 1;
	color: var(--hrc-text);
	text-decoration: none;
	font-size: 13px;
	line-height: 1.6;
}

.hrc-post-nav .next-link {
	text-align: right;
}

.hrc-post-nav .dir {
	display: block;
	color: var(--hrc-orange);
	font-size: 12px;
	margin-bottom: 4px;
}

.hrc-post-nav a:hover {
	color: var(--hrc-orange);
}

/* Back to list */
.hrc-back-to-list {
	max-width: var(--hrc-content-width);
	margin: 40px auto 0;
	text-align: center;
}

.hrc-back-to-list a {
	display: inline-block;
	border: 1px solid var(--hrc-border);
	border-radius: 999px;
	padding: 10px 32px;
	color: #333;
	text-decoration: none;
	font-size: 14px;
}

.hrc-back-to-list a:hover {
	border-color: var(--hrc-orange);
	color: var(--hrc-orange);
}

/* ---------- Mobile ---------- */

@media screen and (max-width: 768px) {
	.hrc-article-title {
		font-size: 22px;
	}

	.hrc-page-title {
		font-size: 22px;
	}

	.hrc-post-nav {
		flex-direction: column;
	}

	.hrc-post-nav .next-link {
		text-align: left;
	}
}

/* Author / publisher info box */
.hrc-author {
	max-width: var(--hrc-content-width);
	margin: 0 auto 32px;
	padding: 20px 24px;
	background: #F7F7F7;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--hrc-text-soft);
}

/* postid-55: 【失敗しない】業務用鍋のおすすめ比較 — inline body images
   (not the featured/thumbnail image) cropped to a 5:3 landscape ratio. */
body.postid-55 .hrc-article-body img {
	aspect-ratio: 5 / 3;
	width: 100%;
	object-fit: cover;
}