/*
Theme Name: RiohTrading-OriginalTheme
Description: リオウ貿易株式会社 コーポレートサイト用オリジナルテーマ
Version: 0.2.0
Text Domain: riohtrading-original-theme
*/

/* =========================================================================
   style.css
   コンポーネント・レイアウト・ページ別のスタイル。
   色・フォント・フォントサイズ・余白の値は assets/css/common.css の変数を使う。

   命名規則（BEM＋接頭辞）
     l-  レイアウト（ヘッダー・フッター）
     c-  コンポーネント（ボタン・見出し・セクション等、ページをまたいで使うもの）
     p-  ページ固有（p-top- = トップページ）
     js- JavaScriptから参照するもの
     u-  ユーティリティ
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ヘッダー
   ------------------------------------------------------------------------- */
.l-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-gray-200);
}
.admin-bar .l-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .l-header { top: 0; }
}

.l-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
}

.l-header__logo {
	flex-shrink: 1;
	min-width: 0;
}
.l-header__logo img { width: 112px; }
@media (min-width: 768px) {
	.l-header__logo img { width: 128px; }
}

.l-header__contact { display: none; }

/* ハンバーガー */
.c-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background: transparent;
	border: 1px solid var(--color-gray-400);
	border-radius: var(--radius-sm);
}
.c-hamburger__line {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-black);
	transition: transform var(--transition), opacity var(--transition);
}
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(2) { opacity: 0; }
.c-hamburger[aria-expanded="true"] .c-hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.c-hamburger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* グローバルナビ（SP: ハンバーガーで開閉） */
.c-gnav {
	display: none;
	width: 100%;
}
.c-gnav.is-open { display: block; }
.c-gnav__list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--color-gray-200);
}
.c-gnav__item { border-bottom: 1px solid var(--color-gray-200); }
.c-gnav__link {
	display: block;
	padding: var(--space-3) var(--space-2);
	font-size: var(--fs-15);
	font-weight: 700;
	color: var(--color-black);
	transition: color var(--transition), border-color var(--transition);
}
.c-gnav__link:hover,
.c-gnav__link.is-current { color: var(--color-accent); }
.c-gnav__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.c-gnav__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) 0 var(--space-2);
}
.c-gnav__contact .c-btn { width: 100%; }

/* 電話リンク */
.c-tel-link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--font-en);
	font-size: var(--fs-20);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: 0.02em;
	color: var(--color-black);
}
.c-tel-link:hover { color: var(--color-accent); }
.c-tel-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.c-tel-link__hours {
	margin-top: 2px;
	font-family: var(--font-sans);
	font-size: var(--fs-11);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--color-gray-600);
}

/* PC: 6項目が1行に収まる幅からナビを横並びにする */
@media (min-width: 1200px) {
	.l-header__inner { flex-wrap: nowrap; }
	.l-header__logo img { width: 140px; }
	.c-hamburger { display: none; }
	.c-gnav {
		display: block;
		flex: 1;
		width: auto;
	}
	.c-gnav__list {
		flex-direction: row;
		justify-content: center;
		border-top: none;
	}
	.c-gnav__item { border-bottom: none; }
	.c-gnav__link {
		padding: var(--space-2) var(--space-3);
		font-size: var(--fs-14);
		white-space: nowrap;
		border-bottom: 2px solid transparent;
	}
	.c-gnav__link:hover,
	.c-gnav__link.is-current { border-bottom-color: var(--color-accent); }
	.c-gnav__contact { display: none; }
	.l-header__contact {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		flex-shrink: 0;
	}
	.l-header__contact .c-tel-link { align-items: flex-end; }
}
@media (min-width: 1200px) and (max-width: 1319px) {
	.c-gnav__link { padding-left: var(--space-2); padding-right: var(--space-2); }
	.l-header__contact { gap: var(--space-3); }
}

/* -------------------------------------------------------------------------
   2. ボタン・リンク・番号
   ------------------------------------------------------------------------- */
.c-btn {
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid var(--color-black);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-black);
	font-size: var(--fs-15);
	font-weight: 700;
	line-height: var(--lh-heading);
	letter-spacing: 0.04em;
	text-align: center;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.c-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-gray-50); }
.c-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.c-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.c-btn--primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-white); }

.c-btn--on-dark { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.c-btn--on-dark:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-black); }
.c-btn--on-dark:focus-visible { outline-color: var(--color-white); }

.c-btn--block { display: block; width: 100%; }

/* 「詳しく見る →」の円形矢印リンク */
.c-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-14);
	font-weight: 700;
	color: var(--color-accent);
}
.c-arrow-link__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: var(--fs-15);
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.c-arrow-link:hover { color: var(--color-accent-dark); }
.c-arrow-link:hover .c-arrow-link__circle { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-white); }
.c-arrow-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* 濃色地の上に直接置く場合 */
.c-arrow-link--invert { color: var(--color-white); }
.c-arrow-link--invert:hover { color: var(--on-invert-muted, var(--color-on-black-muted)); }
.c-arrow-link--invert:hover .c-arrow-link__circle { background: var(--color-white); border-color: var(--color-white); color: var(--color-black); }
.c-arrow-link--invert:focus-visible { outline-color: var(--color-white); }

/* (01) などの番号 */
.c-num {
	display: inline-block;
	font-family: var(--font-en);
	font-size: var(--fs-14);
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--color-accent);
}

/* -------------------------------------------------------------------------
   3. 画像プレースホルダー（画像差し替えまでのグレー）
   ------------------------------------------------------------------------- */
.c-placeholder {
	width: 100%;
	height: 100%;
	background: var(--color-placeholder);
}
/* 比率指定がある場合は高さを比率で決める（親の高さに引っ張られないように） */
.c-placeholder--card,
.c-placeholder--square,
.c-placeholder--wide,
.c-placeholder--portrait { height: auto; }
.c-placeholder--card { aspect-ratio: 4 / 3; }
.c-placeholder--square { aspect-ratio: 1 / 1; }
.c-placeholder--wide { aspect-ratio: 21 / 9; }
.c-placeholder--portrait { aspect-ratio: 3 / 4; }

/* -------------------------------------------------------------------------
   4. セクション共通（背景3色・見出し）
   ------------------------------------------------------------------------- */
