/**
 * Hayashishin Calendar A Main CSS
 * モダン・SaaS風UI
 */

:root {
	/* 追従ヘッダーの高さ。画面上部に固定する要素の位置合わせに使う。
	   ヘッダーの高さを変えたときはここも合わせて直すこと */
	--header-height: 78px;

	/* アンカーで移動したとき、見出しが追従要素に隠れないよう空ける高さ。
	   PCはヘッダーのみが追従するので「ヘッダー + 余白」 */
	--scroll-offset: 96px;

	/* カラーパレット (SaaS風の透明感あるグリーン) */
	--color-primary: #10B981; /* 鮮やかなグリーン */
	--color-secondary: #34D399; /* ライトグリーン */
	--color-gradient-start: #059669;
	--color-gradient-end: #047857;
	--color-accent: #059669; /* やや濃いグリーン */
	--color-text-main: #333333;
	--color-text-light: #666666;
	--color-bg-body: #F0FDF4; /* ごく薄いグリーン背景 */
	--color-bg-light: #FFFFFF;
	--color-bg-alt: #DCFCE7;
	--color-border: #E0E0E0;

	/* 影（ソフトなグリーンシャドウ） */
	--box-shadow-soft: 0 10px 30px rgba(16, 185, 129, 0.1);
	--box-shadow-hover: 0 15px 40px rgba(16, 185, 129, 0.2);

	/* タイポグラフィ */
	--font-family-base: "Noto Sans JP", sans-serif;
	
	/* レイアウト */
	--container-width: 1200px;
	--section-padding: 100px;
}

body {
	font-family: var(--font-family-base);
	color: var(--color-text-main);
	background-color: var(--color-bg-body);
	line-height: 1.8;
	letter-spacing: 0.03em;
}

/* =========================================================
   Layout & Utility
========================================================= */
.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 640px) {
	.container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.container {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.container {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.container {
		max-width: 1536px;
	}
}

.section-padding {
	padding: var(--section-padding) 0;
}

.bg-light {
	background-color: var(--color-bg-light);
}

.section-title {
	text-align: center;
	font-size: 2.2rem;
	margin-bottom: 50px;
	color: var(--color-primary);
	font-weight: 700;
	letter-spacing: 0.05em;
	position: relative;
	padding-bottom: 20px;
}

.section-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	border-radius: 2px;
}

.center-action {
	text-align: center;
	margin-top: 50px;
}

.section-lead {
	text-align: center;
	color: var(--color-text-light);
	font-size: 1.05rem;
	margin-top: -30px;
	margin-bottom: 50px;
	line-height: 1.9;
}

/* =========================================================
   Page Hero (製品紹介ページ上部)
========================================================= */
.page-hero-section {
	background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
	color: #fff;
	min-height: 300px; /* 固定高さだとモバイルでリード文がはみ出すため min-height に変更 */
	padding: 50px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
}

/* 会社概要ページのみドットパターン背景 */
.company-main .page-hero-section {
	background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
	background-size: auto;
}

.page-hero-title {
	font-size: 2.8rem;
	font-weight: 700;
	margin-bottom: 20px;
	letter-spacing: 0.08em;
	color: #fff;
}

.page-hero-lead {
	font-size: 1.1rem;
	opacity: 0.92;
	line-height: 2;
}

.page-hero-lead {
	font-size: 1.1rem;
	opacity: 0.92;
	line-height: 2;
}

/* =========================================================
   Company Exterior Photo (会社外観)
========================================================= */
.company-exterior-section {
	padding: 64px 0 0;
}

.company-exterior {
	margin: 0;
}

.company-exterior img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	box-shadow: var(--box-shadow-soft);
}

.company-exterior-caption {
	margin-top: 14px;
	text-align: center;
	font-size: 0.9rem;
	color: var(--color-text-light);
	letter-spacing: 0.04em;
}

/* PC: 本社外観写真はコンテナ幅の半分・中央寄せ */
@media (min-width: 768px) {
	.company-exterior {
		max-width: 50%;
		margin: 0 auto;
	}
}

@media (max-width: 767px) {
	.company-exterior-section {
		padding-top: 40px;
	}
	.company-exterior img {
		border-radius: 14px;
	}
}

/* =========================================================
   Category Image Grid (トップページ製品カテゴリ)
========================================================= */
.category-image-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 10px;
}

.cat-image-card {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--box-shadow-soft);
	transition: transform 0.3s, box-shadow 0.3s;
	display: block;
	color: var(--color-text-main);
}

.cat-image-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--box-shadow-hover);
	color: var(--color-text-main);
}

.cat-image-wrap {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cat-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 20px;
	box-sizing: border-box;
	transition: transform 0.4s ease;
}

.cat-image-card:hover .cat-image-wrap img {
	transform: scale(1.05);
}

.cat-image-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.4s ease;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.cat-image-card:hover .cat-image-overlay {
	opacity: 1;
}

.cat-label {
	color: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	display: block;
	transform: translateY(20px);
	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cat-link-text {
	color: rgba(255,255,255,0.9);
	font-size: 1rem;
	margin-top: 10px;
	display: block;
	transform: translateY(20px);
	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.05s;
}

.cat-image-card:hover .cat-label,
.cat-image-card:hover .cat-link-text {
	transform: translateY(0);
}

.cat-image-body {
	padding: 22px 24px;
}

.cat-image-body h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 10px;
}

.cat-image-body p {
	font-size: 0.92rem;
	color: var(--color-text-light);
	line-height: 1.7;
}

/* =========================================================
   Product Category Nav (製品カテゴリへのジャンプ)
========================================================= */
.product-category-nav {
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	padding: 18px 0;
}

.product-category-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.product-category-nav__list a {
	display: inline-block;
	padding: 10px 24px;
	border: 2px solid var(--color-primary);
	border-radius: 9999px;
	color: var(--color-primary);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.25s, color 0.25s;
}

.product-category-nav__list a:hover,
.product-category-nav__list a:focus {
	background-color: var(--color-primary);
	color: #fff;
}

/* 現在表示中のカテゴリ（お知らせのカテゴリ切替で使用） */
.product-category-nav__list a.is-current {
	background-color: var(--color-primary);
	color: #fff;
}

/* アンカーで移動したとき、追従するヘッダー（とカテゴリナビ）に見出しが
   隠れないよう、その高さぶん手前で止める。
   実際の高さは --scroll-offset（画面幅で切り替わる）に持たせている。 */
.product-feature-section,
.company-profile-section,
.company-message-section,
.company-history-section,
.company-access-section {
	scroll-margin-top: var(--scroll-offset);
}

/* =========================================================
   Product Feature Grid (製品紹介アーカイブ)
========================================================= */
.product-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.product-feature-card {
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--box-shadow-soft);
	display: flex;
	flex-direction: column;
}


.product-feature-img {
	position: relative;
	background: var(--color-bg-alt);
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
}

.product-feature-img--tall {
	aspect-ratio: 3 / 4;
}

/* 卓上カレンダー: 画像エリアの高さを1.5倍（4/3 → 8/9）。中の画像は成り行きで拡大 */
.product-feature-grid--desk .product-feature-img {
	aspect-ratio: 8 / 9;
}

/* =========================================================
   ワイドカード（品番・色違いが多い商品ファミリーを1枚にまとめる）
   3列グリッドの全幅を使い、画像＋仕様を左右に並べる
========================================================= */
.product-feature-card--wide {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}

.product-feature-card--wide .product-feature-img {
	flex: 0 0 40%;
	aspect-ratio: auto;
}

.product-feature-card--wide .product-feature-info {
	flex: 1;
	min-width: 0;
}

/* 品番バリエーション表（サイズ違いをコンパクトに一覧化） */
.variant-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin-bottom: 18px;
}

.variant-table th,
.variant-table td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
}

/* 品番列は折り返さず、サイズ列に残り幅を渡す */
.variant-table th:first-child,
.variant-table td:first-child {
	white-space: nowrap;
	width: 34%;
}

.variant-table thead th {
	background: var(--color-bg-alt);
	color: var(--color-primary);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
}

.variant-table tbody th {
	font-weight: 700;
	color: var(--color-text-main);
}

/* カラー展開のスウォッチ（色名だけの羅列より一目で伝わる） */
.color-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 仕様リストの中に入れ子で置くため、.product-spec-list li の罫線・余白を打ち消す */
.color-swatches li,
.product-spec-list .color-swatches li {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border-bottom: none;
	font-size: 0.85rem;
	line-height: 1.4;
}

.color-swatches .color-chip {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}

.spec-note {
	font-size: 0.8rem;
	color: var(--color-text-light);
	line-height: 1.7;
	margin-top: 4px;
}

@media screen and (max-width: 1024px) {
	/* 1列表示ではワイドカードも通常の縦積みに戻す */
	.product-feature-card--wide {
		flex-direction: column;
	}
	.product-feature-card--wide .product-feature-img {
		flex: none;
		aspect-ratio: 4 / 3;
	}
	.variant-table {
		font-size: 0.85rem;
	}
	.variant-table th,
	.variant-table td {
		padding: 7px 8px;
	}
}

