/*
 * hayack-demo.css
 * ハヤック TOPページ デモ専用スタイル ─ グリーンデザイン版
 * クラスプレフィックス: hayack-header__ / hayack-nav / hayack-fv / hayack-trustbar / hayack-demo__
 * ※ 既存 style.css との干渉ゼロ（完全別クラス名）
 */

/* ================================================================
   CSS 変数（カラーパレット）
   ================================================================ */
:root {
	--hayack-green:        #79c141;
	--hayack-green-dark:   #4d8f1f;
	--hayack-green-medium: #5ea82c;
	--hayack-green-light:  #eef8e5;
	--hayack-cta-red:      #e8001a;
	--hayack-cta-red-dark: #c20016;
	--hayack-white:        #ffffff;
	--hayack-gray-light:   #f5f5f5;
	--hayack-gray:         #888888;
	--hayack-text:         #222222;
	--hayack-text-mid:     #555555;
	--hayack-border:       #e5e7eb;
	--hayack-shadow:       0 4px 20px rgba(0,0,0,.08);
	--hayack-shadow-md:    0 8px 32px rgba(0,0,0,.14);
	--hayack-radius:       8px;
	--hayack-radius-lg:    16px;
}

/* ================================================================
   1. ヘッダー（.hayack-header）
   ================================================================ */
.hayack-header {
	background: var(--hayack-white);
	border-bottom: 1px solid var(--hayack-border);
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
	position: sticky;
	top: 0;
	z-index: 1000;
}
.hayack-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 110px;       /* ヘッダー上段の高さ */
	gap: 16px;
	box-sizing: border-box;
}

/* ロゴ */
.hayack-header__logo { flex-shrink: 0; }
.hayack-header__logo-link {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	line-height: 1;
}
.hayack-header__logo-img {
	width: 320px;        /* ロゴ横幅 300〜360px */
	height: auto;
	display: block;
	max-height: 72px;
	object-fit: contain;
	object-position: left center;
}
.hayack-header__tagline {
	font-size: 0.5625rem;
	color: var(--hayack-gray);
	margin: 0;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
/* カスタムロゴ未設定時のテキストロゴ（fallback） */
.hayack-header__logo-text {
	font-size: 1.375rem;
	font-weight: 900;
	color: var(--hayack-green-dark);
	line-height: 1.1;
	white-space: nowrap;
}
@media (max-width: 767px) {
	.hayack-header__logo-text { font-size: 1.0625rem; }
}

/* 右側グループ（PC）: 電話 | 来店予約 | 無料診断 */
.hayack-header__right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

/* 電話番号 */
.hayack-header__tel-block { text-align: right; white-space: nowrap; }
.hayack-header__tel-label {
	font-size: 0.6875rem;
	color: var(--hayack-gray);
	margin: 0 0 3px;
}
.hayack-header__tel-number {
	display: block;
	font-size: 1.875rem;
	font-weight: 900;
	color: var(--hayack-green-dark);
	text-decoration: none;
	letter-spacing: 0.02em;
	line-height: 1;
	transition: color .2s;
}
.hayack-header__tel-number::before { content: '☎ '; font-size: .85em; }
.hayack-header__tel-number:hover { color: var(--hayack-green); }
.hayack-header__tel-hours {
	font-size: 0.6875rem;
	color: var(--hayack-gray);
	margin: 3px 0 0;
}

/* CTAボタン：横並び */
.hayack-header__cta {
	display: flex;
	flex-direction: row;   /* ← 横並びに変更 */
	align-items: center;
	gap: 10px;
}
.hayack-header__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 180px;          /* ボタン横幅 */
	height: 56px;          /* ボタン縦幅 */
	padding: 0 12px;
	border-radius: 7px;    /* 角丸 6〜8px */
	font-size: 0.8125rem;
	font-weight: 900;
	text-decoration: none;
	white-space: nowrap;
	text-align: center;
	border: 2px solid transparent;
	line-height: 1.3;
	transition: opacity .2s, transform .18s;
}
.hayack-header__btn:hover { opacity: .88; transform: translateY(-1px); }
.hayack-header__btn--green {
	background: var(--hayack-green);
	color: var(--hayack-white) !important;
	border-color: var(--hayack-green);
}
.hayack-header__btn--red {
	background: var(--hayack-cta-red);
	color: var(--hayack-white) !important;
	border-color: var(--hayack-cta-red);
}

/* SP専用: 電話アイコン + ハンバーガー */
.hayack-header__sp {
	display: none;
	align-items: center;
	gap: 8px;
}
.hayack-header__sp-tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 50px;
	height: 50px;
	background: var(--hayack-white);
	color: var(--hayack-green-dark);
	border: 2px solid var(--hayack-green);
	border-radius: 6px;
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 1;
}
.hayack-header__sp-tel-lbl {
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: .05em;
}
/* 問合せボタン：電話ボタンと同じ見た目（白背景・緑枠）で揃え、色味・トンマナを統一する */
.hayack-header__sp-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 50px;
	height: 50px;
	background: var(--hayack-white);
	color: var(--hayack-green-dark);
	border: 2px solid var(--hayack-green);
	border-radius: 6px;
	text-decoration: none;
	font-size: 1.5rem;
	line-height: 1;
}
.hayack-header__sp-contact-lbl {
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: .05em;
}
.hayack-hamburger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 50px;
	height: 50px;
	background: var(--hayack-green-dark);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	padding: 8px 6px 4px;
	flex-shrink: 0;
}
.hayack-hamburger__lines {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
}
.hayack-hamburger__lines span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--hayack-white);
	border-radius: 2px;
	transition: all .3s;
}
.hayack-hamburger__label {
	font-size: 0.5rem;
	font-weight: 700;
	color: var(--hayack-white);
	letter-spacing: .05em;
	line-height: 1;
}
.hayack-hamburger.is-active .hayack-hamburger__lines span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hayack-hamburger.is-active .hayack-hamburger__lines span:nth-child(2) { opacity: 0; }
.hayack-hamburger.is-active .hayack-hamburger__lines span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   2. グローバルナビ（.hayack-nav）
   ================================================================ */
.hayack-nav { background: var(--hayack-green-dark); }
.hayack-nav__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 8px;
}
.hayack-nav__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hayack-nav__list > li {
	flex: 1;
	border-left: 1px solid rgba(255,255,255,.2);
	border-right: 1px solid rgba(0,0,0,.1);
}
.hayack-nav__list > li:first-child { border-left: none; }
.hayack-nav__list > li:last-child  { border-right: none; }
.hayack-nav__list a {
	display: flex;
	flex-direction: column;    /* 日本語 + 英語 縦並び */
	align-items: center;
	justify-content: center;
	height: 76px;              /* ナビ高さ 72〜84px */
	padding: 0 6px;
	color: var(--hayack-white);
	text-decoration: none;
	text-align: center;
	transition: background .2s;
}
.hayack-nav__list a:hover,
.hayack-nav__current a { background: var(--hayack-green-medium); color: var(--hayack-white); }

/* 日本語テキスト */
.hayack-nav__jp {
	display: block;
	font-size: 1rem;           /* 18〜20px 相当（rem: 16px基準） */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
/* 英語テキスト */
.hayack-nav__en {
	display: block;
	font-size: 0.75rem;        /* 12px */
	font-weight: 400;
	letter-spacing: 0.08em;
	opacity: 0.8;
	margin-top: 3px;
	white-space: nowrap;
}

/* お問い合わせのみ赤背景 */
.hayack-nav__contact a {
	background: var(--hayack-cta-red);
}
.hayack-nav__contact a:hover { background: var(--hayack-cta-red-dark); }

/* 会社案内ドロップダウン */
.hayack-nav__list > li {
	position: relative;
}
.hayack-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--hayack-white);
	box-shadow: var(--hayack-shadow-md);
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.hayack-nav__list > li:hover .hayack-nav__submenu,
.hayack-nav__list > li:focus-within .hayack-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.hayack-nav__list .hayack-nav__submenu a {
	display: block;
	height: auto;
	padding: 12px 18px;
	color: var(--hayack-text);
	text-align: left;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	background: var(--hayack-white);
}
.hayack-nav__list .hayack-nav__submenu a:hover,
.hayack-nav__list .hayack-nav__submenu a:focus-visible {
	background: var(--hayack-green-light);
	color: var(--hayack-green-dark);
}

/* 施工事例ドロップダウン（工事内容タクソノミー）
   JSが is-submenu-open クラスとaria-expandedを一括管理する（hover/focus-within/クリックの3方式を集約）。
   :hover/:focus-within は本来の会社案内ドロップダウンと同じ基底ルールが反応してしまうため、
   --works 修飾クラスに対してのみ明示的に無効化し、is-submenu-open だけを唯一の表示条件にする
   （クリックでの開閉中にマウスがまだ乗っている、というケースでの表示ズレを防ぐため）。 */
/* 左端は基底ルールのleft:0を継承し「施工事例」ボタン自身の左端に揃える
   （中央寄せtranslateXは廃止。隣の「工事メニュー」「ショールーム」に被っていた不具合の原因だったため） */
.hayack-nav__submenu--works {
	min-width: 240px;
	max-width: 300px;
	width: max-content;
	border-radius: 0 0 12px 12px;
	box-shadow: var(--hayack-shadow);
}
.hayack-nav__list > li:hover .hayack-nav__submenu--works,
.hayack-nav__list > li:focus-within .hayack-nav__submenu--works {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
}
.hayack-nav__list > li.is-submenu-open .hayack-nav__submenu--works {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.hayack-nav__submenu--works li { border-bottom: 1px solid var(--hayack-border); }
.hayack-nav__submenu--works li:last-child { border-bottom: none; }
.hayack-nav__submenu--works a {
	display: flex;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
}
.hayack-nav__submenu--works li.is-current a {
	background: var(--hayack-green-light);
	color: var(--hayack-green-dark);
	font-weight: 700;
}

/* 施工事例：文字リンクと開閉ボタンを横並びにする行ラッパー */
.hayack-nav__item-row {
	display: flex;
	align-items: center;
	height: 76px;
}
.hayack-nav__item-row a { flex: 1; min-width: 0; }
.hayack-nav__submenu-toggle {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	margin-right: 4px;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hayack-white);
}
.hayack-nav__submenu-arrow {
	display: block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .18s ease;
}
.hayack-nav__submenu-toggle[aria-expanded="true"] .hayack-nav__submenu-arrow {
	transform: rotate(180deg);
}

/* ================================================================
   3. モバイルナビ（.hayack-mobile-nav）
   ================================================================ */
.hayack-mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--hayack-white);
	z-index: 9999;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 20px 20px 24px;
}
.hayack-mobile-nav.is-open { display: block; }

.hayack-mobile-nav__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
}
.hayack-mobile-nav__list li { border-bottom: 1px solid var(--hayack-border); }
.hayack-mobile-nav__list li:last-child { border-bottom: none; }
/* 主要項目は白とごく薄いグレーの交互背景で区切りを分かりやすくする（濃くしすぎない） */
.hayack-mobile-nav__list li:nth-child(odd) { background: #ffffff; }
.hayack-mobile-nav__list li:nth-child(even) { background: #f7f8f6; }
.hayack-mobile-nav__list a {
	display: block;
	padding: 14px 12px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hayack-text);
	text-decoration: none;
}
.hayack-mobile-nav__list a:active,
.hayack-mobile-nav__list a:focus-visible {
	background: var(--hayack-green-light);
	color: var(--hayack-green-dark);
}
.hayack-mobile-nav__sub a {
	padding-left: 28px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--hayack-text-mid);
}

/* ホーム行：閉じるボタンをホームと同じ行・通常フロー内に配置する。
   position:absolute/fixedやtop基準の配置は使わず、flexの通常レイアウトで右寄せにする。
   管理バーの有無やPC検証画面/実機の違いによらず、常にリスト内の1行目として安定して表示される。 */