.c-section {
	padding-top: var(--space-7);
	padding-bottom: var(--space-7);
}
@media (min-width: 768px) {
	.c-section {
		padding-top: var(--space-8);
		padding-bottom: var(--space-8);
	}
}
.c-section--white { background: var(--color-white); }
.c-section--black {
	--on-invert-muted: var(--color-on-black-muted);
	background: var(--color-black);
	color: var(--color-white);
}
.c-section--green {
	--on-invert-muted: var(--color-on-green-muted);
	background: var(--color-accent);
	color: var(--color-white);
}
.c-section__more { margin-top: var(--space-5); }

.c-section-head {
	max-width: 760px;
	margin-bottom: var(--space-5);
}
.c-section-head__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--space-2);
	font-size: var(--fs-12);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-accent);
}
.c-section-head__rule {
	display: inline-block;
	width: 28px;
	height: 2px;
	background: currentColor;
}
.c-section-head__en {
	margin-bottom: var(--space-3);
	font-family: var(--font-en);
	font-size: var(--fs-head-en);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--color-black);
}
.c-section-head__title {
	font-size: var(--fs-20);
	font-weight: 700;
	line-height: var(--lh-heading);
	letter-spacing: 0.02em;
}
@media (min-width: 768px) {
	.c-section-head__title { font-size: var(--fs-26); }
}
.c-section-head__lead {
	margin-top: var(--space-2);
	font-size: var(--fs-14);
	color: var(--color-gray-700);
}
@media (min-width: 768px) {
	.c-section-head__lead { font-size: var(--fs-15); }
}
.c-section--black .c-section-head__label,
.c-section--green .c-section-head__label,
.c-section--black .c-section-head__en,
.c-section--green .c-section-head__en { color: var(--color-white); }
.c-section--black .c-section-head__lead,
.c-section--green .c-section-head__lead { color: var(--on-invert-muted); }

/* -------------------------------------------------------------------------
   5. フェードイン
   ------------------------------------------------------------------------- */
.js-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
   6. トップ：ヒーロー
   写真の上に、左寄せの暗色パネルを重ねる。
   スマホは hero_sp02、768px以上は hero_pc02。読み込み前・失敗時はグレー。
   ------------------------------------------------------------------------- */
.p-top-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 80vh, 720px);
	overflow: hidden;
}
.p-top-hero__bg {
	position: absolute;
	inset: 0;
	background: var(--color-placeholder) url("https://rioh-jtw.com/wp-content/uploads/hero_sp02.jpg") center / cover no-repeat;
}
@media (min-width: 768px) {
	.p-top-hero__bg {
		background-image: url("https://rioh-jtw.com/wp-content/uploads/hero_pc02.jpg");
	}
}
.p-top-hero__panel {
	position: relative;
	width: 100%;
	padding: var(--space-6) var(--gutter);
	overflow: hidden;
	background: var(--color-hero-panel);
	color: var(--color-white);
}
.p-top-hero__mark {
	position: absolute;
	top: -0.12em;
	left: calc(var(--gutter) - 0.04em);
	font-family: var(--font-en);
	font-size: var(--fs-hero-mark);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.05);
	pointer-events: none;
	user-select: none;
}
.p-top-hero__title {
	position: relative;
	font-family: var(--font-serif);
	font-size: var(--fs-hero);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.04em;
}
.p-top-hero__lead {
	position: relative;
	margin-top: var(--space-4);
	font-size: var(--fs-15);
	font-weight: 700;
}
.p-top-hero__desc {
	position: relative;
	margin-top: var(--space-2);
	font-size: var(--fs-14);
	color: var(--color-on-black-muted);
}
.p-top-hero__cta {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

/* SP: 長文を隠しパネルを下詰めのまま低くし、HERO画像の見える面積を確保 */
@media (max-width: 767px) {
	.p-top-hero {
		align-items: flex-end;
	}
	.p-top-hero__panel {
		padding-top: var(--space-5);
		padding-bottom: var(--space-5);
		/* 0.82 → 0.72（透過を10%上げて薄くする） */
		background: rgba(24, 23, 23, 0.72);
	}
	.p-top-hero__desc {
		display: none;
	}
}

@media (min-width: 1024px) {
	.p-top-hero { align-items: center; }
	/* パネルは画面左端から始め、中の文字はコンテナの左端に揃える */
	.p-top-hero__panel {
		--hero-inset: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
		width: calc(var(--hero-inset) + 640px);
		max-width: 100%;
		padding: var(--space-8) var(--space-6) var(--space-7) var(--hero-inset);
	}
	.p-top-hero__mark { left: calc(var(--hero-inset) - 0.04em); }
}

/* -------------------------------------------------------------------------
   7. トップ：ISSUES（黒地＋白カード・2列）
   ------------------------------------------------------------------------- */
.p-top-issues__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}
@media (min-width: 768px) {
	.p-top-issues__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.p-top-issues__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-white);
	color: var(--color-black);
}
.p-top-issues__num {
	flex-shrink: 0;
	padding-right: var(--space-3);
	border-right: 1px solid var(--color-gray-300);
	font-family: var(--font-en);
	font-size: var(--fs-14);
	font-weight: 800;
	color: var(--color-accent);
}
.p-top-issues__text {
	font-size: var(--fs-14);
	font-weight: 500;
	line-height: var(--lh-heading);
}
.p-top-issues__link {
	display: inline-block;
	margin-left: var(--space-1);
	font-weight: 700;
	color: var(--color-accent);
}
.p-top-issues__link:hover { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------------------------
   8. トップ：OUR APPROACH（白地・3列×2段）
   ------------------------------------------------------------------------- */
.p-top-approach__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}
@media (min-width: 640px) {
	.p-top-approach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.p-top-approach__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.p-top-approach__card {
	padding: var(--space-4);
	border: 1px solid var(--color-gray-200);
	background: var(--color-white);
}
.p-top-approach__title {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	font-size: var(--fs-15);
	font-weight: 700;
	line-height: var(--lh-heading);
}
.p-top-approach__title .c-num { flex-shrink: 0; }
.p-top-approach__text {
	font-size: var(--fs-13);
	color: var(--color-gray-700);
}

/* -------------------------------------------------------------------------
   9. トップ：OUR SERVICE（緑地＋白カード・写真付き3列）
   ------------------------------------------------------------------------- */
.p-top-service__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}
@media (min-width: 768px) {
	.p-top-service__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.p-top-service__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--color-white);
	color: var(--color-black);
}
.p-top-service__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-2);
	overflow: hidden;
	background: var(--color-placeholder);
}
.p-top-service__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-top-service__title {
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-heading);
}
.p-top-service__text {
	flex: 1;
	margin-bottom: var(--space-2);
	font-size: var(--fs-13);
	color: var(--color-gray-700);
}
.p-top-service__note {
	margin-top: var(--space-5);
	font-size: var(--fs-13);
	color: var(--color-on-green-muted);
}
.p-top-service__note a {
	margin-left: var(--space-1);
	font-weight: 700;
	color: var(--color-white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------
   10. トップ：FLOW（白地・4ステップ）
   ------------------------------------------------------------------------- */
.p-top-flow__steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}
@media (min-width: 640px) {
	.p-top-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.p-top-flow__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.p-top-flow__step {
	padding: var(--space-4);
	border: 1px solid var(--color-gray-200);
	background: var(--color-white);
}
.p-top-flow__step .c-num { margin-bottom: var(--space-2); }
.p-top-flow__title {
	margin-bottom: var(--space-1);
	font-size: var(--fs-15);
	font-weight: 700;
}
.p-top-flow__text {
	font-size: var(--fs-13);
	color: var(--color-gray-700);
}

/* -------------------------------------------------------------------------
   11. トップ：QUALITY（黒地＋白カード2枚＋帯写真）
   ------------------------------------------------------------------------- */
.p-top-quality__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
}
@media (min-width: 768px) {
	.p-top-quality__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.p-top-quality__card {
	padding: var(--space-4);
	background: var(--color-white);
	color: var(--color-black);
}
.p-top-quality__card .c-num { margin-bottom: var(--space-2); }
.p-top-quality__title {
	margin-bottom: var(--space-2);
	font-size: var(--fs-15);
	font-weight: 700;
}
.p-top-quality__text {
	font-size: var(--fs-13);
	color: var(--color-gray-700);
}
.p-top-quality__media {
	margin-top: var(--space-4);
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--color-placeholder);
}
.p-top-quality__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   12. トップ：PRODUCTS（白地・正方形画像 PC4列／タブレット2列／SP1列）
   ------------------------------------------------------------------------- */
.p-top-products__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6) var(--space-4);
}
@media (min-width: 640px) {
	.p-top-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.p-top-products__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.p-top-products__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}