/* 段揃え用の空きマス: 見た目は透明（3列グリッドでのみ意味を持つ。1列表示では非表示） */
.product-feature-card--spacer {
	background: transparent;
	box-shadow: none;
	pointer-events: none;
}
@media screen and (max-width: 1024px) {
	/* .product-feature-grid が1列になる幅では空きマスは不要な空白になるため非表示 */
	.product-feature-card--spacer {
		display: none;
	}
}

.product-feature-img img {
	position: absolute;
	top: 30px;
	left: 30px;
	width: calc(100% - 60px);
	height: calc(100% - 60px);
	object-fit: contain;
}

.product-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 50px;
	box-shadow: 0 3px 10px rgba(16,185,129,0.35);
}

.product-badge-green {
	background: linear-gradient(135deg, #22c55e, #16a34a);
}

.product-feature-info {
	padding: 28px 30px 30px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.product-no {
	font-size: 0.85rem;
	color: var(--color-text-light);
	font-weight: 500;
	margin-bottom: 6px;
	letter-spacing: 0.05em;
}

.product-feature-name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 20px;
}

.product-spec-list {
	list-style: none;
	margin-bottom: 24px;
	flex: 1;
}

.product-spec-list li {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-bg-alt);
	font-size: 0.95rem;
	color: var(--color-text-main);
	align-items: flex-start;
	line-height: 1.7;
}

.spec-label {
	flex-shrink: 0;
	font-weight: 700;
	color: var(--color-primary);
	font-size: 0.85rem;
	background: var(--color-bg-alt);
	padding: 2px 10px;
	border-radius: 4px;
	min-width: 60px;
	text-align: center;
}

.product-inquiry-btn {
	align-self: flex-start;
	font-size: 0.95rem;
	/* 文言を「お問い合わせ」に短縮したのに合わせて左右の余白も詰める */
	padding: 12px 20px;
}

/* 品番ごとの問い合わせボタン（複数品番の商品で1品番=1ボタン） */
.product-inquiry-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

.product-inquiry-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
}

/* どの品番のボタンかを示すラベル（装飾なしの並字） */
.product-inquiry-target {
	font-size: 0.9rem;
	color: var(--color-text-main);
	white-space: nowrap;
}

/* =========================================================
   Product CTA Section (製品ページ下部)
========================================================= */
.product-cta-section {
	background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
}

.product-cta-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	color: #fff;
}

.product-cta-text h2 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 14px;
}

.product-cta-text p {
	opacity: 0.9;
	line-height: 1.9;
	font-size: 1rem;
}

.product-cta-actions {
	flex-shrink: 0;
}

/* =========================================================
   Product WordPress grid section
========================================================= */
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 50px;
}


/* =========================================================
   Buttons
========================================================= */
.btn {
	display: inline-block;
	padding: 15px 40px;
	border-radius: 50px; /* ピル型 */
	font-weight: 700;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	cursor: pointer;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	position: relative;
	overflow: hidden;
}

.btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255,255,255,0.2), transparent);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.btn:hover::after {
	opacity: 1;
}

.btn-primary {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	color: #FFF;
	border: none;
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
	color: #FFF;
}

.btn-outline {
	background-color: #FFF;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.btn-outline:hover {
	background-color: var(--color-primary);
	color: #FFF;
	transform: translateY(-3px);
	box-shadow: var(--box-shadow-hover);
}

.btn-contact {
	background: #FFF;
	color: var(--color-primary);
	font-size: 1.1rem;
	border: none;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.btn-contact:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

/* =========================================================
   Header
========================================================= */
.site-header {
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 15px 0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* WordPress管理バーがある場合のオフセット */
.admin-bar .site-header {
	top: 32px;
}

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

.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site-title a {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-primary);
	letter-spacing: 0.1em;
}

.site-description {
	display: none; /* モダンデザインでは隠すことが多い */
}

.global-nav ul {
	display: flex;
	gap: 25px;
}

.global-nav a {
	font-weight: 500;
	color: var(--color-text-main);
	padding: 10px;
	transition: color 0.3s;
}

.global-nav a:hover {
	color: var(--color-primary);
}

/* =========================================================
   Front Page - Hero
========================================================= */
.hero-section {
	background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-alt) 100%);
	color: var(--color-text-main);
	padding: 40px 0; /* 高さを抑えるために120pxから変更 */
	overflow: hidden;
	position: relative;
	min-height: calc(100vh - 80px);
	display: flex;
	align-items: center;
}

/* 背景の斜めや曲線の装飾（疑似要素） */
.hero-section::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -20%;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(16,185,129,0.1) 100%);
	transform: rotate(-15deg);
	border-radius: 50px;
	z-index: 0;
}

.hero-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 50px;
	position: relative;
	z-index: 1;
}

.hero-content {
	flex: 1;
	padding: 50px 40px; /* 少し縮小して高さを抑える */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero-title {
	font-size: 3.5rem;
	margin-bottom: 20px; /* 30pxから変更 */
	line-height: 1.35;
	background: linear-gradient(135deg, var(--color-primary), #022c22);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
	letter-spacing: 0.03em;
}

.hero-text {
	font-size: 1.15rem;
	margin-bottom: 30px; /* 45pxから変更 */
	color: var(--color-text-main);
	line-height: 2.1;
	opacity: 0.85;
}

/* Scroll Down Indicator */
.scroll-down-indicator {
	position: absolute;
	bottom: 40px;
	right: 2%; /* 5%から2%に変更 */
	transform: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 10;
	opacity: 0.7;
	transition: opacity 0.3s;
}

@media screen and (max-width: 768px) {
	.scroll-down-indicator {
		right: 50%;
		transform: translateX(50%);
	}
}

.scroll-down-indicator:hover {
	opacity: 1;
}

.scroll-text {
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	color: var(--color-primary);
	text-transform: uppercase;
	margin-bottom: 15px;
	writing-mode: vertical-lr;
}

.scroll-line {
	width: 1px;
	height: 60px;
	background: rgba(16, 185, 129, 0.2);
	position: relative;
	overflow: hidden;
}

.scroll-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 30px;
	background: var(--color-primary);
	animation: scrollLine 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollLine {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(200%); }
}

.hero-visual {
	flex-shrink: 0;
	width: 45%; /* 動画を少し内側に小さくする */
	margin-right: 5%; /* 外側に空間を作る */
	position: relative;
	min-height: 400px; /* 絶対配置のために高さを確保 */
}

/* 浮遊アニメーション */
@keyframes floatAnimation {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0px); }
}

/* ヒーロー背景の製品画像 */
.hero-bg-products {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.bg-product {
	position: absolute;
	opacity: 0.85;
	filter: blur(1.5px);
}

.bg-product-1 {
	top: 0%;
	left: 50%;
	transform: translateX(-50%);
	width: 450px;
}

.bg-product-2 {
	top: 0;
	left: 0;
	width: 300px;
}

.bg-product-3 {
	top: 15%;
	right: 15%;
	width: 250px;
}

/* 背景カレンダーのレスポンシブ対応 */
@media screen and (max-width: 1024px) {
	.bg-product-1 {
		width: 320px;
	}
	.bg-product-2 {
		width: 210px;
		top: 0;
		left: 0;
	}
	.bg-product-3 {
		width: 180px;
		top: 15%;
		right: 10%;
	}
}

@media screen and (max-width: 768px) {
	.bg-product-1 {
		width: 220px;
	}
	.bg-product-2 {
		width: 150px;
		top: 0;
		left: 0;
	}
	.bg-product-3 {
		width: 120px;
		top: 15%;
		right: 5%;
	}
}

/* 動画右下の重ね画像 */
.video-overlay-product {
	position: absolute;
	bottom: -50px;
	right: -50px;
	width: 240px;
	height: auto;
	z-index: 10;
	filter: drop-shadow(0 10px 15px rgba(0,0,0,0.25));
}

@media screen and (max-width: 768px) {
	.video-overlay-product {
		width: 160px;
		bottom: -35px;
		right: -35px;
	}
}

.floating-characters-group {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.float-item {
	position: absolute;
	animation: floatAnimation 4s ease-in-out infinite;
	filter: drop-shadow(0 20px 30px rgba(16, 185, 129, 0.2));
	height: auto;
}

/* 個別のサイズと配置・タイミング */
.float-girl {
	width: 45%;
	bottom: 0;
	left: 0;
	animation-delay: 0s;
	z-index: 2;
}

.float-boy {
	width: 50%;
	top: -60px;
	right: 10%;
	animation-delay: 1.2s;
	z-index: 1;
}

.float-dog {
	width: 18%; /* 犬を小さく */
	bottom: -10px;
	right: 35%;
	animation-delay: 2.4s;
	z-index: 3;
}

/* =========================================================
   Front Page - Strengths
========================================================= */
.strengths-grid {
	display: flex;
	gap: 30px;
}

/* クリックできない紹介カードのため、マウスオーバー時の動きは付けない */
.strength-item {
	flex: 1;
	background: #FFF;
	padding: 50px 30px;
	border-radius: 24px;
	box-shadow: var(--box-shadow-soft);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.strength-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 25px;
}

.strength-number {
	font-size: 4.5rem;
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 0.15;
	margin-bottom: -15px;
	font-family: Arial, sans-serif;
}

.strength-en {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--color-primary);
	text-transform: uppercase;
}

.strength-item h3 {
	margin-bottom: 15px;
	font-size: 1.4rem;
	color: var(--color-text-main);
	font-weight: 700;
}

/* =========================================================
   Front Page - Usage
========================================================= */
.usage-section {
	position: relative;
	background-image: radial-gradient(rgba(16, 185, 129, 0.08) 2px, transparent 2px);
	background-size: 24px 24px;
	background-color: #f4fbf7;
}

.usage-grid {
	display: flex;
	gap: 32px;
}

.usage-item {
	flex: 1;
	background: #ffffff;
	padding: 0;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	/* アクセントは左端の緑ライン1本のみ（他の辺の線はなし） */
	border-left: 4px solid #10b981;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.usage-content {
	padding: 35px 35px 25px 35px;
}

.usage-content h3 {
	margin-bottom: 14px;
	color: #059669;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.4;
}

.usage-content p {
	color: #374151;
	font-size: 0.95rem;
	line-height: 1.75;
	margin: 0;
}

/* 高さを固定すると横長にトリミングされ写真の上下が切れるため、
   元画像と同じ縦横比(16:9)にして上下いっぱいまで見せる */
.usage-img {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* 白背景（タイトル・説明文）と写真の境目をぼかす:
   写真の上端に白→透明のグラデーションを重ね、境界線を溶かす */
.usage-img::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		#ffffff 0%,
		rgba(255, 255, 255, 0.8) 35%,
		rgba(255, 255, 255, 0.35) 68%,
		rgba(255, 255, 255, 0) 100%
	);
}