.hayack-mobile-nav__home-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-right: 12px;
}
.hayack-mobile-nav__home-row a {
	flex: 1 1 auto;
}
.hayack-mobile-nav__close {
	position: static;
	width: 44px;
	height: 44px;
	background: var(--hayack-green-dark);
	color: var(--hayack-white);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 1.25rem;
	font-weight: 900;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	flex-shrink: 0;
}
.hayack-mobile-nav__close-lbl { font-size: 0.5rem; font-weight: 700; letter-spacing: .05em; }
.hayack-mobile-nav__tel-block {
	background: var(--hayack-green-dark);
	border-radius: 10px;
	padding: 16px;
	text-align: center;
	margin: 0 auto 12px;
	max-width: 420px;
}
.hayack-mobile-nav__tel-link {
	display: block;
	font-size: 1.875rem;
	font-weight: 900;
	color: var(--hayack-white);
	text-decoration: none;
	line-height: 1;
}
.hayack-mobile-nav__tel-hours {
	font-size: 0.75rem;
	color: rgba(255,255,255,.8);
	margin: 6px 0 0;
}
/* 下部の問い合わせボタン群：画面幅いっぱいに広がらないよう最大幅を設け中央寄せにする */
.hayack-mobile-nav__btns {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 420px;
	margin: 0 auto;
}
.hayack-mobile-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 14px;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 900;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.hayack-mobile-nav__btn--red { background: var(--hayack-cta-red); color: var(--hayack-white) !important; }
.hayack-mobile-nav__btn--green { background: var(--hayack-green-dark); color: var(--hayack-white) !important; }

/* 施工事例サブメニュー：スマホ・タブレット（タップ式アコーディオン。ホバーには依存しない）
   初期状態は閉じており、矢印ボタンのタップのみで開閉する。ハンバーガーメニューを閉じると
   closeWorksMobileSubmenu() によりリセットされる。高さの大きなアニメーションは行わず、
   display切り替えのみの軽い開閉とする。 */
.hayack-mobile-nav__item-row {
	display: flex;
	align-items: stretch;
}
.hayack-mobile-nav__item-row a { flex: 1 1 auto; }
.hayack-mobile-nav__submenu-toggle {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: transparent;
	border: none;
	border-left: 1px solid var(--hayack-border);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hayack-text-mid);
	padding: 0;
}
.hayack-mobile-nav__submenu-arrow {
	display: block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .18s ease;
}
.hayack-mobile-nav__submenu-toggle[aria-expanded="true"] .hayack-mobile-nav__submenu-arrow {
	transform: rotate(180deg);
}
.hayack-mobile-nav__submenu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--hayack-green-light);
}
.hayack-mobile-nav__item--works.is-submenu-open .hayack-mobile-nav__submenu {
	display: block;
}
/* 親リストの縞模様（nth-child odd/even）とセル区切り線が入れ子liにも及ぶため、
   サブメニュー内では明示的に打ち消して薄い緑の背景を優先する */
.hayack-mobile-nav__list .hayack-mobile-nav__submenu li { background: transparent; border-bottom: 1px solid rgba(0,0,0,.06); }
.hayack-mobile-nav__list .hayack-mobile-nav__submenu li:last-child { border-bottom: none; }
.hayack-mobile-nav__submenu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px 10px 36px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--hayack-text-mid);
	text-decoration: none;
	box-sizing: border-box;
}
.hayack-mobile-nav__submenu a:active,
.hayack-mobile-nav__submenu a:focus-visible {
	background: rgba(255,255,255,.6);
	color: var(--hayack-green-dark);
}
.hayack-mobile-nav__submenu li.is-current a {
	background: rgba(255,255,255,.7);
	color: var(--hayack-green-dark);
	font-weight: 700;
}

/* prefers-reduced-motion: 矢印回転・PCサブメニューのopacity/transformトランジションを無効化 */
@media (prefers-reduced-motion: reduce) {
	.hayack-nav__submenu,
	.hayack-nav__submenu-arrow,
	.hayack-mobile-nav__submenu-arrow {
		transition: none;
	}
}

/* ================================================================
   4. FV ─ hayack-fv-image（imgタグ全幅・確実表示）
   ================================================================ */
.hayack-fv-image {
	width: 100%;
	background: #eef8e5;
	padding: 0 0 24px;
}
.hayack-fv-image__wrap {
	width: 100%;
	height: clamp(500px, 38vw, 580px);
	max-width: 1920px;
	margin: 0 auto;
	overflow: hidden;
	background: #eef8e5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hayack-fv-image__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center center;
}
/* CTA ボタン群（画像直下） */
.hayack-fv-image__cta {
	max-width: 1000px;
	margin: 18px auto 0;
	padding: 0 20px;
	display: flex;
	justify-content: center;
	gap: 16px;
}
.hayack-fv-image__btn {
	min-width: 230px;
	min-height: 56px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 16px;
	text-decoration: none;
	border: 2px solid transparent;
	transition: opacity .2s, transform .18s;
	box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.hayack-fv-image__btn:hover { opacity: .88; transform: translateY(-1px); }
.hayack-fv-image__btn--tel,
.hayack-fv-image__btn--green {
	background: var(--hayack-green);
	color: #fff !important;
	border-color: var(--hayack-green);
}
.hayack-fv-image__btn--tel:hover,
.hayack-fv-image__btn--green:hover {
	background: var(--hayack-green-dark);
	border-color: var(--hayack-green-dark);
	color: #fff !important;
}
.hayack-fv-image__btn--red {
	background: #e60012;
	color: #fff !important;
	border-color: #e60012;
}
.hayack-fv-image__btn--red:hover { background: #c0000f; border-color: #c0000f; color: #fff !important; }

/* ================================================================
   5. FV スライダー（.hayack-fv-slider・3枚・左右ぼかし）
   ================================================================ */
.hayack-fv-slider {
	width: 100%;
	background: #eef8e5;
	padding: 0 0 24px;
	overflow: hidden;
}
.hayack-fv-slider__viewport {
	position: relative;
	width: 100%;
	height: clamp(560px, 40vw, 700px);
	margin: 0 auto;
	overflow: hidden;
	background: #eef8e5;
}
.hayack-fv-slider__track {
	position: relative;
	width: 100%;
	height: 100%;
}
.hayack-fv-slider__slide {
	position: absolute;
	top: 0;
	left: 50%;
	width: 82%;
	height: 100%;
	transform: translateX(-50%) scale(.92);
	opacity: 0;
	visibility: hidden;
	filter: blur(6px);
	transition: transform .65s ease, opacity .65s ease, filter .65s ease, visibility .65s ease;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef8e5;
}
.hayack-fv-slider__slide.is-active {
	transform: translateX(-50%) scale(1);
	opacity: 1;
	visibility: visible;
	filter: blur(0);
	z-index: 2;
}
.hayack-fv-slider__slide.is-prev {
	transform: translateX(-112%) scale(.88);
	opacity: .42;
	visibility: visible;
	filter: blur(5px);
	z-index: 1;
}
.hayack-fv-slider__slide.is-next {
	transform: translateX(12%) scale(.88);
	opacity: .42;
	visibility: visible;
	filter: blur(5px);
	z-index: 1;
}
.hayack-fv-slider__img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center center;
	background: #eef8e5;
}
.hayack-fv-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 46px;
	height: 46px;
	transform: translateY(-50%);
	border: none;
	border-radius: 999px;
	background: rgba(0,0,0,.34);
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
}
.hayack-fv-slider__arrow:hover { background: rgba(0,0,0,.55); }
.hayack-fv-slider__arrow--prev { left: 24px; }
.hayack-fv-slider__arrow--next { right: 24px; }
.hayack-fv-slider__dots {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 16px auto 0;
}
.hayack-fv-slider__dot {
	width: 13px;
	height: 13px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: #b8b8b8;
	cursor: pointer;
	transition: background .2s;
}
.hayack-fv-slider__dot.is-active { background: #111; }

/* ================================================================
   7. 信頼バー（.hayack-trustbar）
   ================================================================ */
.hayack-trustbar {
	background: var(--hayack-green-dark);
	padding: 20px 0;
	border-bottom: 3px solid var(--hayack-green);
}
.hayack-trustbar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 10px 4px;
}
.hayack-trustbar__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--hayack-white);
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
	padding: 4px 12px;
}
.hayack-trustbar__icon { font-size: 1.25rem; line-height: 1; }
.hayack-trustbar__sep {
	color: rgba(255, 255, 255, .28);
	font-size: 1.25rem;
	font-weight: 300;
	user-select: none;
}

/* ================================================================
   6. セクション共通（.hayack-section__*）
   ================================================================ */
.hayack-section__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}
.hayack-section__head { text-align: center; margin-bottom: 40px; }
.hayack-section__label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hayack-green-dark);
	margin-bottom: 8px;
}
.hayack-section__title {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: 900;
	color: var(--hayack-text);
	line-height: 1.3;
	margin: 0 0 12px !important;
}
.hayack-section__lead {
	font-size: 0.95rem;
	color: var(--hayack-text-mid);
	line-height: 1.8;
	max-width: 600px;
	margin: 0 auto !important;
}

/* ================================================================
   6-1. 新着情報（TOP、trustbar直下・施工事例の直前。現場ブログ「新着情報」カテゴリーのみ表示）
   ================================================================ */
.hayack-demo__news {
	background: linear-gradient(180deg, var(--hayack-white) 0%, var(--hayack-green-light) 100%);
	padding: 64px 0;
}
.hayack-demo__news .hayack-section__label { color: var(--clr-accent, #E8601A); }
.hayack-demo__news .hayack-section__title { color: var(--clr-primary-dark, #0D3360); }
.hayack-demo__news-list {
	max-width: 1000px;
	margin: 0 auto;
	background: var(--hayack-white);
	border: 1px solid var(--hayack-green-light);
	border-radius: var(--hayack-radius-lg);
	box-shadow: var(--hayack-shadow);
	overflow: hidden;
}
.hayack-demo__news-item { border-bottom: 1px solid var(--hayack-border); }
.hayack-demo__news-item:last-child { border-bottom: none; }
.hayack-demo__news-link {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 24px;
	padding: 24px 28px;
	text-decoration: none;
	color: inherit;
	transition: background .18s;
}
.hayack-demo__news-link:hover,
.hayack-demo__news-link:focus-visible {
	background: var(--hayack-green-light);
}
.hayack-demo__news-date {
	flex-shrink: 0;
	width: 100px;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--hayack-green-dark);
	letter-spacing: .02em;
}
.hayack-demo__news-item-title {
	flex: 1 1 320px;
	min-width: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hayack-text);
	line-height: 1.6;
	margin: 0;
}
.hayack-demo__news-excerpt {
	flex: 1 1 100%;
	font-size: 0.875rem;
	color: var(--hayack-text-mid);
	line-height: 1.7;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hayack-demo__news-more { text-align: center; margin-top: 32px; }

/* ----------------------------------------------------------------
   新着情報 カテゴリータブ（.hayack-news）
   色・角丸・影・余白はすべて既存トークン（--hayack-*）を使用し、
   独自の max-width は作らず親の .hayack-section__wrap（1200px）に収める。
   赤（--hayack-cta-red）はCV導線専用のためタブには使わない。
   ---------------------------------------------------------------- */
.hayack-section__title .hayack-news__title-text { vertical-align: middle; }
.hayack-news__deco {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	color: var(--hayack-green-dark);
	vertical-align: middle;
}

.hayack-news { max-width: 1000px; margin: 0 auto; }

.hayack-news__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
}
.hayack-news__tab {
	appearance: none;
	border: 1px solid var(--hayack-green);
	border-radius: 999px;
	background: var(--hayack-white);
	color: var(--hayack-green-dark);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	padding: 9px 20px;
	cursor: pointer;
	white-space: nowrap;
	/* 文字数でボタンの大きさが変わらないよう、3タブ共通で幅を固定する（個別クラスでの幅指定はしない）。
	   clamp: 375px幅で96px、576px以上で144px。SPで3タブ＋gapが1画面に収まる上限から逆算した値。
	   flex:none … flexコンテナ内で縮まないようにする
	   overflow/text-overflow … 極端に長いカテゴリー名は折り返さず末尾を省略する。
	   nowrapと併用することで、名前の長さが変わってもボタンの高さは常に一定になる。 */
	flex: none;
	width: clamp(96px, 25vw, 144px);
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background .18s, color .18s, border-color .18s;
}
.hayack-news__tab:hover { background: var(--hayack-green-light); }
.hayack-news__tab.is-active {
	background: var(--hayack-green-dark);
	border-color: var(--hayack-green-dark);
	color: var(--hayack-white);
}
.hayack-news__tab:focus-visible {
	outline: 3px solid var(--hayack-green);
	outline-offset: 2px;
}

.hayack-news__panel {
	animation: hayack-news-fade .18s ease;
}
@keyframes hayack-news-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.hayack-news__panel { animation: none; }
}

.hayack-news__list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--hayack-white);
	border: 1px solid var(--hayack-green-light);
	border-radius: var(--hayack-radius-lg);
	box-shadow: var(--hayack-shadow);
	overflow: hidden;
}
.hayack-news__item + .hayack-news__item { border-top: 1px solid var(--hayack-border); }
.hayack-news__link {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 16px;
	padding: 20px 24px;
	text-decoration: none;
	color: inherit;
	transition: background .18s;
}
.hayack-news__link:hover,
.hayack-news__link:focus-visible { background: var(--hayack-green-light); }
.hayack-news__link:focus-visible { outline: 3px solid var(--hayack-green); outline-offset: -3px; }