.p-top-products__media {
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--space-2);
	overflow: hidden;
	background: var(--color-placeholder);
}
.p-top-products__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-top-products__title {
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-heading);
}
.p-top-products__text {
	flex: 1;
	margin-bottom: var(--space-2);
	font-size: var(--fs-13);
	color: var(--color-gray-700);
}
.p-top-products__note {
	margin-top: var(--space-6);
	font-size: var(--fs-14);
	color: var(--color-gray-700);
}

/* -------------------------------------------------------------------------
   13. トップ：写真帯＋一文（1枚のフルブリード写真）
   ------------------------------------------------------------------------- */
.p-top-mosaic {
	position: relative;
	overflow: hidden;
}
.p-top-mosaic__bg {
	min-height: clamp(280px, 42vw, 480px);
	background: var(--color-placeholder) url("https://rioh-jtw.com/wp-content/uploads/choutatsuback.jpg") center / cover no-repeat;
}
.p-top-mosaic__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(24, 23, 23, 0.35) 0%, rgba(24, 23, 23, 0) 40%),
		var(--color-mosaic-overlay);
}
.p-top-mosaic__statement {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	text-align: center;
}
.p-top-mosaic__statement p {
	font-size: var(--fs-mosaic);
	font-weight: 700;
	line-height: var(--lh-heading);
	letter-spacing: 0.04em;
	color: var(--color-white);
}

/* -------------------------------------------------------------------------
   14. トップ：COMPANY（白地・サムネ付きの行）
   ------------------------------------------------------------------------- */
.p-top-company__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-gray-200);
}
.p-top-company__row:last-of-type { border-bottom: 1px solid var(--color-gray-200); }
@media (min-width: 768px) {
	.p-top-company__row {
		grid-template-columns: 140px minmax(0, 1fr);
		align-items: start;
		gap: var(--space-5);
	}
}
.p-top-company__thumb {
	width: 100%;
	max-width: 140px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-placeholder);
}
.p-top-company__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-top-company__label {
	display: inline-block;
	margin-bottom: var(--space-2);
	font-family: var(--font-en);
	font-size: var(--fs-11);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.p-top-company__philosophy {
	font-size: var(--fs-16);
	font-weight: 700;
	letter-spacing: 0.06em;
}
.p-top-company__lead {
	font-size: var(--fs-14);
	color: var(--color-gray-700);
}
.p-top-company__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--space-3);
	font-size: var(--fs-13);
	color: var(--color-gray-700);
}
.p-top-company__list dt {
	margin-top: var(--space-3);
	font-weight: 700;
	color: var(--color-black);
}
.p-top-company__list dt:first-child { margin-top: 0; }
@media (min-width: 768px) {
	.p-top-company__list {
		grid-template-columns: 7em minmax(0, 1fr);
		gap: var(--space-2) var(--space-4);
	}
	.p-top-company__list dt { margin-top: 0; }
}

/* -------------------------------------------------------------------------
   15. トップ：FAQ（緑地＋白カード・開閉式Q&A）
   ------------------------------------------------------------------------- */