.usage-img img {
	width: 100%;
	height: 100%;
	/* 枠が元画像と同じ 16:9 のため cover でも切り取りは起きない */
	object-fit: cover;
	object-position: center;
	display: block;
}

/* =========================================================
   Front Page - Categories
========================================================= */
.category-grid {
	display: flex;
	gap: 30px;
	justify-content: center;
	flex-wrap: wrap;
}

.category-card {
	flex: 1;
	min-width: 250px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	color: #FFF;
	text-align: center;
	padding: 50px 20px;
	border-radius: 20px;
	transition: transform 0.3s, box-shadow 0.3s;
	box-shadow: var(--box-shadow-soft);
}

.category-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--box-shadow-hover);
	color: #FFF;
}

.category-card h3 {
	font-size: 1.5rem;
	margin-bottom: 15px;
}

/* =========================================================
   Front Page - News
========================================================= */
.news-list {
	max-width: 900px;
	margin: 0 auto;
	background: #FFF;
	border-radius: 20px;
	box-shadow: var(--box-shadow-soft);
	padding: 40px 50px;
}

.news-item {
	display: flex;
	border-bottom: 1px solid var(--color-border);
	padding: 25px 0;
	align-items: center;
	transition: transform 0.3s;
}

.news-item:hover {
	transform: translateX(10px);
}

.news-item:last-child {
	border-bottom: none;
}

.news-date {
	width: 130px;
	color: var(--color-primary);
	font-size: 0.9rem;
	font-weight: 700;
	background: var(--color-bg-alt);
	padding: 6px 15px;
	border-radius: 50px;
	text-align: center;
	margin-right: 25px;
}

.news-title {
	flex: 1;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--color-text-main);
	position: relative;
	display: inline-block;
}

.news-title::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -4px;
	left: 0;
	background-color: var(--color-primary);
	transition: width 0.3s ease;
}

.news-title:hover {
	color: var(--color-primary);
}

.news-title:hover::after {
	width: 100%;
}

/* =========================================================
   Footer & CTA
========================================================= */
.common-cta {
	padding: 80px 20px;
}

/* 角丸グラデーションボックス化 */
.common-cta .container {
	background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
	color: #FFF;
	padding: 60px;
	border-radius: 30px;
	box-shadow: 0 20px 40px rgba(4, 120, 87, 0.2);
	text-align: center;
}

.common-cta h2 {
	margin-bottom: 40px;
	font-size: 2rem;
}

.cta-actions {
	display: flex;
	justify-content: center;
	gap: 60px;
	align-items: center;
}

.cta-phone .phone-label {
	font-size: 1rem;
	opacity: 0.9;
}

.phone-number {
	font-size: 2.5rem;
	font-weight: 700;
	margin: 5px 0;
}

.business-hours {
	font-size: 0.9rem;
	opacity: 0.8;
}

.site-footer {
	background-color: var(--color-bg-light);
	padding: 60px 0 30px;
	border-top: 1px solid var(--color-border);
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}

.footer-company-info h3 {
	color: var(--color-primary);
	margin-bottom: 15px;
	font-size: 1.4rem;
}

.footer-nav-area ul {
	display: flex;
	flex-wrap: wrap; /* 小型スマホでメニューがはみ出さないよう折り返し */
	gap: 20px;
}

.footer-nav-area a {
	color: var(--color-text-light);
	font-size: 0.95rem;
}

.footer-nav-area a:hover {
	color: var(--color-primary);
}

.site-info {
	text-align: center;
	border-top: 1px solid var(--color-bg-body);
	padding-top: 30px;
	font-size: 0.85rem;
	color: var(--color-text-light);
}

/* =========================================================
   Archive & Single Post Styles
========================================================= */
.post-list {
	max-width: 900px;
	margin: 0 auto;
}

.post-item {
	background: #FFF;
	border-radius: 20px;
	box-shadow: var(--box-shadow-soft);
	margin-bottom: 30px;
	padding: 30px 40px;
	transition: transform 0.3s, box-shadow 0.3s;
}

.post-item:hover {
	transform: translateY(-5px);
	box-shadow: var(--box-shadow-hover);
}

.post-item-link {
	display: block;
}

.post-item-meta {
	margin-bottom: 15px;
}

.post-date {
	margin-right: 15px;
	color: var(--color-text-light);
	font-size: 0.9rem;
}

.post-category {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	color: #FFF;
	font-size: 0.8rem;
	padding: 4px 12px;
	border-radius: 50px; /* ピル型 */
	display: inline-block;
}

.post-item-title {
	font-size: 1.6rem;
	color: var(--color-primary);
	margin-bottom: 15px;
	font-weight: 700;
}

.post-item-excerpt {
	color: var(--color-text-light);
	margin-bottom: 20px;
}

.post-read-more {
	display: inline-block;
	color: var(--color-primary);
	font-weight: bold;
	font-size: 0.95rem;
	background: var(--color-bg-alt);
	padding: 8px 20px;
	border-radius: 50px;
	transition: background 0.3s;
}

.post-item:hover .post-read-more {
	background: var(--color-bg-body);
}

/* Single */
.single-main .entry-header {
	max-width: 900px;
	margin: 0 auto 40px;
	text-align: center;
}

.single-main .entry-meta {
	margin-bottom: 20px;
}

.single-main .entry-title {
	font-size: 2.5rem;
	color: var(--color-primary);
	font-weight: 700;
}

.single-main .entry-content {
	max-width: 800px;
	margin: 0 auto;
	background: #FFF;
	padding: 50px;
	border-radius: 20px;
	box-shadow: var(--box-shadow-soft);
}

.post-cta {
	max-width: 800px;
	margin: 50px auto 0;
	background: linear-gradient(135deg, var(--color-bg-alt) 0%, #FFF 100%);
	border: 1px solid var(--color-border);
	padding: 50px;
	border-radius: 20px;
	text-align: center;
	box-shadow: var(--box-shadow-soft);
}

.post-cta h3 {
	color: var(--color-primary);
	margin-bottom: 20px;
	font-size: 1.5rem;
}

.post-cta-actions {
	margin-top: 30px;
}

/* =========================================================
   Product Archive & Single
========================================================= */
.product-card {
	background: #FFF;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--box-shadow-soft);
	transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--box-shadow-hover);
}
.product-thumbnail {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-alt);
	flex-shrink: 0;
}
.product-thumbnail img {
	position: absolute;
	top: 20px;
	left: 20px;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	object-fit: contain;
}
.product-info {
	padding: 25px;
}
.product-title {
	color: var(--color-primary);
	font-size: 1.3rem;
	margin-bottom: 10px;
}
.product-excerpt {
	color: var(--color-text-light);
	font-size: 0.95rem;
}

.single-product-main .product-detail {
	background: #FFF;
	padding: 50px;
	border-radius: 30px;
	box-shadow: var(--box-shadow-soft);
}
.product-detail-layout {
	display: flex;
	gap: 50px;
}
.product-gallery {
	flex: 1;
}
.product-gallery img {
	border-radius: 20px;
	box-shadow: var(--box-shadow-soft);
}
.product-info-area {
	flex: 1;
}

/* Category Filter Tabs */
.product-category-filter {
	margin-bottom: 40px;
	text-align: center;
}
.category-list {
	display: inline-flex;
	background: #FFF;
	padding: 10px;
	border-radius: 50px;
	box-shadow: var(--box-shadow-soft);
	gap: 10px;
}
.category-list a {
	padding: 10px 25px;
	border-radius: 50px;
	color: var(--color-text-main);
	font-weight: 500;
	transition: all 0.3s;
}
.category-list a:hover {
	background: var(--color-bg-alt);
}
.category-list a.is-active {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	color: #FFF;
	box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}

/* =========================================================
   Logos
========================================================= */
.header-logo {
	max-height: 40px;
	width: auto;
	vertical-align: middle;
}