.hayack-news__cat {
	display: inline-block;
	background: var(--hayack-green-dark);
	color: var(--hayack-white);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.hayack-news__date {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--hayack-green-dark);
	letter-spacing: .02em;
	white-space: nowrap;
}
.hayack-news__title {
	min-width: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hayack-text);
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hayack-news__arrow {
	display: inline-flex;
	align-items: center;
	color: var(--hayack-green-dark);
	transition: transform .18s;
}
.hayack-news__link:hover .hayack-news__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
	.hayack-news__link:hover .hayack-news__arrow { transform: none; }
}

.hayack-news__more { text-align: center; margin-top: 32px; }

@media (max-width: 767.98px) {
	/* タブはカテゴリーが増えても潰れないよう1行のまま横スクロールさせる。
	   ページ全体には横スクロールを出さない（このコンテナ内で完結させる） */
	.hayack-news__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 8px;
		padding-bottom: 2px;
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.hayack-news__tabs::-webkit-scrollbar { display: none; }
	.hayack-news__tab { flex: 0 0 auto; font-size: 0.875rem; padding: 8px 16px; }

	/* 1行目: カテゴリー＋日付 / 2行目: タイトル＋矢印 */
	.hayack-news__link {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 6px 10px;
		padding: 14px 16px;
		min-height: 44px;
	}
	.hayack-news__cat { grid-column: 1; grid-row: 1; justify-self: start; font-size: 0.6875rem; padding: 3px 10px; }
	.hayack-news__date { grid-column: 2; grid-row: 1; justify-self: end; font-size: 0.75rem; }
	.hayack-news__title {
		grid-column: 1; grid-row: 2;
		font-size: 0.9375rem;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: clip;
	}
	.hayack-news__arrow { grid-column: 2; grid-row: 2; align-self: center; }
	.hayack-news__deco svg { width: 24px; height: 24px; }
	.hayack-news__more { margin-top: 24px; }
}