.p-top-faq__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--space-3);
}
@media (min-width: 768px) {
	.p-top-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.p-top-faq__item {
	background: var(--color-white);
	color: var(--color-black);
}
.p-top-faq__q {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
	list-style: none;
}
.p-top-faq__q::-webkit-details-marker { display: none; }
.p-top-faq__q:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.p-top-faq__q-text {
	font-size: var(--fs-15);
	font-weight: 700;
	line-height: var(--lh-heading);
}
/* ＋／－アイコン */
.p-top-faq__icon {
	position: relative;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: 1px solid var(--color-accent);
	border-radius: 50%;
	transition: background-color var(--transition);
}
.p-top-faq__icon::before,
.p-top-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: var(--color-accent);
	transform: translate(-50%, -50%);
	transition: transform var(--transition), background-color var(--transition);
}
.p-top-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.p-top-faq__q:hover .p-top-faq__icon { background: var(--color-accent); }
.p-top-faq__q:hover .p-top-faq__icon::before,
.p-top-faq__q:hover .p-top-faq__icon::after { background: var(--color-white); }
.p-top-faq__item[open] .p-top-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.p-top-faq__a {
	margin: 0 var(--space-4);
	padding: var(--space-3) 0 var(--space-4);
	border-top: 1px solid var(--color-gray-200);
	font-size: var(--fs-14);
	color: var(--color-gray-700);
}
.p-top-faq__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	margin-top: var(--space-5);
}

/* -------------------------------------------------------------------------
   16. 共通CTA（黒地＋白カード2枚）
   ------------------------------------------------------------------------- */
.c-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	max-width: 820px;
}
@media (min-width: 640px) {
	.c-cta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.c-cta__card {
	padding: var(--space-5) var(--space-4);
	background: var(--color-white);
	color: var(--color-black);
	text-align: center;
}
.c-cta__title {
	margin-bottom: var(--space-2);
	font-size: var(--fs-15);
	font-weight: 700;
}
.c-cta__text {
	margin-bottom: var(--space-3);
	font-size: var(--fs-13);
	color: var(--color-gray-700);
}
.c-cta__tel {
	display: inline-block;
	font-family: var(--font-en);
	font-size: var(--fs-26);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: 0.02em;
	color: var(--color-accent);
}
.c-cta__tel:hover,
.c-cta__tel:focus-visible { color: var(--color-accent-dark); }
.c-cta__hours {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--fs-12);
	color: var(--color-gray-600);
}

/* -------------------------------------------------------------------------
   17. トップ：フッター手前の英文ステートメント
   ------------------------------------------------------------------------- */
.p-top-statement {
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
	border-top: 1px solid var(--color-gray-800);
	background: var(--color-black);
	color: var(--color-white);
	text-align: center;
}
.p-top-statement__en {
	font-family: var(--font-en);
	font-size: var(--fs-statement);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   18. フッター（黒地）
   ------------------------------------------------------------------------- */
.l-footer {
	padding-top: var(--space-7);
	padding-bottom: var(--space-4);
	border-top: 1px solid var(--color-gray-800);
	background: var(--color-black);
	color: var(--color-on-black-muted);
	font-size: var(--fs-13);
}
.l-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}
@media (min-width: 1024px) {
	.l-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
.l-footer__logo { display: inline-block; }
.l-footer__logo img {
	width: 180px;
	filter: brightness(0) invert(1); /* 黒ロゴを白に反転 */
}
.l-footer__nap {
	margin-top: var(--space-3);
	font-size: var(--fs-12);
	line-height: 1.9;
}
.l-footer__nap a { color: inherit; }
.l-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}
@media (min-width: 768px) {
	.l-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.l-footer__nav-list li { padding: var(--space-1) 0; }
.l-footer__nav-list a { color: var(--color-on-black-muted); }
.l-footer__nav-list a:hover { color: var(--color-white); text-decoration: underline; text-underline-offset: 2px; }
.l-footer__copy {
	margin-top: var(--space-6);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-gray-800);
	font-size: var(--fs-11);
	color: var(--color-gray-400);
}

/* -------------------------------------------------------------------------
   19. 下層ページ共通コンポーネント
   トップ（p-top-*）と同じ見た目を、ページをまたいで使える部品（c-*）にしたもの。
   ------------------------------------------------------------------------- */

/* WordPressが出力する読み上げ専用テキスト（ページ送りの見出し等）を画面上は隠す */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ページ内リンク（#drawing 等）で、固定ヘッダーに見出しが隠れないようにする */
[id] { scroll-margin-top: 100px; }

/* 見出し帯（グレーの画像の上に黒の半透明パネル。トップのヒーローと同じ構成）
   スマホ：画像を上に見せ、その下半分にパネルを重ねる／PC：パネルを左、画像を右に見せる */
.c-page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding-top: clamp(160px, 44vw, 300px);
	overflow: hidden;
}
.c-page-hero__bg {
	position: absolute;
	inset: 0;
	background-color: var(--color-placeholder);
	background-image: var(--hero-sp, var(--hero-pc, none));
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
@media (min-width: 768px) {
	.c-page-hero__bg {
		background-image: var(--hero-pc, none);
		background-position: center;
	}
}
.c-page-hero__panel {
	position: relative;
	width: 100%;
	padding: var(--space-5) var(--gutter) var(--space-6);
	background: var(--color-hero-panel);
	color: var(--color-white);
}
.c-page-hero__en {
	margin-bottom: var(--space-3);
	font-family: var(--font-en);
	font-size: var(--fs-page-en);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--color-white);
}
.c-page-hero__title {
	font-family: var(--font-serif);
	font-size: var(--fs-page-title);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.04em;
}
.c-page-hero__lead {
	max-width: 640px;
	margin-top: var(--space-3);
	font-size: var(--fs-14);
	color: var(--color-on-black-muted);
}
@media (min-width: 768px) {
	.c-page-hero__lead { font-size: var(--fs-15); }
}
@media (min-width: 1024px) {
	.c-page-hero {
		align-items: center;
		min-height: clamp(320px, 32vw, 460px);
		padding-top: 0;
	}
	/* パネルは画面左端から始め、中の文字はコンテナの左端に揃える（トップのヒーローと同じ） */
	.c-page-hero__panel {
		--hero-inset: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
		width: calc(var(--hero-inset) + 720px);
		max-width: 100%;
		padding: var(--space-7) var(--space-6) var(--space-7) var(--hero-inset);
	}
}

/* パンくずリスト（見出し帯の直下） */
.c-breadcrumbs {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-gray-200);
	font-size: var(--fs-12);
	color: var(--color-gray-600);
}
.c-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; row-gap: var(--space-1); }
.c-breadcrumbs__item { display: flex; align-items: center; }
.c-breadcrumbs__item:not(:last-child)::after { content: "›"; margin: 0 var(--space-2); color: var(--color-gray-400); }
.c-breadcrumbs__item a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.c-breadcrumbs__item [aria-current="page"] { color: var(--color-gray-700); font-weight: 700; }