.header-logos {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.header-logo-mark {
	max-height: 58px;
	width: auto;
}

.header-logo-text {
	max-height: 40px;
	width: auto;
}

.footer-logos {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	max-width: 100%;
}

.footer-logo-mark {
	max-height: 60px;
	width: auto;
	/* マークは正方形で小さいため縮めない */
	flex: 0 0 auto;
}

/* 社名ロゴは横長（約9:1）で、狭い画面では横幅を超えて切れてしまう。
   幅が足りないときは縦横比を保ったまま縮小して必ず収める */
.footer-logo-text {
	max-height: 35px;
	width: auto;
	height: auto;
	max-width: 100%;
	min-width: 0;
	flex: 0 1 auto;
	object-fit: contain;
}

/* =========================================================
   Hamburger Button
========================================================= */
.hamburger-btn {
	display: none; /* デスクトップでは非表示 */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 201;
	position: relative;
	padding: 0;
	order: 3;
}

.hamburger-line {
	display: block;
	width: 26px;
	height: 2px;
	background-color: var(--color-primary);
	border-radius: 2px;
	transition: transform 0.35s ease, opacity 0.35s ease, width 0.35s ease;
	transform-origin: center;
}

/* ×アイコン（開いているとき） */
.hamburger-btn.is-active .hamburger-line:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.hamburger-btn.is-active .hamburger-line:nth-child(2) {
	opacity: 0;
	width: 0;
}
.hamburger-btn.is-active .hamburger-line:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* =========================================================
   Nav Overlay
========================================================= */
.nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 198;
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.35s ease;
}

/* =========================================================
   Responsive: Hamburger active (max-width: 1024px)
========================================================= */
@media screen and (max-width: 1024px) {

	/* ハンバーガーボタン表示 */
	.hamburger-btn {
		display: flex;
	}

	/* ドロワーナビ */
	.global-nav {
		position: fixed;
		top: 0;
		right: -320px;
		width: 300px;
		height: 100vh;
		background: #fff;
		box-shadow: -4px 0 30px rgba(0,0,0,0.12);
		z-index: 200;
		padding: 90px 30px 40px;
		overflow-y: auto;
		transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		border-left: 3px solid var(--color-primary);
	}

	.global-nav.is-open {
		right: 0;
	}

	.global-nav ul {
		flex-direction: column;
		gap: 0;
	}

	.global-nav ul li {
		border-bottom: 1px solid var(--color-bg-alt);
	}

	.global-nav a {
		display: block;
		padding: 16px 8px;
		font-size: 1rem;
		font-weight: 700;
		color: var(--color-text-main);
		letter-spacing: 0.05em;
		transition: color 0.2s, padding-left 0.2s;
	}

	.global-nav a:hover {
		color: var(--color-primary);
		padding-left: 16px;
	}

	/* ヘッダーの backdrop-filter は position:fixed の基準を狂わせるため
	   ドロワーメニューを使うモバイル/タブレットでは無効化する */
	.site-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* オーバーレイ（表示/非表示は main.js が制御。常時 display:block にすると
	   透明のままタップを妨害するため、ここでは切り替えない） */
	.nav-overlay.is-visible {
		opacity: 1;
	}

	/* コンテンツ崩れ修正 */
	.strengths-grid, .usage-grid, .footer-inner, .cta-actions {
		flex-direction: column;
	}
	.product-detail-layout {
		flex-direction: column;
	}
}

/* =========================================================
   Responsive (Max Width: 768px)
========================================================= */
@media screen and (max-width: 768px) {
	.hero-inner {
		flex-direction: column;
		text-align: center;
	}

	.hero-visual {
		width: 80%;
		margin-top: 30px;
	}

	.hero-title {
		font-size: 2rem;
	}

	.section-padding {
		padding: 60px 0;
	}

	.common-cta .container {
		padding: 40px 20px;
	}

	.single-main .entry-content {
		padding: 30px 20px;
	}

	/* カテゴリ画像グリッド */
	.category-image-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* 製品フィーチャーグリッド */
	.product-feature-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* 製品CTAボックス */
	.product-cta-box {
		flex-direction: column;
		text-align: center;
	}

	/* 製品グリッド */
	.product-grid {
		grid-template-columns: 1fr;
	}

	.page-hero-title {
		font-size: 2rem;
	}

	/* セクション見出し（「ハヤシシンカレンダーの強み」など）:
	   PCの2.2remはスマホでは大きすぎるため、本文とのバランスを取って縮小する */
	.section-title {
		font-size: 1.5rem;
		margin-bottom: 36px;
		padding-bottom: 16px;
	}
	.section-lead {
		font-size: 0.95rem;
		margin-top: -20px;
		margin-bottom: 36px;
	}

	/* ヘッダーロゴ: スマホではハンバーガーボタンを押し出さないよう縮小 */
	.site-branding {
		min-width: 0;
	}
	.header-logo-mark {
		max-height: 40px;
	}
	.header-logo-text {
		max-height: 26px;
		max-width: calc(100vw - 130px);
		object-fit: contain;
	}

	.page-hero-lead {
		font-size: 0.95rem;
		line-height: 1.9;
	}

	/* トップページ お知らせリスト: 日付とタイトルを縦積みに */
	.news-list {
		padding: 24px 20px;
	}
	.news-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 18px 0;
	}
	.news-date {
		margin-right: 0;
	}
	.news-title {
		font-size: 1rem;
	}

	/* お知らせ一覧カードの余白を縮小 */
	.post-item {
		padding: 20px;
	}

	/* CTA電話番号のはみ出し防止 */
	.phone-number {
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 1024px) and (min-width: 769px) {
	.category-image-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.product-feature-grid {
		grid-template-columns: 1fr;
	}

	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================
   Footer - CTA Email link
========================================================= */
.cta-email {
	margin-top: 10px;
	font-size: 0.9rem;
	opacity: 0.85;
	color: #fff;
}

.footer-company-info a {
	color: var(--color-primary);
	transition: color 0.2s;
}

.footer-company-info a:hover {
	color: var(--color-accent);
}

.footer-company-info p {
	font-size: 0.9rem;
	color: var(--color-text-light);
	margin-bottom: 4px;
	line-height: 1.7;
}

/* =========================================================
   Company Profile Page
========================================================= */

/* 概要ラップ（左デコ＋右テーブル） */
.company-profile-wrap {
	display: flex;
	gap: 50px;
	align-items: stretch;
}

/* 左：デコカード群 */
.company-profile-deco {
	flex-shrink: 0;
	width: 250px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.company-deco-card {
	background: #fff;
	color: var(--color-text-main);
	border-radius: 20px;
	padding: 20px;
	text-align: center;
	box-shadow: var(--box-shadow-soft);
	position: relative;
	border-left: 4px solid var(--color-primary);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


.company-deco-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 15px;
}

.deco-number {
	font-size: 2.5rem;
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 0.2;
	margin-bottom: -10px;
	font-family: Arial, sans-serif;
}

.deco-en {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-primary);
	text-transform: uppercase;
}

.company-deco-label {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 5px;
	color: var(--color-primary);
}

.company-deco-sub {
	font-size: 0.85rem;
	opacity: 0.7;
}

/* 右：会社概要テーブル */
/* 左の装飾を廃止したため、表は中央寄せで幅を制限する */
.company-profile-table-wrap {
	flex: 1;
	display: flex;
	max-width: 900px;
	margin: 0 auto;
}

.company-profile-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--box-shadow-soft);
	height: 100%;
}

.company-profile-table th,
.company-profile-table td {
	/* 文字を大きくし、そのぶん行の余白を詰めて間延びを防ぐ */
	padding: 9px 28px;
	border-bottom: 1px solid var(--color-bg-body);
	text-align: left;
	vertical-align: top;
	line-height: 1.7;
	font-size: 1.15rem;
}

.company-profile-table th {
	width: 210px;
	font-weight: 700;
	color: var(--color-text-main);
	background: var(--color-bg-light);
	white-space: nowrap;
	border-right: 1px solid var(--color-bg-body);
}

.company-profile-table tr:last-child th,
.company-profile-table tr:last-child td {
	border-bottom: none;
}

.company-note {
	font-size: 0.85rem;
	color: var(--color-text-light);
}

.company-tel-link,
.company-mail-link {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 1.1rem;
	transition: color 0.2s;
}

.company-tel-link:hover,
.company-mail-link:hover {
	color: var(--color-accent);
}

/* 強みグリッド */
.company-strength-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

/* アクセス・問い合わせ */
.company-access-wrap {
	display: flex;
	gap: 50px;
	align-items: stretch;
}

.company-access-info {
	flex-shrink: 0;
	width: 380px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.access-info-block {
	background: #FFF;
	padding: 30px;
	border-radius: 20px;
	box-shadow: var(--box-shadow-soft);
	position: relative;
	overflow: hidden;
}

.access-en {
	position: absolute;
	top: 15px;
	right: -10px;
	font-size: 3rem;
	font-weight: 900;
	color: var(--color-primary);
	opacity: 0.04;
	text-transform: uppercase;
	transform: rotate(-5deg);
	pointer-events: none;
}

.access-info-block h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 12px;
}

.access-info-block p {
	font-size: 1rem;
	color: var(--color-text-main);
	line-height: 1.8;
}