@media (max-width: 767.98px) {
	.hayack-demo__news { padding: 48px 0; }
	.hayack-demo__news-link {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 4px 12px;
		padding: 14px 20px;
		min-height: 44px;
	}
	.hayack-demo__news-date { flex: none; width: auto; font-size: 0.75rem; white-space: nowrap; }
	.hayack-demo__news-item-title {
		flex: none;
		width: auto;
		font-size: 0.9375rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.hayack-demo__news-excerpt {
		display: none;
	}
}

/* ================================================================
   7. 下部 hayack-demo__ セクション（既存維持）
   ================================================================ */
.hayack-demo__cta-bar { background: #0D3360; padding: 28px 0; }
.hayack-demo__cta-bar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.hayack-demo__cta-bar-tel-group { display: flex; flex-direction: column; gap: 4px; }
.hayack-demo__cta-bar-label { font-size: 0.75rem; color: rgba(255,255,255,.75); font-weight: 600; }
.hayack-demo__cta-bar-tel { font-size: 2.25rem; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: .02em; line-height: 1; }
.hayack-demo__cta-bar-tel:hover { color: #d4f5b2; }
.hayack-demo__cta-bar-hours { font-size: 0.8125rem; color: rgba(255,255,255,.75); }
.hayack-demo__cta-bar-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hayack-demo__cta-bar-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 24px; border-radius: 8px; font-size: 0.9375rem; font-weight: 900;
	text-decoration: none; border: 2px solid transparent; transition: transform .18s;
}
.hayack-demo__cta-bar-btn:hover { transform: translateY(-2px); }
.hayack-demo__cta-bar-btn--red { background: var(--hayack-cta-red); color: #fff !important; border-color: var(--hayack-cta-red); }
.hayack-demo__cta-bar-btn--white { background: #fff; color: #0D3360 !important; border-color: #fff; }

/* 選ばれる理由 */
.hayack-demo__reasons { background: var(--hayack-gray-light); padding: 72px 0; }
.hayack-demo__reasons .hayack-section__label { color: var(--hayack-green-dark); }
.hayack-demo__reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hayack-demo__reason-card {
	background: #fff; border-radius: 16px; padding: 32px 24px;
	box-shadow: var(--hayack-shadow); border-top: 4px solid var(--hayack-green);
	display: flex; flex-direction: column; gap: 12px;
}
.hayack-demo__reason-photo { height: 160px; border-radius: 8px; overflow: hidden; margin-bottom: 4px; }
.hayack-demo__reason-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hayack-demo__reason-num { font-size: 2.5rem; font-weight: 900; color: #e8e8e8; line-height: 1; }
.hayack-demo__reason-title { font-size: 1.125rem; font-weight: 900; color: var(--hayack-text); margin: 0 !important; }
.hayack-demo__reason-text { font-size: 0.9rem; color: var(--hayack-text-mid); line-height: 1.8; margin: 0 !important; }

/* スタッフ紹介（TOPのみ。/staff/ 一覧・staff個別ページのCSSには影響しないよう hayack-demo__staff- でスコープ） */
.hayack-demo__staff {
	--hayack-staff-orange: #f2994a;
	--hayack-staff-orange-light: #fdf1e4;
	background: var(--hayack-white);
	padding: 72px 0;
}
.hayack-demo__staff .hayack-section__label { color: var(--hayack-green-dark); }

.hayack-demo__staff-slider { position: relative; }
.hayack-demo__staff-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 4px;
	padding: 4px 4px 16px;
	margin: 0 -4px;
	-webkit-overflow-scrolling: touch;
}
.hayack-demo__staff-track::-webkit-scrollbar { height: 6px; }
.hayack-demo__staff-track::-webkit-scrollbar-thumb { background: var(--hayack-border); border-radius: 999px; }

.hayack-demo__staff-card {
	flex: 0 0 auto;
	width: 240px;
	scroll-snap-align: start;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--hayack-shadow);
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform .18s, box-shadow .18s;
}
.hayack-demo__staff-card:hover { transform: translateY(-4px); box-shadow: var(--hayack-shadow-md); color: inherit; }

.hayack-demo__staff-photo {
	aspect-ratio: 3 / 4;
	background: var(--hayack-green-light);
	overflow: hidden;
}
.hayack-demo__staff-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.hayack-demo__staff-noimg {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: #bbb;
	background: var(--hayack-gray-light);
}

.hayack-demo__staff-body {
	padding: 16px 14px 20px;
	text-align: center;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.hayack-demo__staff-name { font-size: 1.0625rem; font-weight: 900; color: var(--hayack-text); margin: 0 !important; }
.hayack-demo__staff-deptrole {
	display: inline-flex;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--hayack-staff-orange-light);
	color: var(--hayack-staff-orange);
	margin: 0 !important;
}
.hayack-demo__staff-word { font-size: 0.8125rem; color: var(--hayack-text-mid); line-height: 1.6; margin: 0 !important; }
.hayack-demo__staff-empty { text-align: center; color: var(--hayack-text-mid); }

.hayack-demo__staff-arrow {
	position: absolute;
	top: 40%;
	z-index: 5;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: none;
	border-radius: 999px;
	background: var(--hayack-green-dark);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--hayack-shadow);
	transition: background .2s, opacity .2s;
}
.hayack-demo__staff-arrow:hover { background: var(--hayack-green); }
.hayack-demo__staff-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }
.hayack-demo__staff-arrow--prev { left: -18px; }
.hayack-demo__staff-arrow--next { right: -18px; }

.hayack-demo__staff-more { text-align: center; margin-top: 8px; }

@media (max-width: 1024px) {
	.hayack-demo__staff-arrow { display: none; }
}
@media (max-width: 767.98px) {
	/* 前後の施工事例・ショールームセクションと釣り合う大きさへ縮小。
	   aspect-ratio(3/4)・object-position(center top)は既存のまま維持し、顔が切れるリスクを避ける */
	.hayack-demo__staff-card { width: clamp(145px, 40vw, 165px); max-width: 165px; }
	.hayack-demo__staff-track { gap: 12px; }
	.hayack-demo__staff-body { padding: 12px 10px 14px; gap: 4px; }
}

/* 工事メニュー */
.hayack-demo__menu { background: var(--hayack-green-light); padding: 72px 0; }
.hayack-demo__menu .hayack-section__label { color: var(--hayack-green-dark); }
.hayack-demo__menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hayack-demo__menu-card {
	background: #fff; border-radius: 12px; overflow: hidden;
	box-shadow: var(--hayack-shadow); border-top: 3px solid #e5e7eb;
	display: flex; flex-direction: column; transition: transform .2s;
}
.hayack-demo__menu-card:hover { transform: translateY(-3px); }
.hayack-demo__menu-card--main { border-top-color: var(--hayack-green); }
.hayack-demo__menu-card-img { height: 130px; overflow: hidden; background: var(--hayack-green-light); }
.hayack-demo__menu-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hayack-demo__menu-card-body { padding: 16px 14px 20px; text-align: center; flex: 1; display: flex; flex-direction: column; align-items: center; }
.hayack-demo__menu-card-title { font-size: 0.9375rem; font-weight: 900; color: var(--hayack-text); margin: 0 0 10px !important; }
.hayack-demo__menu-card-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin: auto 0 0; }
.hayack-demo__menu-price-num { font-size: 1.875rem; font-weight: 900; color: var(--hayack-green-dark); line-height: 1; }
.hayack-demo__menu-price-unit { font-size: 0.8125rem; font-weight: 700; color: var(--hayack-green-dark); }
.hayack-demo__menu-price-consult { font-size: 0.9375rem; font-weight: 700; color: #667788; line-height: 1.5; }
.hayack-demo__menu-card-note { font-size: 0.75rem; color: #889; margin: 6px 0 0 !important; }

/* 施工事例
   背景: 職人の施工事例写真 + ダークグリーン半透明オーバーレイ
   （疑似要素 ::before でオーバーレイを重ね、文字・カードは z-index で前面に）
   背景画像URLは home.php からインラインstyleで --hyk-works-bg に渡している（メディアライブラリの
   painter_jirei_photo を使用）。カスタムプロパティが未設定の場合のみ、フォールバックとして
   テーマ内画像を表示する */
.hayack-demo__works {
	position: relative;
	background: #1a2a10 var(--hyk-works-bg, url('../images/works-wall-roller.jpg')) center center / cover no-repeat;
	padding: 72px 0;
	overflow: hidden;
}
.hayack-demo__works::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(15,35,8,.7), rgba(10,25,5,.74));
	z-index: 0;
}
.hayack-demo__works > .hayack-section__wrap {
	position: relative;
	z-index: 1;
}
.hayack-demo__works .hayack-section__title { color: #fff; }
.hayack-demo__works .hayack-section__lead { color: rgba(255,255,255,.85); }
.hayack-demo__works .hayack-section__label { color: var(--hayack-green); }
.hayack-demo__works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* タブレット幅（768〜1023px）: 3カードだと窮屈なため2列に切り替える。768px/1024pxは既存のサイト共通ブレークポイントに合わせている */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hayack-demo__works-grid { grid-template-columns: repeat(2, 1fr); }
}
.hayack-demo__works-empty { grid-column: 1 / -1; text-align: center; color: rgba(255,255,255,.85); }
.hayack-demo__work-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.2); display: block; text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.hayack-demo__work-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.28); color: inherit; }
.hayack-demo__work-card-media { padding: 14px; background: #f5f5f5; }
.hayack-demo__work-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.hayack-demo__work-photo { aspect-ratio: 4/3; background: #ddd; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.hayack-demo__work-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hayack-demo__work-photo-badge { position: absolute; top: 6px; left: 6px; font-size: 0.6875rem; font-weight: 900; padding: 3px 8px; border-radius: 4px; }
.hayack-demo__work-photo-badge--b { background: #444; color: #fff; }
.hayack-demo__work-photo-badge--a { background: var(--hayack-green-dark); color: #fff; }
.hayack-demo__work-arrow { font-size: 1.125rem; color: #bbb; text-align: center; }
.hayack-demo__work-card-body { padding: 16px 18px 20px; }
.hayack-demo__work-title {
	font-size: 1.0625rem;
	font-weight: 900;
	color: #111;
	margin: 0 0 8px !important;
	line-height: 1.4;
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.hayack-demo__work-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.hayack-demo__work-tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--hayack-green-light); color: var(--hayack-green-dark); }
.hayack-demo__work-price { display: inline-block; background: var(--hayack-green); color: #fff; font-size: 0.875rem; font-weight: 900; padding: 3px 12px; border-radius: 6px; margin-bottom: 4px; }
.hayack-demo__work-period { font-size: 0.8125rem; color: #667788; margin: 0 !important; }
.hayack-demo__works-chips {
	list-style: none;
	margin: 18px 0 0 !important;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.hayack-demo__works-chip {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--hayack-green-light, #cfe0cf);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--hayack-green-dark);
	text-decoration: none;
	white-space: nowrap;
}
.hayack-demo__works-chip:hover {
	background: var(--hayack-green-dark);
	border-color: var(--hayack-green-dark);
	color: #fff !important;
}
.hayack-demo__works-more { text-align: center; margin-top: 36px; }
.hayack-demo__works-more-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 40px; background: var(--hayack-green); color: #fff !important;
	font-size: 1.0625rem; font-weight: 900; border-radius: 8px; text-decoration: none;
	box-shadow: 0 4px 16px rgba(0,0,0,.18); transition: transform .2s, background .2s;
}
.hayack-demo__works-more-btn:hover { transform: translateY(-2px); background: var(--hayack-green-dark); }

/* ショールーム
   背景: 本社ショールーム外観の実写真 + ダークグリーン半透明オーバーレイ
   （施工事例セクションと統一感を持たせつつ、指示によりやや明るめの濃度にしている）
   背景画像URLは home.php からインラインstyleで --hyk-showroom-bg に渡している
   （メディアライブラリの hayack-showroom-main-20260620.jpg を使用） */
.hayack-demo__showroom {
	position: relative;
	background: #16311c var(--hyk-showroom-bg, url('../images/hayack-showroom-main-20260620.jpg')) center center / cover no-repeat;
	padding: 72px 0;
	overflow: hidden;
}
.hayack-demo__showroom::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(15,45,20,.72), rgba(10,30,15,.8));
	z-index: 0;
}
.hayack-demo__showroom > .hayack-section__wrap { position: relative; z-index: 1; }
.hayack-demo__showroom .hayack-section__title { color: #fff; }
.hayack-demo__showroom .hayack-section__lead { color: rgba(255,255,255,.85); }
.hayack-demo__showroom .hayack-section__label { color: var(--hayack-green); }

.hayack-demo__showroom-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; align-items: stretch; }
.hayack-demo__showroom-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.2); display: flex; flex-direction: column; height: 100%; }
.hayack-demo__showroom-card-media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; flex-shrink: 0; background: var(--hayack-green-light); }
.hayack-demo__showroom-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hayack-demo__showroom-card-body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hayack-demo__showroom-card-name { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 900; color: #111; line-height: 1.45; min-height: 2.9em; margin: 0 !important; }
.hayack-demo__showroom-card-num {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--hayack-green-dark); color: #fff; font-size: 0.8125rem; font-weight: 900; line-height: 1;
}
.hayack-demo__showroom-card-desc {
	font-size: 0.9375rem; color: #444; line-height: 1.7; margin: 0 !important;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
	min-height: 3.4em; overflow: hidden;
}
.hayack-demo__showroom-card-addr { font-size: 0.9375rem; color: #333; line-height: 1.6; margin: 0 !important; }
.hayack-demo__showroom-card-hours { display: flex; align-items: baseline; gap: 10px; font-size: 0.9375rem; color: #333; }
.hayack-demo__showroom-card-hours-lbl { font-weight: 700; color: var(--hayack-green-dark); font-size: 0.8125rem; background: var(--hayack-green-light); padding: 1px 8px; border-radius: 4px; flex-shrink: 0; }
.hayack-demo__showroom-card-badge { display: inline-block; align-self: flex-start; font-size: 0.75rem; font-weight: 700; color: #b34700; background: #fff4ea; padding: 3px 10px; border-radius: 999px; }
.hayack-demo__showroom-card-tel { font-size: 1.125rem; font-weight: 900; color: var(--hayack-green-dark); text-decoration: none; }
.hayack-demo__showroom-card-tel:hover { color: var(--hayack-green-medium); }
.hayack-demo__showroom-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.hayack-demo__showroom-card-btn {
	flex: 1; min-width: 130px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 16px; border-radius: 8px; font-size: 0.9375rem; font-weight: 900;
	text-decoration: none; border: 2px solid transparent; transition: opacity .2s, transform .18s, background .2s;
}
.hayack-demo__showroom-card-btn:hover { transform: translateY(-1px); }
.hayack-demo__showroom-card-btn--detail { background: var(--hayack-green-dark); color: #fff; }
.hayack-demo__showroom-card-btn--detail:hover { background: var(--hayack-green-medium); color: #fff; }
.hayack-demo__showroom-card-btn--map { background: #fff; color: var(--hayack-green-dark); border-color: var(--hayack-green-dark); }
.hayack-demo__showroom-card-btn--map:hover { background: var(--hayack-green-light); color: var(--hayack-green-dark); }

.hayack-demo__showroom-more { text-align: center; margin-top: 36px; }
.hayack-demo__showroom-more-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 40px; background: var(--hayack-green); color: #fff;
	font-size: 1.0625rem; font-weight: 900; border-radius: 8px; text-decoration: none;
	box-shadow: 0 4px 16px rgba(0,0,0,.18); transition: transform .2s, background .2s;
}
.hayack-demo__showroom-more-btn:hover { transform: translateY(-2px); background: var(--hayack-green-dark); color: #fff; }

/* FAQ */
.hayack-demo__faq { background: var(--hayack-gray-light); padding: 72px 0; }
.hayack-demo__faq .hayack-section__label { color: var(--hayack-green-dark); }
.hayack-demo__faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.hayack-demo__faq-item { background: #fff; border: 1px solid var(--hayack-border); border-radius: 8px; overflow: hidden; }
.hayack-demo__faq-q {
	width: 100%; display: flex; align-items: center; gap: 16px;
	padding: 18px 20px; background: none; border: none; cursor: pointer;
	text-align: left; font-size: 0.9375rem; font-weight: 700; color: #222; font-family: inherit;
}
.hayack-demo__faq-q:hover { background: var(--hayack-green-light); }
.hayack-demo__faq-q-badge { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--hayack-green-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 900; }
.hayack-demo__faq-q-text { flex: 1; }
.hayack-demo__faq-q-icon { flex-shrink: 0; font-size: 1.5rem; color: var(--hayack-green-dark); transition: transform .2s; line-height: 1; }
.hayack-demo__faq-item.is-open .hayack-demo__faq-q-icon { transform: rotate(45deg); }
/* 回答欄: Qと同じ32px丸バッジ＋16pxギャップの構成をflexで再現。
   上下paddingは閉状態(display:none)では描画されないため base 側は左右のみ指定し、
   縦paddingは実際に表示される is-open 側へ均等値(PC 20px / SP 18px)としてまとめる。
   align-items:center を親(is-open)側に置くことで、バッジ・本文とも回答行の中で
   縦中央に揃い、Aだけをtranslate/margin-topで動かす対応より根本的にバランスが揃う。
   左右インデント(20px)は変更前と同一 */
.hayack-demo__faq-a { display: none; gap: 16px; padding: 0 20px; }
.hayack-demo__faq-a-badge { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--hayack-green-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 900; }
.hayack-demo__faq-a p { flex: 1; min-width: 0; text-align: left; font-size: 0.9rem; color: var(--hayack-text-mid); line-height: 1.85; margin: 0; }
.hayack-demo__faq-item.is-open .hayack-demo__faq-a { display: flex; align-items: center; padding-block: 20px; }
@media (max-width: 767.98px) {
	.hayack-demo__faq-item.is-open .hayack-demo__faq-a { padding-block: 18px; }
}

/* 最下部CTA（cotuctbanner_pc / cotuctbanner_mobile 背景バナー版：左＝画像内の人物・キャラクター／右＝テキスト＋CTA） */
.hayack-demo__bottom-cta--banner { padding: 0; background: none; }
.hayack-demo__bottom-cta-bg {
	background-image: var(--bg-pc);
	background-size: cover;
	background-position: left center;
	background-repeat: no-repeat;
	min-height: 420px;
	display: flex;
	align-items: center;
}
.hayack-demo__bottom-cta-overlay {
	width: 100%;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 42%, rgba(255,255,255,.94) 62%, rgba(255,255,255,.94) 100%);
}
.hayack-demo__bottom-cta--banner .hayack-section__label { color: var(--hayack-green-dark); }
.hayack-demo__bottom-cta-content { max-width: 680px; margin-left: auto; padding: 40px 0; }
.hayack-demo__bottom-cta-title { font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 900; color: var(--hayack-green-dark); line-height: 1.45; margin: 8px 0 14px !important; }
.hayack-demo__bottom-cta-lead { font-size: 0.9375rem; color: #3a4a3a; line-height: 1.85; margin: 0 0 18px !important; }
.hayack-demo__bottom-cta-points { list-style: none; margin: 0 0 22px !important; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hayack-demo__bottom-cta-points li {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,.92); color: var(--hayack-green-dark);
	font-size: 0.8125rem; font-weight: 700;
	padding: 8px 16px; border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.hayack-demo__bottom-cta-points li::before { content: "\2713"; font-weight: 900; }
.hayack-demo__bottom-cta-tel {
	display: flex; align-items: center; gap: 14px;
	background: rgba(255,255,255,.97); border-radius: 12px; padding: 14px 24px;
	text-decoration: none; max-width: 440px; width: 100%;
	box-shadow: 0 4px 18px rgba(0,0,0,.15); transition: transform .2s;
	margin-bottom: 16px;
}
.hayack-demo__bottom-cta-tel:hover { transform: translateY(-2px); color: inherit; }
.hayack-demo__bottom-cta-tel-icon { font-size: 2rem; color: var(--hayack-green-dark); line-height: 1; }
.hayack-demo__bottom-cta-tel-body { display: flex; flex-direction: column; gap: 2px; }
.hayack-demo__bottom-cta-tel-lbl { font-size: 0.6875rem; color: #555; }
.hayack-demo__bottom-cta-tel-num { font-size: 1.625rem; font-weight: 900; color: var(--hayack-green-dark); letter-spacing: .02em; line-height: 1; }
.hayack-demo__bottom-cta-tel-hours { font-size: 0.6875rem; color: #888; }
.hayack-demo__bottom-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; max-width: 440px; }
.hayack-demo__bottom-cta-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 24px; border-radius: 8px; font-size: 1rem; font-weight: 900;
	text-decoration: none; border: 2px solid transparent; transition: transform .18s; min-width: 180px;
}
.hayack-demo__bottom-cta-btn:hover { transform: translateY(-2px); }
.hayack-demo__bottom-cta-btn--red { background: var(--hayack-cta-red); color: #fff !important; border-color: var(--hayack-cta-red); }
.hayack-demo__bottom-cta-btn--outline { background: rgba(255,255,255,.95); color: var(--hayack-green-dark) !important; border-color: var(--hayack-green-dark); }

/* フローティングバーをグリーンに上書き */
.floating-contact-bar .fcb-btn--visit,
.floating-contact-bar .fcb-btn--estimate {
	background: var(--hayack-green-dark) !important;
}

/* ================================================================
   レスポンシブ
   ================================================================ */
/* PC (768px+): ヘッダー右側の表示切り替え以外（FVボタン・下部CTA幅）は従来どおり768pxで適用 */
@media (min-width: 768px) {
	.hayack-fv__buttons { flex-direction: row; gap: 14px; }
	.hayack-fv__btn { min-width: auto; }
	.hayack-demo__bottom-cta-tel { width: auto; }
}

/* タブレット (768〜1023px): 電話番号・CTAボタン・ロゴが固定幅のため、
   幅が足りずヘッダー右側（.hayack-header__btn--red 等）が画面外にはみ出す。
   この幅ではSP互換のコンパクトヘッダー（電話アイコン＋ハンバーガー）に切り替えて防止する。
   PC用ブロック（min-width:1024px）とはmax-width:1023.98pxで範囲が重ならないため、
   !important なしの通常詳細度のみで確実に上書きできる。
   ※ 1023.98px … devicePixelRatioにより実効ビューポート幅が1023px超1023.98px未満に
   丸められる環境で本ブロックが適用されずPCヘッダーが露出する事例が確認されたための対策 */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.hayack-header__right { display: none; }
	.hayack-header__sp { display: flex; }
	.hayack-nav { display: none; }
	.hayack-header__inner { height: 64px; padding: 0 16px; gap: 8px; }
	.hayack-header__logo-img { width: 140px; height: auto; max-height: 40px; }
	.hayack-header__tagline { display: none; }
	/* 今回追加の問合せボタンはスマホ専用のため、タブレット帯（既存の電話+ハンバーガー構成）には表示しない */
	.hayack-header__sp-contact { display: none; }
}

/* PC (1024px+): ヘッダー右側の表示切り替え。タブレット帯（768〜1023px）と重複させないことで
   !important に頼らず解決するため、この専用ブロックに分離している */
@media (min-width: 1024px) {
	.hayack-header__right { display: flex; }
	.hayack-header__sp { display: none; }
	.hayack-nav { display: block; }
}

/* PC (1024px+) グローバルナビ: 文字の読みやすさ・存在感を強化。
   1024pxで修正前(日本語16px/英語12px)を下回らないことを最優先し、1280px/1440px以上で段階的に大きくする。
   （calc(12px + 0.35vw) は 1024px=16px(下限) / 1280px≈16.5px / 1440px以上≈17px になるよう逆算した係数。
     英語 calc(8px + 0.25vw) は 1024px=11px(下限) / 1440px以上≈12px 付近になるよう逆算した係数） */
@media (min-width: 1024px) {
	.hayack-nav__jp {
		font-size: clamp(16px, calc(12px + 0.35vw), 17px);
		line-height: 1.25;
	}
	.hayack-nav__en {
		font-size: clamp(11px, calc(8px + 0.25vw), 12px);
		font-weight: 600;
		line-height: 1.2;
	}
	.hayack-nav__list a {
		padding-inline: clamp(6px, 0.9vw, 16px);
	}
}

/* 中間（〜1200px） */
@media (max-width: 1200px) {
	.hayack-fv-image__wrap { height: 460px; }
	.hayack-fv-slider__viewport { height: 520px; }
}

/* SP (〜767px)
   ※ max-width:767.98px … devicePixelRatioにより実効ビューポート幅が767px超767.98px未満に
   丸められる環境で本ブロックが適用されずPCヘッダーが露出する事例が確認されたための対策。
   タブレット/PCブロックとは範囲が重ならないため !important は不要 */
@media (max-width: 767.98px) {
	.hayack-header__right { display: none; }
	.hayack-header__sp { display: flex; }
	.hayack-header__inner { height: 64px; padding: 0 16px; gap: 6px; }
	/* ロゴの視覚的な縦位置だけをわずかに下げる。既存に.hayack-header__logoへのtransform指定は
	   無いため単純追加で問題ない。marginではなくtransformにすることで、他要素のレイアウトは押し下げない */
	.hayack-header__logo {
		transform: translateY(3px);
	}
	/* ロゴ本体は透明余白がほぼ無い実画像のため、幅指定がそのまま見た目サイズになる。
	   問合せボタン追加後のSP操作エリア（固定表示・ボタン44px角）と重ならないよう、
	   calc(100vw - 178px)を上限として組み合わせる（100vwはスクロールバー分を
	   差し引かないため、実際の利用可能幅より広めに出ることを見込んで余裕を持たせている）。
	   結果として320pxは約142px（ボタン44px角優先のため現状よりごくわずかに小さいが、
	   3ボタンを重ねずタップ領域44px角以上を確保するための調整）、
	   375px以上は引き続き最大195pxまで拡大する。 */
	.hayack-header__logo-img {
		width: clamp(142px, calc(100vw - 178px), 195px);
		height: auto;
		max-height: 50px;
	}
	.hayack-header__tagline { display: none; }
	.hayack-nav { display: none; }
	/* SP専用操作エリア（問合せ・電話・メニュー）: スクロールしても常に操作できるよう固定表示。
	   ヘッダー自体は「A. 上部ヘッダー固定解除」により position:static のため、このエリアだけを
	   ヘッダーと同じ見た目位置（右上・高さ64px）でposition:fixedにする。
	   z-indexは下部フローティングバー(9000)・モバイルナビ(9999)より低く設定し、干渉しない。 */
	.hayack-header__sp {
		position: fixed;
		top: 0;
		right: 0;
		height: 64px;
		padding-right: 8px;
		gap: 2px;
		z-index: 950;
	}
	/* ログイン中の管理者に表示されるWP管理ツールバー(#wpadminbar)もtop:0のposition:fixedで
	   z-indexがより高いため、そのままでは操作エリアが隠れてしまう。WordPress標準の
	   body.admin-barクラス（782px以下でツールバー高46px）に合わせてtop位置をずらす。
	   一般訪問者（ログアウト時）には.admin-barが付与されないため影響しない。 */
	body.admin-bar .hayack-header__sp {
		top: 46px;
	}
	/* 問合せボタン追加後も3つ全てでタップ領域44px角以上を確保する（gap・余白側で調整済み） */
	.hayack-header__sp-tel,
	.hayack-header__sp-contact,
	.hayack-hamburger {
		width: 44px;
		height: 44px;
	}
	.hayack-header__sp-tel,
	.hayack-header__sp-contact {
		font-size: 1.25rem;
	}
	.hayack-header__sp-tel-lbl,
	.hayack-header__sp-contact-lbl {
		font-size: 0.4375rem;
	}
	/* FV スライダー */
	.hayack-fv-slider { padding-bottom: 18px; }
	.hayack-fv-slider__viewport { height: 320px; max-width: none; }
	.hayack-fv-slider__slide { width: 100%; }
	.hayack-fv-slider__slide.is-prev,
	.hayack-fv-slider__slide.is-next { opacity: 0; visibility: hidden; }
	.hayack-fv-slider__img { width: 100%; height: 100%; object-fit: contain; }
	.hayack-fv-slider__arrow { width: 36px; height: 36px; font-size: 28px; }
	.hayack-fv-slider__arrow--prev { left: 10px; }
	.hayack-fv-slider__arrow--next { right: 10px; }
	/* FV（旧静的クラス） */
	.hayack-fv-image { padding-bottom: 18px; }
	.hayack-fv-image__wrap { height: 300px; max-width: none; }
	.hayack-fv-image__img { width: 100%; height: 100%; object-fit: contain; object-position: center center; }
	.hayack-fv-image__cta { flex-direction: column; gap: 10px; }
	.hayack-fv-image__btn { width: 100%; min-width: 0; }
	.pc-only { display: none; }
	.hayack-trustbar__item { font-size: 0.8125rem; }
	.hayack-trustbar__sep { display: none; }
	.hayack-demo__reasons-grid { grid-template-columns: 1fr; gap: 16px; }
	.hayack-demo__menu-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	/* 施工事例: PC/タブレットは6件のまま取得するが、SPのみ2列×2行(4件)に絞る。
	   5件目以降はDOMには残したままCSSで非表示にする（取得ロジック・PC/タブレット表示は変更しない） */
	.hayack-demo__works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.hayack-demo__work-card:nth-child(n + 5) { display: none; }
	.hayack-demo__work-card-media { padding: 8px; }
	.hayack-demo__work-ba { gap: 6px; }
	.hayack-demo__work-arrow { font-size: 0.75rem; }
	.hayack-demo__work-photo-badge { font-size: 0.5rem; padding: 1px 4px; top: 3px; left: 3px; letter-spacing: -0.02em; }
	.hayack-demo__work-card-body { padding: 12px; }
	.hayack-demo__work-title { font-size: 0.9375rem; line-height: 1.5; min-height: 4.5em; -webkit-line-clamp: 3; }
	.hayack-demo__work-meta { gap: 4px; margin-bottom: 6px; }
	.hayack-demo__work-tag { font-size: 0.75rem; padding: 2px 8px; }
	.hayack-demo__work-price { font-size: 0.8125rem; padding: 2px 10px; }
	.hayack-demo__showroom-grid { grid-template-columns: 1fr; gap: 24px; }
	.hayack-demo__bottom-cta-btns { flex-direction: column; align-items: stretch; max-width: none; }
	.hayack-demo__bottom-cta-btn { width: 100%; }
	/* SP: 背景バナーは上部ビジュアルとして低めに表示し、下方向へ白グラデーションでテキストへ自然に繋げる */
	.hayack-demo__bottom-cta-bg {
		background-image: var(--bg-mobile);
		background-position: center top;
		min-height: 0;
		display: block;
		padding-top: 260px;
	}
	.hayack-demo__bottom-cta-overlay {
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,.96) 45%, rgba(255,255,255,1) 100%);
	}
	.hayack-demo__bottom-cta-content { max-width: none; margin-left: 0; padding: 20px 0 32px; }
	.hayack-demo__bottom-cta--banner .hayack-section__label,
	.hayack-demo__bottom-cta-title,
	.hayack-demo__bottom-cta-lead {
		text-shadow: 0 1px 4px rgba(255,255,255,.9), 0 0 14px rgba(255,255,255,.75);
	}
}

/* =====================================================
   FV Slider Final Override - prevent image cropping
   ===================================================== */

.hayack-fv-slider {
  width: 100%;
  background: #eef8e5;
  padding: 0 0 24px;
  overflow: hidden;
}

/* viewportの高さを、実際に描画される画像の高さから逆算して決める。
   PC用スライド画像は全5枚とも 1920x850（実測・アスペクト2.259）で統一されており、
   スライドは viewport の 82%幅、画像は object-fit:contain / object-position:center top。
   したがって描画される画像の高さは 82vw * 850 / 1920 ≒ 36.3vw。
   従来の下限 560px はこの値を widths 1201〜1550px あたりで 70〜130px 上回っており、
   画像下端の下に薄緑(#eef8e5)の帯が残ってドットまで間延びしていた（1280pxで実測100.8px）。
   ここへ 32px だけ足した値を高さにすることで、画像下端〜ドット（margin-top:8px）を
   常に45px前後に保つ。画像自体のサイズ・トリミングは変わらない。

   適用範囲: このルールが実際に効くのは 1201px 以上のみ。
     768〜1200px … 後段の @media (max-width: 1200px) が同じ式で上書き（結果は連続）
     〜767px（SP）… 後段の @media (max-width: 767px) が height:auto + aspect-ratio で上書き
   したがってSPの表示は一切変わらない（新規ブレークポイントも追加しない）。

   上限 980px は 2560px 幅での計算値 961.3px を上回るように決めた値。
   実測で 375〜2560px の全域が「左右余白0／画像下端〜ドット45px前後」を満たす。
   約2612pxで上限に到達し、約2715px以上では画像の左右に余白が出るが、
   これは超ワイド環境の既知制約として許容する（横スクロール・crop は発生しない）。 */
.hayack-fv-slider__viewport {
  position: relative;
  width: 100%;
  height: clamp(460px, calc(82vw * 850 / 1920 + 32px), 980px);
  margin: 0 auto;
  overflow: hidden;
  background: #eef8e5;
}

.hayack-fv-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hayack-fv-slider__slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 82%;
  height: 100%;
  transform: translateX(-50%) scale(.92);
  opacity: 0;
  visibility: hidden;
  filter: blur(6px);
  transition:
    transform .65s ease,
    opacity .65s ease,
    filter .65s ease,
    visibility .65s ease;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef8e5;
  overflow: visible;
}

.hayack-fv-slider__slide.is-active {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  z-index: 2;
}

.hayack-fv-slider__slide.is-prev {
  transform: translateX(-112%) scale(.88);
  opacity: .42;
  visibility: visible;
  filter: blur(5px);
  z-index: 1;
}

.hayack-fv-slider__slide.is-next {
  transform: translateX(12%) scale(.88);
  opacity: .42;
  visibility: visible;
  filter: blur(5px);
  z-index: 1;
}

.hayack-fv-slider__img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  background: #eef8e5;
}

/* 矢印は維持 */
.hayack-fv-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, .34);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.hayack-fv-slider__arrow--prev {
  left: 24px;
}

.hayack-fv-slider__arrow--next {
  right: 24px;
}

/* ドットはスライダー下に表示 */
.hayack-fv-slider__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px auto 0;
}

.hayack-fv-slider__dot {
  width: 13px;
  height: 13px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #b8b8b8;
  cursor: pointer;
}

.hayack-fv-slider__dot.is-active {
  background: #111;
}

/* タブレット帯（768〜1200px）も、PC(≥1201px)と同じ考え方で高さを画像から逆算する。
   実DOMで確認済み: この帯でもスライドは clientWidth の 82.0%（1200px=82.03% /
   1024px=81.96% / 900px=82.03% / 768px=81.94%）、画像は object-fit:contain /
   object-position:50% 0%（上端揃え）でPCと同一構造。PC用画像は全5枚 1920x850。
   従来の height:460px は描画高を大きく上回っており、画像下に薄緑の帯が残っていた
   （実測 1024px=93.9px / 768px=186.8px）。式はPC側と完全に同一にしてあるため、
   1200px→1201px の高さ差は 0.4px しかなく、境界でのジャンプは生じない。
   下限のclampは付けない（付けるとPCで起きていた「下限が描画高を上回る」問題が再発するため）。
   〜767px（SP）は後段の @media (max-width: 767px) の height:auto !important +
   aspect-ratio:1145/1374 が優先されるため、この宣言は届かず影響しない。 */
@media (max-width: 1200px) {
  .hayack-fv-slider__viewport {
    height: calc(82vw * 850 / 1920 + 32px);
  }
}

@media (max-width: 767px) {
  .hayack-fv-slider__viewport {
    height: 340px;
  }

  .hayack-fv-slider__slide {
    width: 100%;
  }

  .hayack-fv-slider__slide.is-prev,
  .hayack-fv-slider__slide.is-next {
    opacity: 0;
    visibility: hidden;
  }

  .hayack-fv-slider__img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
  }

  .hayack-fv-slider__arrow {
    width: 36px;
    height: 36px;
    font-size: 28px;
  }

  .hayack-fv-slider__arrow--prev {
    left: 10px;
  }

  .hayack-fv-slider__arrow--next {
    right: 10px;
  }
}

/* =====================================================
   FV Slider Gap Fix - remove space under global nav
   ===================================================== */

.hayack-nav {
  margin-bottom: 0 !important;
}

main#main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hayack-fv-slider {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hayack-fv-slider__viewport {
  margin-top: 0 !important;
}

.hayack-fv-slider__track {
  margin-top: 0 !important;
}

/* ナビ直下のFVだけはセクション共通余白を無効化 */
.hayack-nav + .hayack-fv-slider,
.hayack-nav + main .hayack-fv-slider,
main#main > .hayack-fv-slider:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =====================================================
   FV Slider Top Gap Final Fix
   グローバルナビ直下の薄緑余白を削除
   ===================================================== */

.hayack-nav {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

main#main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

main#main > h1.screen-reader-text {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

main#main > .hayack-fv-slider:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* FVスライダー本体 */
.hayack-fv-slider {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: #eef8e5;
}

/* ここが重要：viewport内で画像を上揃えにする */
.hayack-fv-slider__viewport {
  margin-top: 0 !important;
  padding-top: 0 !important;
  display: block !important;
  background: #eef8e5;
}

/* slide内の中央寄せで上余白が出るため、上揃えに変更 */
.hayack-fv-slider__slide {
  align-items: flex-start !important;
}

/* containのまま、画像の上端をviewport上端に揃える */
.hayack-fv-slider__img {
  object-fit: contain !important;
  object-position: center top !important;
  vertical-align: top !important;
}

/* 画像そのものの上余白を完全に消す */
.hayack-fv-slider__slide img,
.hayack-fv-slider__img {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =====================================================
   FV Slider Spacing Adjustment
   ===================================================== */

.hayack-fv-slider {
  padding-bottom: 18px !important;
}

.hayack-fv-slider__dots {
  margin: 8px auto 0 !important;
}

.hayack-fv-image__cta {
  margin-top: 14px !important;
}

/* =====================================================
   Trustbar - Soft Badge Style
   ===================================================== */

.hayack-trustbar {
  background: #f6fbf1 !important;
  padding: 18px 20px 10px !important;
  border-top: 1px solid rgba(77, 143, 31, .12);
  border-bottom: 1px solid rgba(77, 143, 31, .12);
}

.hayack-trustbar__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
}

.hayack-trustbar__item {
  background: #fff !important;
  color: #2f5f1f !important;
  border: 1px solid rgba(77, 143, 31, .22);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

.hayack-trustbar__icon {
  font-size: 15px;
}

.hayack-trustbar__sep {
  display: none !important;
}

/* =====================================================
   Reasons Section Top Padding
   ===================================================== */

.hayack-demo__reasons {
  padding-top: 64px !important;
}

@media (max-width: 767px) {
  .hayack-fv-slider {
    padding-bottom: 14px !important;
  }

  .hayack-fv-slider__dots {
    margin-top: 8px !important;
  }

  .hayack-fv-image__cta {
    margin-top: 12px !important;
  }

  .hayack-trustbar {
    padding: 14px 14px 8px !important;
  }

  .hayack-trustbar__item {
    font-size: 13px;
    padding: 7px 12px;
  }

  .hayack-demo__reasons {
    padding-top: 48px !important;
  }
}

/* =====================================================
   A. 上部ヘッダー固定解除
   ===================================================== */
.hayack-header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* FCB表示時のbody下余白（コンテンツがバーに隠れない）*/
body {
  padding-bottom: 70px;
}

/* =====================================================
   B. フローティングコンタクトバー 全面リデザイン
      PC・SP 両対応 / スクロール350px後にJS(.fcb-visible)で表示
   ===================================================== */

/* --- 非表示リセット（style.css のSP常時表示を上書き）--- */
.floating-contact-bar {
  display: none !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: #fff;
  box-shadow: 0 -3px 16px rgba(0,0,0,.2);
  align-items: stretch;
  height: 72px;
}
.floating-contact-bar.fcb-visible {
  display: flex !important;
}

/* --- 矢印メッセージ（PCのみ表示）--- */
.fcb-message {
  display: flex;
  align-items: center;
  background: #1a5c2a;
  color: #fff;
  padding: 0 32px 0 20px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: -4px;
}
.fcb-message__text {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

/* --- ボタンエリア --- */
.fcb-buttons {
  display: flex;
  flex: 1;
  align-items: stretch;
}

/* --- 電話ボタン --- */
.fcb-phone {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: #1a5c2a;
  color: #fff;
  text-decoration: none;
  flex: 2;
  gap: 10px;
  padding: 6px 24px;
  min-width: 0;
  border-left: 1px solid rgba(255,255,255,.2);
  transition: background .2s;
}
.fcb-phone:hover { background: #14471f; }
.fcb-phone__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.fcb-phone__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.fcb-phone__label {
  font-size: 0.6875rem;
  color: rgba(255,255,255,.9);
  font-weight: 600;
}
.fcb-phone__num {
  font-size: 1.375rem;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  letter-spacing: .02em;
}
.fcb-phone__sp-label { display: none; }

/* --- 来店・見積り 共通 --- */
.fcb-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 1;
  padding: 8px 10px;
  text-align: center;
  min-width: 0;
  gap: 0;
  transition: filter .15s;
}
.fcb-btn:hover { filter: brightness(.88); }
.fcb-btn__main {
  font-size: 0.875rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  line-height: 1.3;
}

/* ショールーム来店予約（緑）*/
.fcb-btn--visit {
  background: #2a7a40;
  color: #fff;
}

/* 無料見積り（赤）*/
.fcb-btn--estimate {
  background: #c8000c;
  color: #fff;
}

/* --- TOPボタン（オレンジ）--- */
.fcb-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f07a00;
  border: none;
  cursor: pointer;
  padding: 4px 14px;
  flex-shrink: 0;
  width: 60px;
  transition: background .2s;
}
.fcb-top:hover { background: #d06500; }
.fcb-top__arrow {
  font-size: 1.4rem;
  color: #fff;
  line-height: 1;
}
.fcb-top__label {
  font-size: 0.5625rem;
  color: #fff;
  margin-top: 3px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* --- SP（767px以下）--- */
@media (max-width: 767px) {
  /* フローティングバーにコンテンツが隠れないための下余白。
     内訳: バー実高 65.7px（☎アイコン削除後の実測・390px幅）＋ バーの bottom オフセット 8px
           ＋ 余裕 6px ＝ 80px。
     バーの bottom は calc(8px + env(safe-area-inset-bottom)) なので、
     ノッチ端末でも隠れないよう同じ safe-area 分をここでも加算する（既存のsafe-area指定は削除していない）。
     アイコン削除前はバーが 89.3px あり 64px では約33px不足していたため、あわせて是正している。 */
  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .floating-contact-bar {
    height: 64px;
  }
  .fcb-message {
    display: none;
  }
  .fcb-phone {
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px;
    flex: 1.5;
  }
  .fcb-phone__icon { font-size: 1.1rem; }
  .fcb-phone__label { font-size: 0.55rem; }
  .fcb-phone__num { font-size: 0.85rem; }
  .fcb-btn__main {
    font-size: 0.6rem;
    white-space: normal;
  }
  .fcb-top {
    width: 46px;
    padding: 4px 8px;
  }
  .fcb-top__arrow { font-size: 1.1rem; }
}

/* =====================================================
   修正2: フローティングバー カード型スタイル
   ===================================================== */
.floating-contact-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  /* iPhoneホームインジケーター対策: 表示領域がセーフエリアを持つ環境（PWA/viewport-fit=cover等）では
     その分だけ持ち上げる。インセット0の通常環境では従来の18pxと完全に同じ表示になる */
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 40px) !important;
  max-width: 1180px !important;
  height: auto !important;
  min-height: 72px;
  background: #ffffff !important;
  border: 2px solid rgba(77, 143, 31, .35);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  overflow: hidden;
  z-index: 9999 !important;
  display: none !important;
  align-items: stretch;
}
.floating-contact-bar.fcb-visible {
  display: flex !important;
}

.fcb-message {
  width: 130px;
  background: #12451f !important;
  color: #fff !important;
  clip-path: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px !important;
  margin-right: 0 !important;
  flex-shrink: 0;
}

.fcb-buttons {
  flex: 1;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 64px;
  /* DOM順「見積り→電話→来店予約→TOP」と視覚順を完全に一致させる（PC・スマホ共通）。
     orderは使用せず、grid-areaはDOM順と同じ並びを明示するために維持している */
  grid-template-areas: "estimate phone visit top";
  align-items: stretch;
}

.fcb-phone {
  grid-area: phone;
  background: #ffffff !important;
  color: #1a5c2a !important;
  border-right: 1px solid #ddecd4;
  flex: none !important;
  flex-direction: row;
  gap: 10px;
  padding: 6px 20px;
}
.fcb-phone__icon { color: #1a5c2a; font-size: 1.6rem !important; }
.fcb-phone__label { color: #1a5c2a !important; font-size: 0.6875rem; }
.fcb-phone__num { color: #1a5c2a !important; font-size: 1.25rem !important; }
/* 電話部分に営業時間を補助表示（予約条件は含めない・電話番号より小さく） */
.fcb-phone__hours {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #1a5c2a;
}
.fcb-phone:hover { background: #f2f9ec !important; }

.fcb-btn--visit {
  grid-area: visit;
  background: #2a7a40 !important;
  color: #fff !important;
}
.fcb-btn--estimate {
  grid-area: estimate;
  background: #c8000c !important;
  color: #fff !important;
}

.fcb-top {
  grid-area: top;
  background: #f07a00 !important;
  color: #fff !important;
  border-left: none;
  width: auto !important;
  padding: 4px 10px !important;
}
.fcb-top__arrow { color: #fff !important; font-size: 1.3rem !important; }
.fcb-top__label { color: #fff !important; }

/* =====================================================
   修正3: フッターロゴ画像
   ===================================================== */
.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  margin-bottom: 18px;
}
.footer-brand-logo__img {
  width: 220px;
  max-width: 100%;
  height: auto;
  display: block;
}
/* カスタムロゴ未設定時のテキストロゴ（fallback） */
.footer-brand-logo__text {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--hayack-green-dark);
  line-height: 1.2;
}

/* SP */
@media (max-width: 767.98px) {
  .floating-contact-bar {
    width: calc(100% - 16px) !important;
    /* セーフエリア対応（基本ブロックと同様。インセット0なら従来の8pxと同一） */
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 12px;
    min-height: auto;
  }
  .fcb-message {
    display: none !important;
  }
  /* grid-template-areasはPC側と同じ"estimate phone visit top"を継承するため、
     SPで別途指定する必要はない（重複削除。DOM順・視覚順・Tab順は全幅で一致） */
  .fcb-buttons {
    grid-template-columns: minmax(72px, 0.9fr) minmax(150px, 1.5fr) minmax(72px, 0.9fr) 34px;
  }
  .fcb-phone {
    flex-direction: column;
    gap: 2px;
    /* 基底ルールのpaddingから!importantを除去したため（PC/タブレット兼用の6px 20px）、
       通常のメディアクエリ上書きのみで縮小できる。新規!importantは追加していない。
       ☎アイコンを外した分、上下に少しだけ余白を戻して文字が窮屈にならないようにする */
    padding: 6px 6px;
  }
  /* 装飾用の大きな☎（footer.php の ☎）はSPでのみ非表示にする。
     PC・タブレットのフローティングバーは従来どおりアイコンを表示するため、
     HTMLからは削除せずここで表示だけを切る。
     基底ルール（.fcb-phone__icon）には display 宣言が無いので !important は不要。
     電話番号・営業時間・tel:リンクには一切影響しない。 */
  .fcb-phone__icon { display: none; }
  /* .fcb-phone__num は既存の一般ルール（!important付き 1.25rem）が常に優先されるため、
     ここでの上書きは新規!important追加が必要になり禁止事項に抵触する。
     1.25rem(20px)は視認性の目標値(20〜22px)の範囲内のため、既存の値をそのまま採用する */
  .fcb-phone__label { font-size: 0.6875rem; }
  .fcb-phone__hours {
    margin-top: 1px;
    font-size: clamp(9px, 2.6vw, 11px);
    line-height: 1.15;
  }
  /* 左右CTAが2行に収まるよう、列幅拡大に合わせてpaddingは詰めすぎない範囲で調整する */
  .fcb-btn { padding: 4px 4px; }
  .fcb-btn__main { font-size: clamp(0.75rem, 3.3vw, 0.875rem); line-height: 1.35; white-space: normal; letter-spacing: -0.15em; }
  /* 共通ユーティリティ .sp-only-break は @media(max-width:767px)（767.98pxではない）で
     制御されているため、devicePixelRatioの丸め誤差で767px境界で改行が効かない場合がある。
     詳細度の高いセレクタでフローティングバー内に限定して確実に改行させる（767.98pxに統一） */
  .fcb-btn__main .sp-only-break { display: inline; }
  .fcb-top { padding: 4px !important; }
  .fcb-top__label { display: none; }

  .footer-brand-logo__img {
    width: 180px;
  }
}

/* =====================================================
   PC右サイド固定バナー（.pc-side-floating-banner）
   PC大画面限定。中央コンテナ最大幅1200px（.container / .hayack-section__wrap で実測）
   + バナー幅160px + 余白24px を左右に確保すると 1200+(160+24)*2=1568px が理論上の
   最小表示幅。スクロールバー幅等の誤差を見込み、実装では1600px以上から表示する。
   スマホ・タブレットは常に非表示（実画像はpicture/sourceのmedia条件により読み込ませない）。
   ===================================================== */
.pc-side-floating-banner {
  display: none;
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: clamp(140px, 9vw, 160px);
  aspect-ratio: 1 / 2;
  max-height: 70vh;
  z-index: 500; /* ヘッダー(1000)・下部フローティングバー(9999)より下 */
}
@media (min-width: 1600px) {
  .pc-side-floating-banner {
    display: block;
  }
}
@media print {
  .pc-side-floating-banner {
    display: none !important;
  }
}

.pc-side-floating-banner__link,
.pc-side-floating-banner__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  overflow: hidden;
  text-decoration: none;
}
.pc-side-floating-banner__link {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pc-side-floating-banner__link:hover,
.pc-side-floating-banner__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  border-color: #c9c9c9;
}
.pc-side-floating-banner__link:focus-visible {
  outline: 3px solid #1a5c2a;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pc-side-floating-banner__link {
    transition: none;
  }
}

.pc-side-floating-banner__picture {
  display: block;
  width: 100%;
  height: 100%;
}
.pc-side-floating-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =====================================================
   見積りシミュレーション 共通CTA（.simulation-cta）
   TOP・施工事例・工事メニューの各テンプレートから /simulation/ への
   導線として使用。固定positionにはせず通常のページコンテンツ内に配置する。
   ===================================================== */
.simulation-cta {
  background: var(--hayack-white);
  border: 2px solid var(--hayack-green);
  border-radius: var(--hayack-radius-lg);
  box-shadow: var(--hayack-shadow);
  padding: 24px 28px;
  margin-top: 32px;
}
.simulation-cta__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.simulation-cta__icon {
  flex-shrink: 0;
  font-size: 2.25rem;
  line-height: 1;
}
.simulation-cta__content {
  flex: 1 1 260px;
  min-width: 0;
}
.simulation-cta__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--clr-primary-dark);
  margin: 0 0 4px;
}
.simulation-cta__text {
  font-size: 0.875rem;
  color: var(--hayack-text-mid);
  line-height: 1.7;
  margin: 0;
}
.simulation-cta__button-text-compact {
  display: none;
}
.simulation-cta__button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  background: var(--hayack-green);
  color: var(--hayack-white);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 14px 24px;
  border-radius: var(--hayack-radius);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.simulation-cta__button:hover {
  background: var(--hayack-green-dark);
}
.simulation-cta__button:focus-visible {
  outline: 3px solid var(--hayack-green-dark);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .simulation-cta__button {
    transition: none;
  }
}
@media (max-width: 767px) {
  .simulation-cta {
    padding: 20px 16px;
  }
  .simulation-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .simulation-cta__icon {
    font-size: 1.875rem;
  }
  .simulation-cta__button {
    width: 100%;
    white-space: normal;
  }
}

/* =====================================================
   TOP: 集合写真セクション（.hayack-demo__team-scale）
   会社概要ページと共通管理の集合写真を使用（tsk_get_company_team_photo()）。
   画像は自然な縦横比のまま表示し、固定height・object-fit:coverでの
   トリミングは行わない（人物が端で切れることを防ぐため）。
   ===================================================== */
.hayack-demo__team-scale {
  background: var(--hayack-white);
  border-top: 1px solid var(--hayack-border);
  border-bottom: 1px solid var(--hayack-border);
  padding: 56px 0;
}
.hayack-demo__team-scale-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-areas:
    "content"
    "media"
    "button";
  gap: 24px;
}
.hayack-demo__team-scale-content {
  grid-area: content;
}
.hayack-demo__team-scale-media {
  grid-area: media;
  border-radius: var(--hayack-radius-lg);
  overflow: hidden;
  box-shadow: var(--hayack-shadow);
  line-height: 0;
}
.hayack-demo__team-scale-image {
  display: block;
  width: 100%;
  height: auto;
}
.hayack-demo__team-scale-button {
  grid-area: button;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--hayack-green-dark);
  color: var(--hayack-white);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  justify-self: start;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.hayack-demo__team-scale-button:hover {
  background: var(--hayack-green-medium);
}
.hayack-demo__team-scale-button:focus-visible {
  outline: 3px solid var(--hayack-green-dark);
  outline-offset: 2px;
}
.hayack-demo__team-scale-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hayack-green-dark);
  margin: 0 0 8px;
}
.hayack-demo__team-scale-title {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 900;
  color: var(--clr-primary-dark);
  line-height: 1.5;
  margin: 0 0 16px;
}
.hayack-demo__team-scale-text {
  font-size: 0.9375rem;
  color: var(--hayack-text-mid);
  line-height: 1.9;
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .hayack-demo__team-scale-inner {
    grid-template-columns: 48% 1fr;
    grid-template-areas:
      "media content"
      "media button";
    align-items: start;
    gap: 16px 48px;
  }
  .hayack-demo__team-scale-media {
    max-width: 600px;
  }
  .hayack-demo__team-scale-button {
    margin-top: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hayack-demo__team-scale-button {
    transition: none;
  }
}

/* =====================================================
   FV キャッチコピーエリア
   ===================================================== */
.hayack-fv-copy {
  text-align: center;
  padding: 20px 20px 4px;
  background: #eef8e5;
}
.hayack-fv-copy__heading {
  font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  font-weight: 900;
  color: #1a5c2a;
  line-height: 1.45;
  margin: 0 0 10px;
  letter-spacing: .03em;
}
.hayack-fv-copy__sub {
  font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
  color: #444;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 767px) {
  .hayack-fv-copy {
    padding: 16px 16px 2px;
  }
  .hayack-fv-copy__heading {
    font-size: 1.0625rem;
  }
  .hayack-fv-copy__sub {
    font-size: 0.8125rem;
    text-align: left;
  }
  .hayack-fv-copy__sub br {
    display: none;
  }
}

/* =====================================================
   工事メニュー追加要素（説明文・CTAボタン・信頼ブロック）
   ===================================================== */
.hayack-demo__menu-card-desc {
  font-size: 0.8rem;
  color: #555;
  line-height: 1.7;
  margin: 0 0 12px !important;
  text-align: left;
}
.hayack-demo__menu-card-cta {
  display: block;
  margin-top: 14px;
  padding: 9px 10px;
  background: var(--hayack-green-dark);
  color: #fff !important;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  transition: background .2s;
  width: 100%;
}
.hayack-demo__menu-card-cta:hover {
  background: var(--hayack-green-medium);
  color: #fff !important;
}
.hayack-demo__menu-trust {
  margin-top: 36px;
  background: #fff;
  border: 1px solid rgba(77, 143, 31, .22);
  border-radius: 10px;
  padding: 20px 28px;
}
.hayack-demo__menu-trust__heading {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #1a5c2a;
  margin: 0 0 8px !important;
}
.hayack-demo__menu-trust__body {
  font-size: 0.875rem;
  color: #555;
  line-height: 1.8;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .hayack-demo__menu-trust {
    padding: 16px 18px;
  }
  .hayack-demo__menu-trust__body br {
    display: none;
  }
}

/* =====================================================
   SP表示改善（767px以下）
   ===================================================== */

/* 1. FVスライダー: SPでは画像全体が見切れないよう、viewportの高さを
   SP画像の実アスペクト比（1145×1374 管理画面登録画像共通）に合わせて可変にする。
   object-fit は contain のままにし、トリミングによる文字・人物の欠けを防ぐ。
   viewportがほぼ画像と同じ比率になるため、containでも左右の余白はほぼ生じない。 */
@media (max-width: 767px) {
	.hayack-fv-slider__viewport {
		height: auto !important;
		aspect-ratio: 1145 / 1374;
	}
	.hayack-fv-slider__img {
		object-fit: contain !important;
		object-position: center center !important;
	}
}

/* 2. FVスライダー矢印: 円の中央にflexで確実に揃える
   （既存の「FV Slider Final Override」ルールがdisplay:flexを含まずボタンのデフォルト表示に
   戻してしまっていたため、矢印の視覚的な中心がずれていた） */
.hayack-fv-slider__arrow {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	line-height: 1 !important;
}

/* 3. 施工実績セクションのリード文
   前回 max-width:19em / word-break:keep-all を追加したが、狭いmax-widthと
   keep-allの組み合わせがかえって不自然な改行を生んでいたため撤回し、
   他のセクション（選ばれる理由・工事メニュー等）と同じ自然な折り返しに統一する。 */

/* 4. 施工実績カテゴリーチップ: SPでは2列×2行の均等グリッドにする */
@media (max-width: 767px) {
	.hayack-demo__works-chips {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	.hayack-demo__works-chips li { display: block; }
	.hayack-demo__works-chip {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 44px;
		text-align: center;
		white-space: normal;
		line-height: 1.4;
		padding: 8px 10px;
	}
}

/* 5. 「工事内容を詳しく見る」ブロック: SPでは非表示（PCは従来通り表示）
   工事メニュー系ページへの導線はヘッダー・フッターのサイトマップ（工事メニュー・料金グループ）に
   全ページ分（外壁塗装・屋根塗装・屋根カバー工法・屋根修理・板金修理・雨漏り修理・雨漏り診断・防水工事）
   維持されているため、SEO/AEO上の内部リンク導線は失われない。構造化データ・noindex設定は変更しない。 */
@media (max-width: 767px) {
	.hayack-demo__menu-guide-block {
		display: none;
	}
}

/* 6. （旧: ショールーム店舗名の丸数字バッジ。カードデザイン刷新に伴い
   .hayack-demo__showroom-card-name / -card-num に統合したため削除済み） */

/* 7. （旧: 最下部CTAのpadding-top調整。実機でまだ見切れる問題が残ったため
   項目10で画像方式ごと変更し、この項目は不要になったため削除済み） */

/* 8. フッター「サイト情報」: SPではリンク群を2列にして縦の長さを抑える */
@media (max-width: 767px) {
	.footer-sitemap__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem 1rem;
	}
	.footer-sitemap__item--child {
		padding-left: 0.875rem;
		min-width: 0;
	}
}

/* =====================================================
   SP表示 再調整（実機確認で見つかった追加の崩れ対応）
   ===================================================== */

/* 9. 工事メニュー: 説明文の行数差でカード内の価格位置がずれるため、
   説明文にmin-heightを設定して価格・注記・ボタンの縦位置を各カードで揃える。
   SP2列グリッドでの実測（外壁塗装の説明文が最長=約152px）を踏まえた値。 */
@media (max-width: 767px) {
	.hayack-demo__menu-card-desc {
		min-height: 12.5em;
	}
}

/* 10. 最下部CTA: 背景画像(background-image)方式は、padding-topの増減で
   要素全体の縦横比が変わり、background-size:coverの基準（幅/高さどちらに合わせるか）が
   意図せず切り替わってキャラクターが左右にクロップされる問題があった。
   SP限定でCSS背景をやめ、実画像（<img>、SP専用に追加したwrapper内）で表示する。
   wrapperにアスペクト比を固定することで、コンテンツ量に左右されず常に
   人物・カエルのキャラクター部分（画像上部）が確実に収まる高さになる。
   注意: PC用に「display:none」をデフォルトにするグローバルルールは、
   必ずこのメディアクエリより前に書くこと（CSSは同じ詳細度なら後勝ちのため、
   後にグローバルルールを書くとメディアクエリ内のdisplay:blockが常に負けてしまう）。 */
.hayack-demo__bottom-cta-mobile-img-wrap {
	display: none;
}
@media (max-width: 767px) {
	.hayack-demo__bottom-cta-bg {
		background-image: none !important;
		padding-top: 0 !important;
		display: block !important;
	}
	.hayack-demo__bottom-cta-mobile-img-wrap {
		display: block;
		width: 100%;
		aspect-ratio: 1768 / 1300;
		overflow: hidden;
	}
	.hayack-demo__bottom-cta-mobile-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
		display: block;
	}
	.hayack-demo__bottom-cta-overlay {
		background: #fff;
	}
}