/* 画像の枠（画像が無い間は c-placeholder のグレー） */
.c-figure { width: 100%; overflow: hidden; background: var(--color-placeholder); }
.c-figure__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-figure--card { aspect-ratio: 4 / 3; }
.c-figure--square { aspect-ratio: 1 / 1; }
.c-figure--wide { aspect-ratio: 21 / 9; }
.c-figure--portrait { aspect-ratio: 3 / 4; }

/* 汎用グリッド（列数は画面幅に応じて減る） */
.c-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 640px) {
	.c-grid--2,
	.c-grid--3,
	.c-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.c-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.c-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 汎用カード（白地のセクションでは枠線、黒・緑地のセクションでは白地で浮かせる） */
.c-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-4);
	background: var(--color-white);
	color: var(--color-black);
}
.c-section--white .c-card { border: 1px solid var(--color-gray-200); }
.c-card__media { width: 100%; margin-bottom: var(--space-3); }
.c-card .c-num { margin-bottom: var(--space-2); }
.c-card__title {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	font-size: var(--fs-15);
	font-weight: 700;
	line-height: var(--lh-heading);
}
.c-card__title .c-num { flex-shrink: 0; margin-bottom: 0; }
.c-card__text { flex: 1; font-size: var(--fs-13); color: var(--color-gray-700); }
.c-card__more { margin-top: var(--space-3); }

/* お困りごとリスト（黒地＋白カード・連番。トップの ISSUES と同じ） */
.c-issue-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 768px) {
	.c-issue-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.c-issue-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-white);
	color: var(--color-black);
}
.c-issue-list__num {
	flex-shrink: 0;
	padding-right: var(--space-3);
	border-right: 1px solid var(--color-gray-300);
	font-family: var(--font-en);
	font-size: var(--fs-14);
	font-weight: 800;
	color: var(--color-accent);
}
.c-issue-list__text { font-size: var(--fs-14); font-weight: 500; line-height: var(--lh-heading); }
.c-issue-list__link { display: inline-block; margin-left: var(--space-1); font-weight: 700; color: var(--color-accent); }
.c-issue-list__link:hover { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px; }

/* 手順（横一列に並ぶステップ。スマホは縦） */
.c-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 640px) {
	.c-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.c-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
}
.c-steps__item {
	position: relative;
	padding: var(--space-4);
	border: 1px solid var(--color-gray-200);
	background: var(--color-white);
	color: var(--color-black);
}
.c-steps__item .c-num { display: block; margin-bottom: var(--space-2); }
.c-steps__title { margin-bottom: var(--space-1); font-size: var(--fs-15); font-weight: 700; line-height: var(--lh-heading); }
.c-steps__text { font-size: var(--fs-13); color: var(--color-gray-700); }

/* ご相談の流れ：カード間の三角形（SP＝下向き／PC＝右向き） */
.p-flow .c-steps {
	gap: var(--space-5);
}
/* 三角形の向きが明確になるよう、中間幅でも1列のままにする */
@media (min-width: 640px) {
	.p-flow .c-steps { grid-template-columns: minmax(0, 1fr); }
}
.p-flow .c-steps__item:not(:last-child)::after {
	content: '';
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	/* SP：下向き・横長（幅は従来の3倍） */
	border-width: 10px 21px 0;
	border-color: var(--color-white) transparent transparent;
	transform: translate(-50%, calc(50% + var(--space-5) / 2));
	pointer-events: none;
}
@media (min-width: 1024px) {
	.p-flow .c-steps__item:not(:last-child)::after {
		left: auto;
		right: 0;
		top: 50%;
		bottom: auto;
		/* PC：右向き・縦長（高さは従来の3倍） */
		border-width: 21px 0 21px 10px;
		border-color: transparent transparent transparent var(--color-white);
		transform: translate(calc(50% + var(--space-5) / 2), -50%);
	}
}

/* 文章＋画像の2カラム（スマホは画像が下） */
.c-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: center; }
@media (min-width: 768px) {
	.c-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
	.c-split--reverse .c-split__figure { order: -1; }
}

/* 本文（段落・小見出し・リスト） */
.c-prose { max-width: 760px; font-size: var(--fs-15); color: var(--color-gray-700); }
.c-prose > * + * { margin-top: var(--space-3); }
.c-grid + .c-prose,
.c-steps + .c-prose { margin-top: var(--space-5); }
.c-prose h3 {
	margin-top: var(--space-5);
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--color-black);
}
.c-prose h3:first-child { margin-top: 0; }
.c-prose strong { color: var(--color-black); }
.c-prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.c-section--black .c-prose,
.c-section--green .c-prose { color: var(--on-invert-muted); }
.c-section--black .c-prose h3,
.c-section--green .c-prose h3,
.c-section--black .c-prose strong,
.c-section--green .c-prose strong,
.c-section--black .c-prose a,
.c-section--green .c-prose a { color: var(--color-white); }

/* 補足・注意書き（※〜） */
.c-note { margin-top: var(--space-4); margin-bottom: var(--space-4); font-size: var(--fs-13); color: var(--color-gray-600); }
.c-section--black .c-note,
.c-section--green .c-note { color: var(--on-invert-muted); }
.c-note a { font-weight: 700; color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.c-section--black .c-note a,
.c-section--green .c-note a { color: var(--color-white); }

/* 項目名＋説明の一覧（選び方・不安の整理など） */
.c-point-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-6); }
@media (min-width: 768px) {
	.c-point-list--2col,
	.c-point-list--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.c-point-list--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.c-point-list__item { padding: var(--space-4) 0; border-top: 1px solid var(--color-gray-200); }
.c-point-list__title { margin-bottom: var(--space-1); font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-heading); color: var(--color-black); }
.c-point-list__title::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: var(--space-2);
	vertical-align: 0.15em;
	background: var(--color-accent);
}
.c-point-list__text { font-size: var(--fs-14); color: var(--color-gray-700); }
.c-point-list__text a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.c-section--black .c-point-list__item,
.c-section--green .c-point-list__item { border-top-color: rgba(255, 255, 255, 0.2); }
.c-section--black .c-point-list__title,
.c-section--green .c-point-list__title { color: var(--color-white); }
.c-section--black .c-point-list__title::before,
.c-section--green .c-point-list__title::before { background: var(--color-white); }
.c-section--black .c-point-list__text,
.c-section--green .c-point-list__text { color: var(--on-invert-muted); }
.c-section--black .c-point-list__text a,
.c-section--green .c-point-list__text a { color: var(--color-white); }