.access-tel {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-primary);
}

.access-mail {
	color: var(--color-primary);
	font-weight: 600;
	word-break: break-all;
}

/* 1枚のカードに2つ目の見出し（FAX）を置くとき用。見出しの大きさは「お電話」と同じまま、
   上の番号との間隔だけあける。番号側は .access-tel を付けて電話番号と同じ大きさに揃える */
.access-subhead {
	margin-top: 18px;
}

.access-hours {
	font-size: 0.85rem;
	color: var(--color-text-light);
	margin-top: 4px;
}

.access-cta-btn {
	margin-top: auto;
	/* ボタンは中の文字ぶんの幅しか持たないため、枠の中央へ寄せる */
	text-align: center;
}

.company-access-map {
	flex: 1;
	min-height: 420px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--box-shadow-soft);
	/* iframe を絶対配置で敷き詰めるための基準 */
	position: relative;
}

/* 縦積みになる画面では枠の高さが内容依存になり、iframe の height:100% が
   解決できずに既定の150pxへ縮んで地図が途中で切れてしまう。
   絶対配置で枠いっぱいに広げ、どの画面でも必ず全体が表示されるようにする */
.company-access-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* =========================================================
   社長挨拶 / 沿革（会社概要ページ）
========================================================= */
.company-message-body {
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	padding: 48px 56px;
	border-radius: 24px;
	box-shadow: var(--box-shadow-soft);
	font-size: 1.05rem;
	line-height: 2;
	color: var(--color-text-main);
}

.company-message-body > *:first-child {
	margin-top: 0;
}

.company-message-body > *:last-child {
	margin-bottom: 0;
}

/* 署名は本文の右下に配置（書面の体裁に合わせる） */
.company-message-sign {
	margin-top: 40px;
	text-align: right;
}

.company-message-sign__label {
	margin: 0 0 6px;
	font-size: 0.95rem;
	color: var(--color-text-light);
	letter-spacing: 0.08em;
}

.company-message-sign__img {
	display: inline-block;
	width: auto;
	max-width: 260px;
	height: auto;
}

.company-history-empty {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	color: var(--color-text-light);
}

@media screen and (max-width: 768px) {
	.company-message-body {
		padding: 28px 20px;
		font-size: 1rem;
	}
	.company-message-sign__img {
		max-width: 200px;
	}
}

/* レスポンシブ：会社概要 */
@media screen and (max-width: 1024px) {
	.company-profile-wrap {
		flex-direction: column;
	}
	.company-profile-deco {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.company-deco-card {
		flex: 1;
		min-width: 130px;
	}
	.company-strength-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.company-access-wrap {
		flex-direction: column;
	}
	.company-access-info {
		width: 100%;
	}
	.company-access-map {
		min-height: 300px;
	}
}

/* スマホ・タブレット: 会社概要の表を意図した文節位置で折り返す。
   日本語は既定で文字と文字の間ならどこでも改行されてしまうため、keep-all で自動改行を止め、
   HTML に入れた <wbr>（改行してよい位置）だけを改行候補にする。
   それでも1行に収まらない場合だけ任意位置で折り返し、セルからはみ出さないようにする。 */
@media screen and (max-width: 1024px) {
	/* keep-all や nowrap はセルの最小幅を押し上げ、既定のレイアウトでは表が
	   コンテナ幅を超えて広がってしまう。列幅を内容ではなく指定値で決めて防ぐ。 */
	.company-profile-table {
		table-layout: fixed;
	}
	.company-profile-table td {
		word-break: keep-all;
		overflow-wrap: break-word;
	}
}

/* 小型スマホ(360px以下): これ以上は幅で稼げないため、文字サイズをもう一段下げて
   「ハヤシシンカレンダー」などが1行に収まるようにする */
@media screen and (max-width: 360px) {
	.company-profile-table th {
		width: 92px;
		font-size: 0.85rem;
	}
	.company-profile-table td {
		font-size: 0.85rem;
	}
}

/* <wbr> より後ろに改行できる場所があるとそちらが優先されるため、
   途中で切りたくない塊（住所の番地・氏名など）はこれで囲んで分割を禁止する */
.nowrap-unit {
	white-space: nowrap;
}

@media screen and (max-width: 768px) {
	.company-strength-grid {
		grid-template-columns: 1fr;
	}
	/* 狙った文節で折り返すには1行あたりの文字数が要る。見出し幅・余白・文字サイズを
	   詰めて、本文セルに必要な幅を確保する（見出し幅は「設立年月日」が収まる最小値） */
	.company-profile-table th {
		width: 104px;
		padding: 7px 12px;
		font-size: 1rem;
	}
	.company-profile-table td {
		padding: 7px 12px;
		font-size: 1rem;
	}
}

/* =========================================================
   News Archive (お知らせ一覧・コーポレート標準の行形式)
========================================================= */
.news-archive-section {
	padding-top: 60px; /* ヒーロー直下のため上部は控えめに */
}

.news-archive-list {
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: var(--box-shadow-soft);
	padding: 10px 50px;
}

.news-archive-item {
	border-bottom: 1px solid var(--color-border);
}

.news-archive-item:last-child {
	border-bottom: none;
}

.news-archive-link {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 26px 0;
	color: var(--color-text-main);
}

.news-archive-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.news-archive-date {
	width: 100px;
	font-size: 0.95rem;
	color: var(--color-text-light);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.news-archive-cat {
	display: inline-block;
	min-width: 96px;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	border-radius: 50px;
	padding: 4px 14px;
	line-height: 1.4;
	background: #fff;
}

.news-archive-title {
	flex: 1;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.7;
	transition: color 0.3s ease;
}

.news-archive-arrow {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-text-light);
	font-size: 0.9rem;
	transition: all 0.3s ease;
}

.news-archive-link:hover .news-archive-title {
	color: var(--color-primary);
}

.news-archive-link:hover .news-archive-arrow {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
	transform: translateX(4px);
}

@media screen and (max-width: 768px) {
	.news-archive-list {
		padding: 4px 20px;
	}
	.news-archive-link {
		flex-wrap: wrap; /* メタ情報とタイトルを縦積みに */
		gap: 10px;
		padding: 18px 0;
	}
	.news-archive-meta {
		width: 100%;
		gap: 12px;
	}
	.news-archive-date {
		width: auto;
		font-size: 0.9rem;
	}
	.news-archive-title {
		width: 100%;
		flex: none;
		font-size: 1rem;
	}
	.news-archive-arrow {
		display: none; /* モバイルは行全体タップで遷移するため非表示 */
	}
}

/* =========================================================
   Pagination (お知らせ・製品一覧)
========================================================= */

/* WordPress が出力するアクセシビリティ用の隠し見出し */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.pagination .page-numbers {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 16px;
	border-radius: 50px; /* 既存ボタンと同じピル型 */
	background: #fff;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
	font-weight: 700;
	font-size: 0.95rem;
	box-shadow: var(--box-shadow-soft);
	transition: all 0.3s ease;
}

.pagination a.page-numbers:hover {
	background: var(--color-primary);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: var(--box-shadow-hover);
}

.pagination .page-numbers.current {
	background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
	border-color: transparent;
	color: #fff;
}

.pagination .page-numbers.dots {
	background: transparent;
	border: none;
	box-shadow: none;
	min-width: auto;
	padding: 0 4px;
	color: var(--color-text-light);
}

@media screen and (max-width: 768px) {
	.pagination .page-numbers {
		min-width: 38px;
		height: 38px;
		padding: 0 12px;
		font-size: 0.9rem;
	}
}

/* =========================================================
   Contact Form 7 (Modern UI)
========================================================= */
.custom-contact-form {
	max-width: 800px;
	margin: 0 auto;
	background: #FFF;
	padding: 50px;
	border-radius: 20px;
	box-shadow: var(--box-shadow-soft);
}

.custom-contact-form .form-row {
	display: flex;
	gap: 30px;
	margin-bottom: 60px;
}

.custom-contact-form .form-group {
	margin-bottom: 60px;
}

.custom-contact-form .form-group.half {
	flex: 1;
	margin-bottom: 0;
}

.custom-contact-form label {
	display: block;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 2px;
	font-size: 0.95rem;
}

.custom-contact-form .required {
	background: #EF4444;
	color: #FFF;
	font-size: 0.75rem;
	padding: 3px 8px;
	border-radius: 4px;
	margin-left: 8px;
	vertical-align: middle;
	font-weight: normal;
}

.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"],
.custom-contact-form textarea {
	width: 100%;
	padding: 16px 20px;
	border: 2px solid var(--color-border);
	border-radius: 12px;
	font-size: 1rem;
	font-family: inherit;
	background-color: #FAFAFA;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.custom-contact-form textarea {
	min-height: 150px;
	resize: vertical;
}

.custom-contact-form input[readonly] {
	background-color: #E2E8F0;
	color: #475569;
	cursor: not-allowed;
	pointer-events: none;
}

.custom-contact-form input[type="text"]:focus,
.custom-contact-form input[type="email"]:focus,
.custom-contact-form input[type="tel"]:focus,
.custom-contact-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	background-color: #FFF;
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.custom-contact-form input::placeholder,
.custom-contact-form textarea::placeholder {
	color: #A0AEC0;
}

.custom-contact-form .form-submit {
	text-align: center;
	margin-top: 40px;
}

.custom-contact-form .form-submit .btn {
	width: 100%;
	max-width: 300px;
	font-size: 1.1rem;
	padding: 18px 40px;
}

.wpcf7-spinner {
	background-color: var(--color-primary) !important;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--color-primary);
	background: var(--color-bg-body);
	color: var(--color-primary);
	border-radius: 12px;
	padding: 20px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: #EF4444;
	color: #EF4444;
	border-radius: 12px;
	padding: 20px;
}