/* =====================================================
   TOPページ スマホ表示の縦長化・改行・余白 修正
   （@media (max-width: 767.98px) 限定。PC・タブレットは無変更）
   ===================================================== */
@media (max-width: 767.98px) {
	/* 2. 特徴ラベル（信頼バー）: 3段折り返し→1段横スクロールへ */
	.hayack-trustbar__inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 0 16px;
		gap: 8px;
	}
	.hayack-trustbar__inner::-webkit-scrollbar {
		display: none;
	}
	.hayack-trustbar__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* 1. 施工事例セクション背景: スマホでは背景が縦長にcoverされ横方向の可視幅が
	   非常に狭くなるため、既定の center center だと職人の顔がほぼ見えない位置になる。
	   画像自体・background-sizeは変更せず、position-xだけを調整して顔が見える構図にする。 */
	.hayack-demo__works {
		background-position: 57% center;
	}

	/* 4. 施工事例リード文: 指定位置(岡崎市を中心に積み重ねてきた／施工事例の一部を
	   ご紹介します。)で改行。フォントサイズは既存の本文サイズ(0.95rem)のまま縮小しない。 */
	.works-lead__line {
		display: block;
	}

	/* 6. 集合写真セクション: 見出しを2行に分割表示、「会社案内を見る」ボタンを中央揃え */
	.hayack-demo__team-scale-title {
		font-size: clamp(18px, calc(6.26vw - 4.5px), 22px);
	}
	.hayack-demo__team-scale-button {
		justify-self: center;
	}
	.hayack-demo__team-scale-title .sp-only-break {
		display: inline;
	}

	/* 9. フッター外部リンクバナー: 縦積み3件→左詰め1段（横スクロール対応） */
	.footer-banners__inner {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 8px;
		padding: 0 16px;
	}
	.footer-banners__inner::-webkit-scrollbar {
		display: none;
	}
	.footer-banners__item {
		flex: 0 0 clamp(84px, 24vw, 104px);
		max-width: 104px;
		width: auto;
		min-height: 44px;
		margin-inline: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.footer-banners__image-wrap {
		padding: 8px 10px;
	}

	/* 8. 看板紹介: TOPページのみ横スライド（会社概要ページは対象外。
	   スコープは home.php 側の .hayack-demo__billboard-scope ラッパー） */
	.hayack-demo__billboard-scope .company-billboard__grid {
		display: flex;
		flex-wrap: nowrap;
		grid-template-columns: none;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		gap: 14px;
		max-width: none;
		margin-inline: 0;
		padding: 0 16px;
	}
	.hayack-demo__billboard-scope .company-billboard__card {
		flex: 0 0 85vw;
		max-width: 420px;
		scroll-snap-align: start;
	}

	/* 5. シミュレーションCTA: TOPページのスマホのみボタンだけの表示にする
	   （他ページ・PCの simulation-cta は無変更） */
	.simulation-cta--home {
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0;
		margin-top: 16px;
	}
	.simulation-cta--home .simulation-cta__icon,
	.simulation-cta--home .simulation-cta__content {
		display: none;
	}
	.simulation-cta--home .simulation-cta__inner {
		display: block;
		text-align: center;
		gap: 0;
	}
	.simulation-cta--home .simulation-cta__button {
		display: inline-flex;
		width: auto;
		padding: 14px 40px;
		font-size: 1.0625rem;
		font-weight: 900;
		border-radius: 8px;
		white-space: nowrap;
	}
	.simulation-cta--home .simulation-cta__button-text {
		display: none;
	}
	.simulation-cta--home .simulation-cta__button-text-compact {
		display: inline;
	}
}