/* 箇条書き（典型例など） */
.c-bullet-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); max-width: 760px; }
.c-bullet-list__item {
	position: relative;
	padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 16px);
	background: var(--color-white);
	color: var(--color-black);
	font-size: var(--fs-14);
	font-weight: 500;
}
.c-section--white .c-bullet-list__item { background: var(--color-gray-50); }
.c-bullet-list__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: var(--space-4);
	width: 8px;
	height: 8px;
	background: var(--color-accent);
	transform: translateY(-50%);
}

/* よくある質問（開閉式。トップの FAQ と同じ見た目） */
.c-faq__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.c-faq__item { background: var(--color-white); color: var(--color-black); }
.c-section--white .c-faq__item { border: 1px solid var(--color-gray-200); }
.c-faq__q {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	cursor: pointer;
	list-style: none;
}
.c-faq__q::-webkit-details-marker { display: none; }
.c-faq__q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.c-faq__q-text { font-size: var(--fs-15); font-weight: 700; line-height: var(--lh-heading); }
.c-faq__icon {
	position: relative;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: 1px solid var(--color-accent);
	border-radius: 50%;
	transition: background-color var(--transition);
}
.c-faq__icon::before,
.c-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: var(--color-accent);
	transform: translate(-50%, -50%);
	transition: transform var(--transition), background-color var(--transition);
}
.c-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.c-faq__q:hover .c-faq__icon { background: var(--color-accent); }
.c-faq__q:hover .c-faq__icon::before,
.c-faq__q:hover .c-faq__icon::after { background: var(--color-white); }
.c-faq__item[open] .c-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.c-faq__a {
	margin: 0 var(--space-4);
	padding: var(--space-3) 0 var(--space-4);
	border-top: 1px solid var(--color-gray-200);
	font-size: var(--fs-14);
	color: var(--color-gray-700);
}
.c-faq__a > * + * { margin-top: var(--space-3); }

/* 定義リスト（会社情報など） */
.c-info-table { display: grid; grid-template-columns: minmax(0, 1fr); font-size: var(--fs-14); }
.c-info-table dt { padding-top: var(--space-3); border-top: 1px solid var(--color-gray-200); font-weight: 700; }
.c-info-table dd { padding: var(--space-1) 0 var(--space-3); color: var(--color-gray-700); }
.c-info-table a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) {
	.c-info-table { grid-template-columns: 10em minmax(0, 1fr); }
	.c-info-table dt,
	.c-info-table dd { padding: var(--space-3) 0; border-top: 1px solid var(--color-gray-200); }
	.c-info-table dt:last-of-type,
	.c-info-table dd:last-of-type { border-bottom: 1px solid var(--color-gray-200); }
}

/* 画像＋タイトル＋説明文のカード（商品カテゴリ一覧。トップの PRODUCTS と同じ） */
.c-media-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.c-media-card__media { width: 100%; margin-bottom: var(--space-2); }
.c-media-card__title { font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-heading); }
.c-media-card__text { flex: 1; margin-bottom: var(--space-2); font-size: var(--fs-13); color: var(--color-gray-700); }

/* 商品一覧（管理画面の「商品」。画像＋名称＋仕様の横並び） */
.c-product-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.c-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	padding: var(--space-5) 0;
	border-top: 1px solid var(--color-gray-200);
}
.c-product:last-child { border-bottom: 1px solid var(--color-gray-200); }
@media (min-width: 768px) {
	.c-product { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-6); }
}
.c-product__media { aspect-ratio: 1 / 1; }
.c-product__title { margin-bottom: var(--space-3); font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-heading); }

/* 準備中の案内 */
.c-empty-state {
	padding: var(--space-5) var(--space-4);
	border: 1px dashed var(--color-gray-300);
	background: var(--color-gray-50);
	font-size: var(--fs-14);
	color: var(--color-gray-700);
	text-align: center;
}

/* 管理画面のエディタで書いた本文（お知らせ・商品の仕様・汎用ページ） */
.c-entry { font-size: var(--fs-15); color: var(--color-gray-700); }
.c-entry > * + * { margin-top: var(--space-3); }
.c-entry h2 {
	margin-top: var(--space-6);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-black);
	font-size: var(--fs-20);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--color-black);
}
.c-entry h3 {
	margin-top: var(--space-5);
	padding-left: var(--space-3);
	border-left: 3px solid var(--color-accent);
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--color-black);
}
.c-entry > :first-child { margin-top: 0; }
.c-entry ul { padding-left: 1.4em; list-style: disc; }
.c-entry ol { padding-left: 1.4em; list-style: decimal; }
.c-entry li + li { margin-top: var(--space-1); }
.c-entry a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.c-entry strong { color: var(--color-black); }
.c-entry img { height: auto; }
.c-entry table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.c-entry th,
.c-entry td { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-gray-200); text-align: left; vertical-align: top; }
.c-entry th { width: 30%; background: var(--color-gray-50); font-weight: 700; color: var(--color-black); }
.c-entry figure { margin: var(--space-4) 0; }
.c-entry .wp-block-table { overflow-x: auto; }