.wpcf7-not-valid-tip {
	color: #EF4444;
	font-size: 0.85rem;
	margin-top: 5px;
	display: block;
}

@media screen and (max-width: 768px) {
	/* 横2列を縦積みに戻す。項目の間隔は下部のフォーム整えブロックの gap に一本化し、
	   ここで個別の margin を足さない（足すと行内と行間で間隔がずれる） */
	.custom-contact-form .form-row {
		flex-direction: column;
	}
}

/* =========================================================
   Premium Single News Page Styles
========================================================= */

.single-news-main {
	background-color: var(--color-bg-body);
	padding-bottom: 80px;
}

/* Hero Section */
/* 高さ・余白は他ページの .page-hero-section と揃える（画面高さ基準だと突出して高くなるため） */
.news-hero-section {
	position: relative;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 60px;
	padding: 50px 20px;
}

.news-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 1;
	transform: scale(1.05);
	animation: slowZoom 20s ease-out infinite alternate;
}

.news-hero-bg--fallback {
	background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
	background-size: 200% 200%;
	animation: gradientFlow 10s ease infinite;
}

@keyframes slowZoom {
	from { transform: scale(1); }
	to { transform: scale(1.1); }
}

@keyframes gradientFlow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.news-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
	z-index: 2;
}

.news-hero-container {
	position: relative;
	z-index: 3;
	text-align: center;
	color: #fff;
	max-width: 900px;
}

.news-hero-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 20px;
	font-size: 0.95rem;
	letter-spacing: 0.05em;
	opacity: 0;
	animation: fadeUp 0.8s ease forwards 0.2s;
}

.news-hero-category {
	background: var(--color-primary);
	color: #fff;
	padding: 4px 12px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 0.8rem;
}

.news-hero-title {
	font-family: "Noto Serif JP", serif;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-shadow: 0 4px 15px rgba(0,0,0,0.3);
	margin: 0;
	opacity: 0;
	animation: fadeUp 0.8s ease forwards 0.4s;
}

@media screen and (max-width: 768px) {
	.news-hero-title {
		font-size: 1.8rem;
	}
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Breadcrumbs */
.news-breadcrumbs {
	margin-bottom: 40px;
	font-size: 0.85rem;
	color: var(--color-text-light);
}

.news-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
}

.news-breadcrumbs li {
	display: flex;
	align-items: center;
}

.news-breadcrumbs li:not(:last-child)::after {
	content: ">";
	margin: 0 10px;
	color: var(--color-border);
}

.news-breadcrumbs a {
	color: var(--color-text-light);
	text-decoration: none;
	transition: color 0.3s;
}

.news-breadcrumbs a:hover {
	color: var(--color-primary);
}

.news-breadcrumbs li[aria-current="page"] {
	color: var(--color-text-main);
	font-weight: 500;
}

/* Premium Content Area */
.news-content-wrapper {
	max-width: 800px;
	margin: 0 auto;
	background: #fff;
	padding: 44px 80px;
	border-radius: 24px;
	box-shadow: 0 15px 40px rgba(0,0,0,0.04);
	margin-bottom: 60px;
}

/* 本文の先頭・末尾の余白は白枠の内側余白と二重になり、上下が不揃いに広く見えるため打ち消す */
.premium-entry-content > *:first-child {
	margin-top: 0;
}

.premium-entry-content > *:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 768px) {
	.news-content-wrapper {
		padding: 28px 20px;
	}
}

.premium-entry-content {
	font-size: 1.1rem;
	line-height: 2;
	color: var(--color-text-main);
	letter-spacing: 0.04em;
}

.premium-entry-content p {
	margin-bottom: 2em;
}

/* 本文1文字目の大文字装飾（ドロップキャップ）は使用しない。
   日本語では語の途中で文字が切り離されて見え、社名などが誤植のように読めてしまうため
   （例：「ハ」＋「ヤシシンカレンダー株式会社」）。 */

.premium-entry-content h2 {
	font-family: "Noto Serif JP", serif;
	font-size: 1.8rem;
	color: var(--color-primary);
	margin: 2.5em 0 1em;
	padding-bottom: 15px;
	border-bottom: 2px solid var(--color-bg-alt);
}

.premium-entry-content h3 {
	font-family: "Noto Serif JP", serif;
	font-size: 1.4rem;
	color: var(--color-text-main);
	margin: 2em 0 1em;
	padding-left: 15px;
	border-left: 4px solid var(--color-primary);
}

.premium-entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 2em 0;
	box-shadow: var(--box-shadow-soft);
}

.premium-entry-content blockquote {
	margin: 2em 0;
	padding: 30px;
	background: var(--color-bg-body);
	border-left: 5px solid var(--color-primary);
	font-style: italic;
	border-radius: 0 12px 12px 0;
}

/* Post Navigation */
.news-post-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 80px;
	max-width: 800px;
	margin: 0 auto 80px;
	padding-top: 30px;
	border-top: 1px solid var(--color-border);
}

.news-post-navigation > div {
	flex: 1;
}

.news-post-navigation .nav-center {
	text-align: center;
}

.news-post-navigation .nav-next {
	text-align: right;
}

.news-post-navigation a {
	color: var(--color-text-main);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s;
	display: inline-block;
}

.news-post-navigation a:hover {
	color: var(--color-primary);
}

.nav-arrow {
	font-size: 1.2rem;
	color: var(--color-border);
	transition: color 0.3s;
}

.news-post-navigation a:hover .nav-arrow {
	color: var(--color-primary);
}

/* スマホ: 前後記事のタイトルを出すと文字が折り返してボタンが縦に伸びてしまうため、
   タイトルは隠して矢印だけの簡潔なナビにする（リンク先は変わらない） */
@media screen and (max-width: 768px) {
	.news-post-navigation {
		gap: 12px;
		padding-top: 24px;
		margin-bottom: 56px;
	}
	/* 見た目からは消すが、読み上げソフトには記事名が伝わるよう残す
	   （display:none にするとリンクが「«」だけになり内容が分からなくなるため） */
	.news-post-navigation .nav-title {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	.news-post-navigation .nav-previous,
	.news-post-navigation .nav-next {
		flex: 0 0 auto;
	}
	.news-post-navigation .nav-center {
		flex: 1 1 auto;
	}
	.news-post-navigation .nav-arrow {
		display: inline-block;
		font-size: 1.5rem;
		line-height: 1;
		padding: 6px 10px;
	}
}

/* Related News */
.related-news-section {
	background-color: var(--color-bg-light);
}

.related-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

@media screen and (max-width: 992px) {
	.related-news-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 640px) {
	.related-news-grid {
		grid-template-columns: 1fr;
	}
}

.related-news-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0,0,0,0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-news-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 35px rgba(16, 185, 129, 0.15);
}

.related-news-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.related-news-img {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.related-news-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.related-news-card:hover .related-news-img img {
	transform: scale(1.05);
}

.related-news-img-fallback {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end));
}

.related-news-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-primary);
	padding: 4px 12px;
	border-radius: 50px;
	font-size: 0.75rem;
	font-weight: 700;
}

.related-news-info {
	padding: 25px;
}

.related-news-date {
	display: block;
	font-size: 0.85rem;
	color: var(--color-text-light);
	margin-bottom: 10px;
}

.related-news-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-text-main);
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===========================
   Hero Video Fade Slideshow
   =========================== */

/*
 * position:absolute の子要素はコンテナの高さを決定しないため、
 * min-height でフォールバック高さを確保。JSが aspect-ratio を
 * 設定した後は正確な比率に自動調整される。
 */
.hero-movie {
    position: relative;
    min-height: 400px;          /* JSが動く前のフォールバック */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 5px 5px 20px rgba(4, 120, 87, 0.6);
    background: #ffffff;        /* フェード中の背景を白に */
}

/* 全動画を同じ領域に絶対配置して重ねる */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;        /* 縦横比を保ちながら中央に収める */
    object-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

.hero-video--active {
    opacity: 1;
}