/* 6. 集合写真セクション見出し: 320px付近では既存の左右paddingのままだと
   2行目「職人とスタッフ全員で住まいを守る」が18px下限でも収まりきらないため、
   このタイル幅に限り左右paddingをわずかに詰めて幅を確保する */
@media (max-width: 359.98px) {
	.hayack-demo__team-scale-inner {
		padding: 0 10px;
	}
	.hayack-demo__team-scale-title {
		font-size: 18px;
		letter-spacing: -0.02em;
	}
}

/* =====================================================
   PHASE-F2-LINK 信頼バーの内部リンク化（TOP → /reason/ 該当セクション）
   -----------------------------------------------------
   .hayack-trustbar__item は div から a に変わったが、丸角バッジの見た目は
   すべて既存のクラス側ルールが担っているため、通常時の表示は変更しない。
   ここで足すのは「リンクであることが分かる最小限の反応」だけ。
   ===================================================== */

/* ブラウザ標準の下線・色を確実に出さない（テーマの a ルールに依存しない保険）。
   色は既存ルールの color:#2f5f1f が効いたままなので指定しない。 */
a.hayack-trustbar__item {
	text-decoration: none;
}

/* hover: 文字部分だけに下線。アイコン(絵文字)には掛けない。
   色・背景・サイズ・位置は変えない。 */
a.hayack-trustbar__item:hover span:not(.hayack-trustbar__icon) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* キーボード操作時のフォーカス可視化。outline はレイアウトに影響しない。 */
a.hayack-trustbar__item:focus-visible {
	outline: 2px solid #2f5f1f;
	outline-offset: 2px;
}

/* 着地点: 見出しが画面上端に貼り付かないよう余白を持たせる。
   PCは .hayack-header が position:static のため固定ヘッダーによる隠れは無く、
   既存の #showroom-access と同じ 24px を使う。 */
#reason-local-history,
#reason-estimate-compare,
#reason-showroom,
#reason-no-pressure {
	scroll-margin-top: 24px;
}

/* SPのみ .hayack-header__sp が position:fixed / top:0 / height:64px で
   画面右上に残るため、その高さ分＋余白を上乗せして重ならないようにする。 */
@media (max-width: 767px) {
	#reason-local-history,
	#reason-estimate-compare,
	#reason-showroom,
	#reason-no-pressure {
		scroll-margin-top: 88px;
	}
}