/* お知らせ一覧 */
.c-news-list { border-top: 1px solid var(--color-gray-200); }
.c-news-list__item { border-bottom: 1px solid var(--color-gray-200); }
.c-news-list__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-1);
	padding: var(--space-4) 0;
}
@media (min-width: 768px) {
	.c-news-list__link { grid-template-columns: 9em minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}
.c-news-list__date { font-family: var(--font-en); font-size: var(--fs-13); font-weight: 800; letter-spacing: 0.04em; color: var(--color-accent); }
.c-news-list__title { font-size: var(--fs-15); font-weight: 700; line-height: var(--lh-heading); }
.c-news-list__link:hover .c-news-list__title { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ページ送り（the_posts_pagination の出力） */
.c-pagination { margin-top: var(--space-6); }
.c-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.c-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-gray-300);
	font-size: var(--fs-14);
	font-weight: 700;
}
.c-pagination .page-numbers.current { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-white); }
.c-pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* 記事の前後ナビ */
.c-post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-7);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-gray-200);
	font-size: var(--fs-14);
}
.c-post-nav a { font-weight: 700; color: var(--color-accent); }
.c-post-nav a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* 矢印リンクの縦並び（関連ページ・リンク集） */
.c-link-list { display: flex; flex-direction: column; }
.c-link-list__item { padding: var(--space-3) 0; border-top: 1px solid var(--color-gray-200); }
.c-link-list__item:last-child { border-bottom: 1px solid var(--color-gray-200); }

/* 電話番号の大きな表示（404・送信完了） */
.c-tel-block { margin-top: var(--space-5); font-size: var(--fs-14); color: var(--color-gray-700); }
.c-tel-block__num {
	display: inline-block;
	margin-top: var(--space-1);
	font-family: var(--font-en);
	font-size: var(--fs-26);
	font-weight: 800;
	line-height: var(--lh-tight);
	letter-spacing: 0.02em;
	color: var(--color-accent);
}
.c-tel-block__num:hover { color: var(--color-accent-dark); }

/* -------------------------------------------------------------------------
   20. 下層ページ固有
   ------------------------------------------------------------------------- */

/* 会社案内：経営理念 */
.p-about__philosophy {
	font-family: var(--font-serif);
	font-size: clamp(36px, 6vw, 64px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.2em;
}
.p-about__philosophy-list { margin-top: var(--space-5); }

/* 経営理念カード — 左上・右下を10%直線カット */
.p-about__philosophy-list .c-card {
	clip-path: polygon(
		10% 0,
		100% 0,
		100% 90%,
		90% 100%,
		0 100%,
		0 10%
	);
}
.p-about__philosophy-char {
	font-family: var(--font-serif);
	font-size: clamp(40px, 5vw, 56px);
	font-weight: 600;
	line-height: 1;
	color: var(--color-accent);
	display: block;
}
.p-about__philosophy-list .c-card__title {
	margin-bottom: var(--space-3);
}
.p-about__philosophy-list .c-card__text {
	font-family: var(--font-serif);
	font-size: var(--fs-16);
	line-height: 1.8;
}
.p-about__map {
	margin-top: var(--space-5);
	aspect-ratio: 16 / 9;
}
.p-about__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (min-width: 768px) {
	.p-about__map { aspect-ratio: 21 / 9; }
}

/* フレキシブルコンテナ：種類と用途（黒地。タイプ／形状及び用途／対応表の3ブロック） */
.p-fibc-type {
	--fibc-line: rgba(255, 255, 255, 0.2);
}
.p-fibc-type__block {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--fibc-line);
}
@media (min-width: 768px) {
	.p-fibc-type__block { margin-top: var(--space-7); padding-top: var(--space-6); }
}
.c-section-head + .p-fibc-type__block { margin-top: 0; }
.p-fibc-type__heading {
	margin-bottom: var(--space-4);
	font-size: var(--fs-20);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--color-white);
}
@media (min-width: 768px) {
	.p-fibc-type__heading { font-size: var(--fs-22); }
}
.p-fibc-type__heading::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: var(--space-2);
	vertical-align: 0.2em;
	background: var(--color-white);
}

/* タイプ（形）：素材ごとの2グループ */
.p-fibc-type__groups {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}
@media (min-width: 640px) {
	.p-fibc-type__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
.p-fibc-type__group {
	padding: var(--space-4);
	border: 1px solid var(--fibc-line);
}
.p-fibc-type__material {
	margin-bottom: var(--space-2);
	font-size: var(--fs-13);
	color: var(--on-invert-muted);
}
.p-fibc-type__type-list > li + li { margin-top: var(--space-2); }
.p-fibc-type__type {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-heading);
}
@media (min-width: 768px) {
	.p-fibc-type__type { font-size: var(--fs-20); }
}
.p-fibc-type__badge {
	display: inline-block;
	padding: 2px var(--space-2);
	background: var(--color-accent);
	font-size: var(--fs-12);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--color-white);
}

/* 形状及び用途：本文＋縦長画像（スマホは画像が下） */
.p-fibc-type__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5);
	align-items: center;
}
@media (min-width: 768px) {
	.p-fibc-type__split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); }
}
.p-fibc-type__split-figure { width: 100%; max-width: 360px; margin: 0 auto; }
@media (min-width: 768px) {
	.p-fibc-type__split-figure { max-width: 420px; margin-right: 0; }
}
.p-fibc-type__sub {
	margin-top: calc(var(--space-2) * -1);
	margin-bottom: var(--space-4);
	font-size: var(--fs-14);
	color: var(--on-invert-muted);
}
.p-fibc-type__name {
	margin-bottom: var(--space-3);
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-heading);
}
@media (min-width: 768px) {
	.p-fibc-type__name { font-size: var(--fs-20); }
}
.p-fibc-type__spec-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-1);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--fibc-line);
}
.p-fibc-type__spec-row:last-child { border-bottom: 1px solid var(--fibc-line); }
@media (min-width: 640px) {
	.p-fibc-type__spec-row { grid-template-columns: 5em minmax(0, 1fr); gap: var(--space-3); }
}
.p-fibc-type__spec-label { font-size: var(--fs-14); font-weight: 700; }
.p-fibc-type__spec-text { font-size: var(--fs-14); color: var(--on-invert-muted); }
@media (min-width: 768px) {
	.p-fibc-type__spec-text { font-size: var(--fs-15); }
}
.p-fibc-type__shape + .p-fibc-type__shape { margin-top: var(--space-3); }
.p-fibc-type__shape-name { display: block; font-weight: 700; color: var(--color-white); }
.p-fibc-type__shape-text { display: block; }