/* =========================================================
   パンくずリスト（全ページ共通。構造化データと階層を共有）
========================================================= */
.breadcrumbs {
	background: var(--color-bg-light);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	font-size: 0.85rem;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	padding: 12px 0;
	list-style: none;
	margin: 0;
	color: var(--color-text-light);
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 区切り記号はCSSで付ける（テキストとして選択・読み上げされないように） */
.breadcrumbs__item + .breadcrumbs__item::before {
	content: '\203A';
	color: var(--color-text-light);
	opacity: 0.6;
}

.breadcrumbs__item a {
	color: var(--color-text-light);
	text-decoration: none;
}

.breadcrumbs__item a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.breadcrumbs__item [aria-current='page'] {
	color: var(--color-text-main);
}

@media screen and (max-width: 768px) {
	.breadcrumbs {
		font-size: 0.78rem;
	}
	.breadcrumbs__list {
		padding: 10px 0;
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.breadcrumbs__list::-webkit-scrollbar {
		display: none;
	}
}

/* 視覚的には隠すが、スクリーンリーダーと検索エンジンには読ませる見出し */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* フッターの製品カテゴリ導線（全ページから各カテゴリへ辿れるようにする内部リンク） */
.footer-product-nav {
	margin-top: 20px;
}

.footer-nav-heading {
	font-size: 0.85rem;
	font-weight: 700;
	margin-bottom: 8px;
	opacity: 0.85;
}

.footer-product-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.footer-product-nav a {
	font-size: 0.85rem;
	text-decoration: none;
	color: inherit;
	opacity: 0.85;
}

.footer-product-nav a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* フッター最下部の法務リンク（主張させず小さく置く） */
.site-info__links {
	margin-bottom: 6px;
	font-size: 0.78rem;
}

.site-info__links a {
	color: inherit;
	opacity: 0.75;
	text-decoration: none;
}

.site-info__links a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* =========================================================
   規約・ポリシー系ページの本文
========================================================= */
.legal-body {
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	border-radius: 24px;
	box-shadow: var(--box-shadow-soft);
	padding: 48px 56px;
	line-height: 1.9;
}

.legal-intro {
	margin-bottom: 8px;
}

.legal-body h2 {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-primary);
	margin-top: 40px;
	margin-bottom: 12px;
	padding-left: 12px;
	border-left: 4px solid var(--color-primary);
}

.legal-body p {
	margin-bottom: 14px;
}

.legal-body ul {
	margin: 0 0 16px;
	padding-left: 1.4em;
	list-style: disc;
}

.legal-body li {
	margin-bottom: 6px;
}

.legal-contact {
	margin-top: 16px;
	padding: 20px 24px;
	background: var(--color-bg-light);
	border-radius: 12px;
}

.legal-contact p {
	margin-bottom: 4px;
}

.legal-contact a {
	color: var(--color-primary);
}

@media screen and (max-width: 768px) {
	.legal-body {
		padding: 28px 20px;
		border-radius: 16px;
	}
	.legal-body h2 {
		font-size: 1.05rem;
		margin-top: 32px;
	}
	.legal-contact {
		padding: 16px;
	}
}

/* =========================================================
   製品一覧: スマホ・タブレットのコンパクト表示（1024px以下）
   1件ずつ縦に長いカードを並べると全体で56画面分になり探しづらいため、
   サムネイルと品名だけの行にまとめ、詳細はタップでポップアップに出す。
   仕様や説明文は非表示にするだけでHTMLには残るため、検索エンジンからは従来どおり読める。
========================================================= */
@media screen and (max-width: 1024px) {
	.archive-products-main .product-feature-grid {
		display: block;
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: var(--box-shadow-soft);
	}

	/* PCの3列グリッドで段を揃えるための空きマスは、1列表示では不要 */
	.archive-products-main .product-feature-card--spacer {
		display: none;
	}

	.archive-products-main .product-feature-card {
		display: flex;
		/* 既定のカードは縦積み（flex-direction: column）なので、横並びに明示的に戻す */
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 12px 40px 12px 14px;
		border-radius: 0;
		border-bottom: 1px solid var(--color-bg-body);
		box-shadow: none;
		background: #fff;
		position: relative;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
	}

	.archive-products-main .product-feature-card:last-child {
		border-bottom: 0;
	}

	.archive-products-main .product-feature-card:active {
		background: var(--color-bg-light);
	}

	/* タップできることを示す矢印 */
	.archive-products-main .product-feature-card::after {
		content: '\203A';
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 1.4rem;
		line-height: 1;
		color: var(--color-text-light);
		opacity: 0.5;
	}

	.archive-products-main .product-feature-img {
		flex: 0 0 68px;
		width: 68px;
		height: 68px;
		margin: 0;
		padding: 0;
		background: var(--color-bg-light);
		border-radius: 6px;
		overflow: hidden;
		aspect-ratio: auto;
	}

	/* カード用の画像指定は position:absolute と top/left:30px の余白を持つ。
	   68pxのサムネイルにそのまま効くと右下に30pxずれて枠から出てしまうため、
	   絶対配置を解除して枠いっぱいに収める */
	.archive-products-main .product-feature-img img {
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.archive-products-main .product-feature-info {
		flex: 1;
		min-width: 0;
		padding: 0;
	}

	.archive-products-main .product-no {
		font-size: 0.72rem;
		margin-bottom: 2px;
	}

	.archive-products-main .product-feature-name {
		font-size: 0.95rem;
		line-height: 1.4;
		margin: 0 0 3px;
	}

	/* 仕様は先頭の1行だけを補足として残し、残りはポップアップで見せる */
	.archive-products-main .product-spec-list {
		margin: 0;
	}

	.archive-products-main .product-spec-list li {
		display: none;
		font-size: 0.75rem;
		color: var(--color-text-light);
		line-height: 1.5;
		padding: 0;
		border: 0;
	}

	.archive-products-main .product-spec-list li:first-child {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.archive-products-main .product-spec-list .spec-label {
		display: none;
	}

	/* 一覧では出さず、ポップアップ側に集約する要素 */
	.archive-products-main .product-feature-card .product-inquiry-btn,
	.archive-products-main .product-feature-card .product-inquiry-list,
	.archive-products-main .product-feature-card .variant-table,
	.archive-products-main .product-feature-card .variant-table-wrap,
	.archive-products-main .product-feature-card .color-swatches,
	.archive-products-main .product-feature-card .spec-note,
	.archive-products-main .product-feature-card .product-badge {
		display: none;
	}

	/* カテゴリ間の余白を詰める */
	.archive-products-main .product-feature-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.archive-products-main .category-subtitle {
		margin-top: 28px !important;
		margin-bottom: 8px !important;
		font-size: 1.15em !important;
	}

	/* カテゴリナビを画面上部に固定して、どこからでも移動できるようにする。
	   ヘッダー自身も追従するため、その高さぶん下げないと重なってしまう */
	.product-category-nav {
		position: sticky;
		top: var(--header-height);
		z-index: 20;
	}
}

/* =========================================================
   製品詳細のポップアップ
========================================================= */
.product-modal {
	width: min(92vw, 460px);
	max-height: 88vh;
	max-height: 85dvh;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	overflow: visible;
}

.product-modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.product-modal__body {
	max-height: 88vh;
	max-height: 85dvh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 24px 20px 28px;
	border-radius: 16px;
}

/* 閉じるボタン
   枠の外側（top:-14px）に置くと、中身が多くポップアップが画面いっぱいに広がったとき
   画面外やブラウザのUIに隠れて押せなくなる。内側の右上に固定して、
   どの製品でも同じ位置・同じ大きさで押せるようにする。 */
.product-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-text-main);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* ポップアップの写真枠
   一覧カードの画像枠をそのまま複製しているため、カード用の指定
   （4:3や3:4の固定比率・画像の絶対配置・30pxのはみ出し防止余白）が
   そのまま効いてしまい、縦長・横長の製品で枠からはみ出す。
   ポップアップでは比率を固定せず、画像の縦横比なりに表示する。 */
.product-modal__img {
	position: static;
	aspect-ratio: auto;
	width: 100%;
	margin-bottom: 16px;
	padding: 12px;
	background: var(--color-bg-light);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-modal__img img {
	position: static;
	top: auto;
	left: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 46vh;
	object-fit: contain;
}

/* ポップアップ内は一覧側の省略指定を打ち消して全項目を見せる */
.product-modal .product-spec-list li {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: var(--color-text-main);
	white-space: normal;
}

.product-modal .spec-label {
	display: block;
}

.product-modal .product-inquiry-btn,
.product-modal .product-inquiry-list {
	display: block;
}

.product-modal .product-feature-name {
	font-size: 1.15rem;
	margin-bottom: 10px;
}

/* ポップアップ表示中は背面をスクロールさせない
   JSでクラスを付け外しする方式だと、閉じ方によってクラスが残り本文がスクロール
   できなくなる事故が起きうる。ダイアログが開いているかどうかで直接判定して、
   閉じれば必ず解除されるようにする。 */
body:has(.product-modal[open]) {
	overflow: hidden;
}

/* =========================================================
   共通CTA: スマホ・タブレットの圧縮
   PCの余白・文字サイズのままだと縦766px（画面の94%）を占めてしまい、
   1画面まるごとCTAという状態になる。情報は減らさず、
   見出し・余白・電話番号を画面幅に見合う大きさに落として半分程度にする。
========================================================= */
@media screen and (max-width: 768px) {
	.common-cta {
		padding: 40px 16px;
	}

	.common-cta .container {
		padding: 28px 18px;
		border-radius: 20px;
		box-shadow: 0 10px 24px rgba(4, 120, 87, 0.18);
	}

	.common-cta h2 {
		font-size: 1.35rem;
		line-height: 1.5;
		margin-bottom: 20px;
	}

	.cta-actions {
		gap: 22px;
	}

	.cta-phone .phone-label {
		font-size: 0.85rem;
	}

	.common-cta .phone-number {
		font-size: 1.6rem;
		margin: 2px 0;
	}

	.business-hours {
		font-size: 0.8rem;
	}

	/* ボタンは2行に折り返さない大きさにして、高さを1行ぶんに抑える */
	.common-cta .btn-contact {
		padding: 13px 20px;
		font-size: 0.95rem;
		white-space: nowrap;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	}

	.cta-email {
		margin-top: 8px;
		font-size: 0.8rem;
		word-break: break-all;
	}
}

/* =========================================================
   カテゴリナビ: スマホ・タブレットで1行に収める
   PCの大きさのままだと製品紹介ページで3段（179px）に折り返し、
   ページヘッダー直下の面積を大きく取ってしまう。
   文字と余白を詰めて1行に収め、それでも入りきらない小さい画面では
   折り返さずに横スクロールさせる（常に1行を保つ）。
========================================================= */
@media screen and (max-width: 1024px) {
	.product-category-nav {
		padding: 10px 0;
	}

	.product-category-nav__list {
		flex-wrap: nowrap;
		gap: 4px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* 収まるときは中央、あふれるときは先頭から見せる */
		justify-content: center;
		justify-content: safe center;
	}

	.product-category-nav__list::-webkit-scrollbar {
		display: none;
	}

	.product-category-nav__list li {
		flex: 0 0 auto;
	}

	.product-category-nav__list a {
		/* 上下の余白は指で押せる高さを保つため残し、横幅と文字で詰める */
		padding: 7px 9px;
		border-width: 1px;
		font-size: 0.72rem;
	}
}

/* 小型スマホ: 文字数の多い項目でも1行を保てるよう、もう一段詰める */
@media screen and (max-width: 360px) {
	.product-category-nav__list {
		gap: 3px;
	}

	.product-category-nav__list a {
		padding: 7px 7px;
		font-size: 0.68rem;
	}
}

/* =========================================================
   ページヘッダー（緑の帯）: スマホ・タブレットで高さを抑える
   PCと同じ min-height:300px・padding:50px のままだと、
   390px幅の画面で高さ300px＝画面の37%を占めてしまい、
   本文にたどり着くまでのスクロールが増える。
   最小高さの指定を外し、中身に応じた高さにする。
========================================================= */
@media screen and (max-width: 768px) {
	.page-hero-section {
		min-height: 0;
		padding: 28px 0;
	}

	.page-hero-title {
		font-size: 1.5rem;
		line-height: 1.4;
		margin-bottom: 10px;
		letter-spacing: 0.04em;
	}

	.page-hero-lead {
		font-size: 0.85rem;
		line-height: 1.7;
	}
}

/* タブレット: スマホほど詰めないが、PCの300pxよりは抑える中間の大きさ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	.page-hero-section {
		min-height: 200px;
		padding: 36px 0;
	}

	.page-hero-title {
		font-size: 2.2rem;
		margin-bottom: 14px;
	}

	.page-hero-lead {
		font-size: 1rem;
		line-height: 1.8;
	}
}

/* スマホ・タブレット: ヘッダーに加えてカテゴリナビも画面上部に固定されるため、
   アンカー移動時に空ける高さを「ヘッダー78 + カテゴリナビ52 + 余白16」にする */
@media screen and (max-width: 1024px) {
	:root {
		--scroll-offset: 146px;
	}
}

/* =========================================================
   お問い合わせフォームの整え
   Contact Form 7 は「ラベル</label><br>入力欄」という出力になるため、
   改行タグのぶん（約29px）ラベルと入力欄が離れ、どのラベルがどの欄のものか
   一目で結びつかない。改行を消して、ラベル直下に入力欄が来るようにする。
========================================================= */
.custom-contact-form .form-group br {
	display: none;
}

.custom-contact-form label {
	margin-bottom: 6px;
}

/* 入力欄を包む span がインライン要素のままだと余分な行が生まれるので、
   ブロックとして扱って高さを入力欄と一致させる */
.custom-contact-form .wpcf7-form-control-wrap {
	display: block;
}

/* Contact Form 7 は各項目を <p> で包むため、本文用の段落下マージン（約25px）が
   項目間に上乗せされ、行内22px・行間47pxと間隔がばらつく。ここで打ち消す */
.custom-contact-form .form-group p {
	margin: 0;
}

/* =========================================================
   スマホ・タブレット: 余白と入力欄の大きさを画面幅に合わせる
   PC用の 50px の内側余白・60px の項目間隔・高さ60pxの入力欄のままだと、
   縦に間延びしてまとまりがなく見える。
   項目の間隔を一定（22px）に揃えるのが見た目の整理に一番効く。
========================================================= */
@media screen and (max-width: 768px) {
	.custom-contact-form {
		padding: 24px 18px;
		border-radius: 16px;
	}

	/* 横並びが縦積みになる画面では、行内・行間の間隔を同じ値に揃える */
	.custom-contact-form .form-row {
		gap: 22px;
		margin-bottom: 22px;
	}

	.custom-contact-form .form-group {
		margin-bottom: 22px;
	}

	/* 縦積み時は form-row の gap が間隔を作るので、項目自身の余白は持たせない */
	.custom-contact-form .form-group.half {
		margin-bottom: 0;
	}

	.custom-contact-form label {
		font-size: 0.9rem;
	}

	.custom-contact-form .required {
		font-size: 0.68rem;
		padding: 2px 6px;
		margin-left: 6px;
	}

	.custom-contact-form input[type="text"],
	.custom-contact-form input[type="email"],
	.custom-contact-form input[type="tel"],
	.custom-contact-form textarea {
		/* 文字サイズは16pxのまま。これより小さいとiPhoneで
		   入力時に画面が勝手に拡大されてしまう */
		padding: 12px 14px;
		border-width: 1px;
		border-radius: 10px;
	}

	/* rows属性ぶんの高さが優先されるため、min-heightだけでなく height も指定する */
	.custom-contact-form textarea {
		height: 150px;
		min-height: 150px;
	}

	.custom-contact-form input[type="submit"] {
		padding: 15px 32px;
		font-size: 1rem;
	}
}

/* =========================================================
   個人情報の取扱いへの同意（プライバシーポリシー）
   送信前に同意を得るため、送信ボタンの直前にチェックボックスを置く。
   Contact Form 7 の [acceptance] は中身が <label> で包まれて出力されるため、
   フォーム共通のラベル装飾（緑・太字・block）を打ち消し、本文として読ませる。
========================================================= */
.custom-contact-form .form-consent {
	margin-bottom: 26px;
	text-align: center;
}

.custom-contact-form .form-consent label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 0;
	font-size: 0.92rem;
	font-weight: 400;
	color: var(--color-text-main);
	line-height: 1.6;
	text-align: left;
	cursor: pointer;
}

.custom-contact-form .form-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--color-primary);
	flex: 0 0 auto;
	cursor: pointer;
}

/* Contact Form 7 が各選択肢に付ける既定の余白を打ち消す */
.custom-contact-form .form-consent .wpcf7-list-item {
	margin: 0;
}

.custom-contact-form .form-consent a {
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: underline;
}

.custom-contact-form .form-consent a:hover {
	color: var(--color-accent);
}

/* 同意されるまで Contact Form 7 が送信ボタンを自動で無効化する。
   ただし見た目が有効時と同じままだと「なぜ押せないのか」が伝わらないため、
   無効状態をグレーで明示し、チェックすると本来の緑に戻るようにする */
.custom-contact-form input[type="submit"]:disabled,
.custom-contact-form .form-submit .btn:disabled {
	background: #c2ccc8;
	box-shadow: none;
	cursor: not-allowed;
}

.custom-contact-form input[type="submit"]:disabled:hover,
.custom-contact-form .form-submit .btn:disabled:hover {
	transform: none;
	box-shadow: none;
}

/* 未同意で送信したときの警告文も中央に揃える */
.custom-contact-form .form-consent .wpcf7-not-valid-tip {
	text-align: center;
}

/* =========================================================
   スマホ・タブレット: フッターの高さを圧縮
   PCの余白のままだと、スマホ（375px）でフッターだけで521px、
   直前のCTAと合わせるとページ全体の45%を占めてしまう。
   情報は減らさず、余白・ロゴ・文字を画面幅に見合う大きさに落とす。
========================================================= */
@media screen and (max-width: 768px) {
	.site-footer {
		padding: 30px 0 18px;
	}

	.footer-inner {
		gap: 16px;
		margin-bottom: 20px;
	}

	/* ロゴは視認できる最小限まで縮める（マーク60→42px） */
	.footer-logos {
		gap: 10px;
		margin-bottom: 10px;
	}

	.footer-logo-mark {
		max-height: 42px;
	}

	.footer-logo-text {
		max-height: 26px;
	}

	.footer-company-info p {
		font-size: 0.85rem;
		line-height: 1.6;
		margin-bottom: 2px;
	}

	.footer-nav-area ul {
		gap: 8px 16px;
	}

	.footer-nav-area a {
		font-size: 0.85rem;
	}

	.footer-product-nav {
		margin-top: 14px;
	}

	.footer-nav-heading {
		margin-bottom: 6px;
	}

	.footer-product-nav ul {
		gap: 4px 14px;
	}

	.site-info {
		padding-top: 16px;
	}

	.site-info__links {
		margin-bottom: 4px;
	}
}