/* 対応表（PC・タブレット＝表／スマホ＝形状タイプごとのカード） */
.p-fibc-type__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-14);
	line-height: var(--lh-heading);
}
.p-fibc-type__table th,
.p-fibc-type__table td {
	padding: var(--space-3);
	border: 1px solid var(--fibc-line);
	text-align: left;
	vertical-align: top;
}
.p-fibc-type__table thead th {
	background: var(--color-accent);
	font-size: var(--fs-14);
	font-weight: 700;
	white-space: nowrap;
}
.p-fibc-type__table-type {
	width: 22%;
	font-size: var(--fs-15);
	font-weight: 700;
}
.p-fibc-type__table td { color: var(--on-invert-muted); }
.p-fibc-type__table td:nth-child(2) { width: 26%; }
.p-fibc-type__fill > li + li,
.p-fibc-type__industry-items > li + li { margin-top: 2px; }
.p-fibc-type__industries {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2) var(--space-4);
}
@media (min-width: 1024px) {
	.p-fibc-type__industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.p-fibc-type__industry-name { display: block; font-weight: 700; color: var(--color-white); }
.p-fibc-type__industry-items > li { padding-left: 1em; text-indent: -1em; }
.p-fibc-type__industry-items > li::before { content: "・"; }

@media (max-width: 767px) {
	.p-fibc-type__table,
	.p-fibc-type__table tbody,
	.p-fibc-type__table tr,
	.p-fibc-type__table th,
	.p-fibc-type__table td,
	.p-fibc-type__table td:nth-child(2) { display: block; width: auto; }
	.p-fibc-type__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.p-fibc-type__table tr { border: 1px solid var(--fibc-line); }
	.p-fibc-type__table tr + tr { margin-top: var(--space-3); }
	.p-fibc-type__table th,
	.p-fibc-type__table td { border: 0; }
	.p-fibc-type__table-type { background: var(--color-accent); font-size: var(--fs-16); }
	.p-fibc-type__table td + td { border-top: 1px solid var(--fibc-line); }
	.p-fibc-type__table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: var(--space-1);
		font-size: var(--fs-12);
		font-weight: 700;
		letter-spacing: 0.08em;
		color: var(--color-white);
	}
}

/* プライバシーポリシー：条文 */
.p-privacy__body { max-width: 860px; }
.p-privacy__item + .p-privacy__item { margin-top: var(--space-6); }
.p-privacy__title {
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-gray-200);
	font-size: var(--fs-16);
	font-weight: 700;
	line-height: var(--lh-heading);
}
@media (min-width: 768px) {
	.p-privacy__title { font-size: var(--fs-20); }
}

.p-privacy__date { margin-top: var(--space-7); font-size: var(--fs-13); color: var(--color-gray-600); text-align: right; }

/* お知らせ詳細：日付 */
.p-single__date { margin-bottom: var(--space-5); font-family: var(--font-en); font-size: var(--fs-14); font-weight: 800; letter-spacing: 0.04em; color: var(--color-accent); }
.p-single__body { max-width: 860px; }

/* 汎用固定ページ */
.p-page__body { max-width: 860px; }

/* 404 */
.p-404__links { max-width: 640px; margin-top: var(--space-5); }

/* -------------------------------------------------------------------------
   21. お問い合わせ（page-contact.php / Contact Form 7）
   ------------------------------------------------------------------------- */
.p-contact__notice,
.p-contact-form { max-width: 820px; }
.p-contact__notice {
	margin-bottom: var(--space-6);
	padding: var(--space-4);
	background: var(--color-gray-50);
	font-size: var(--fs-14);
}
.p-contact__notice-title { margin-bottom: var(--space-2); font-size: var(--fs-16); font-weight: 700; }
.p-contact__notice-lead { font-weight: 700; color: var(--color-accent); }
.p-contact__notice-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--space-1) var(--space-3);
	margin-top: var(--space-3);
}
.p-contact__notice-list dt { font-weight: 700; }
.p-contact__notice a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

.p-contact-form__row { margin-bottom: var(--space-4); }
.p-contact-form__label {
	display: block;
	margin-bottom: var(--space-1);
	font-size: var(--fs-14);
	font-weight: 700;
}
.p-contact-form__badge {
	display: inline-block;
	margin-left: var(--space-2);
	padding: 0 8px;
	border-radius: var(--radius-sm);
	background: var(--color-gray-200);
	color: var(--color-gray-700);
	font-size: var(--fs-11);
	font-weight: 500;
	line-height: 1.8;
}
.p-contact-form__badge--required { background: var(--color-accent); color: var(--color-white); }
.p-contact-form .wpcf7-form-control-wrap { display: block; }
.p-contact-form input[type="text"],
.p-contact-form input[type="email"],
.p-contact-form input[type="tel"],
.p-contact-form select,
.p-contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	font: inherit;
	font-size: var(--fs-16);
	color: var(--color-black);
}
.p-contact-form textarea { min-height: 180px; }
.p-contact-form input:focus-visible,
.p-contact-form select:focus-visible,
.p-contact-form textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.p-contact-form .wpcf7-list-item { margin: 0 var(--space-4) 0 0; }
.p-contact-form__note { margin-top: var(--space-1); font-size: var(--fs-12); color: var(--color-gray-600); }
.p-contact-form__consent { font-size: var(--fs-14); }
.p-contact-form__consent a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.p-contact-form__submit { margin-top: var(--space-5); text-align: center; }
.p-contact-form input[type="submit"].c-btn { min-width: 240px; cursor: pointer; }
.p-contact-form .wpcf7-not-valid-tip { margin-top: var(--space-1); font-size: var(--fs-13); color: #b3261e; }
.p-contact-form .wpcf7-response-output { margin: var(--space-4) 0 0; padding: var(--space-3); font-size: var(--fs-14); }
.p-contact-form .wpcf7-spinner { display: block; margin: var(--space-2) auto 0; }
.p-contact-form__recaptcha-note {
	margin-top: var(--space-4);
	font-size: var(--fs-12);
	line-height: var(--lh-body);
	color: var(--color-gray-600);
}
.p-contact-form__recaptcha-note a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Contact Form 7 の reCAPTCHA v3 バッジ（右下）を非表示。
   非表示時は Google 利用規約によりフォーム付近へ代替表記が必要（page-contact.php）。 */
.grecaptcha-badge { visibility: hidden; }