/* =========================================================
   HOUSEFIT 2026  —  色・文字のルール
   白 #FFF / オフホワイト #F6F5F1 / 文字 #33363A / グリーン #3F5D4A
   ========================================================= */
:root {
	--white: #FFFFFF;
	--off: #F6F5F1;
	--ink: #33363A;
	--ink-2: #4A4F52;
	--quiet: #5E665F;
	--line: #DCDDD6;
	--green: #3F5D4A;
	--green-dark: #2C4535;
	--ph: #E9ECE6;
	--mincho: 'Shippori Mincho', serif;
	--gothic: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--gothic);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
a:hover { color: var(--green-dark); }
p { margin: 0 0 1em; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 1080px; }
.center { text-align: center; }

/* ---------- ボタン・リンク ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 10px 18px; font-size: 14px;
	border-radius: 2px; text-decoration: none; transition: background .2s, color .2s;
}
.btn-line { border: 1px solid var(--green); color: var(--green); }
.btn-line:hover { background: var(--green); color: var(--white); }
.btn-fill { background: var(--green); color: var(--white); }
.btn-fill:hover { background: var(--green-dark); color: var(--white); }
.btn-lg { padding: 14px 28px; font-size: 15px; }
.btn-white { background: var(--white); color: var(--green-dark); min-width: 200px; padding: 16px 32px; font-size: 15px; }
.btn-white:hover { background: var(--off); color: var(--green-dark); }
.btn-white-line { border: 1px solid var(--white); color: var(--white); min-width: 200px; padding: 16px 32px; font-size: 15px; }
.btn-white-line:hover { background: rgba(255,255,255,.12); color: var(--white); }
.text-link { display: inline-block; text-decoration: none; border-bottom: 1px solid var(--green); padding: 8px 0; font-size: 15px; }

/* ---------- 仮の写真枠 ---------- */
.ph {
	background: var(--ph); color: var(--quiet);
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-size: 13px; letter-spacing: .05em; padding: 12px;
}
.hf-img { width: 100%; object-fit: cover; }
.h-180 { height: 180px; } .h-200 { height: 200px; } .h-260 { height: 260px; }
.h-400 { height: 400px; } .h-440 { height: 440px; }
.ratio-4-3 { aspect-ratio: 4 / 3; } .ratio-9-16 { aspect-ratio: 9 / 16; }
.hf-img.h-180, .hf-img.h-200, .hf-img.h-260, .hf-img.h-400, .hf-img.h-440,
.hf-img.ratio-4-3, .hf-img.ratio-9-16 { width: 100%; object-fit: cover; }

/* ---------- ヘッダー ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,.96); border-bottom: 1px solid #E6E6E1;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.logo { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; line-height: 1.2; }
.logo-main { font-family: var(--mincho); font-size: 24px; font-weight: 700; letter-spacing: .12em; margin: 0; color: var(--ink); }
.logo-sub { font-size: 11px; letter-spacing: .14em; color: var(--quiet); margin: 0; }
.global-nav { display: flex; align-items: center; gap: 24px; }
.global-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.global-nav .menu a { color: var(--ink); text-decoration: none; display: inline-block; padding: 10px 0; }
.global-nav .menu a:hover { color: var(--green); }
.global-nav .sub-menu { display: none; }
.header-cta { display: flex; gap: 8px; }
.nav-toggle { display: none; }

@media (max-width: 1080px) {
	.nav-toggle {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer;
	}
	.nav-toggle span { display: block; height: 2px; background: var(--ink); }
	.global-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 16px;
		background: var(--white); border-bottom: 1px solid #E6E6E1; padding: 16px 24px 24px;
	}
	.global-nav.is-open { display: flex; }
	.global-nav .menu { flex-direction: column; gap: 0; }
	.global-nav .menu a { padding: 12px 0; display: block; border-bottom: 1px solid #EEE; }
	.header-cta .btn { flex: 1; }
}

/* ---------- メインビジュアル ---------- */
.hero { position: relative; }
.hero-img { width: 100%; height: min(72vh, 680px); min-height: 420px; object-fit: cover; }
.hero-text {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 0;
	background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,0));
}
/* メインビジュアルのスライド（ゆっくり重ねて切り替え） */
.hero-slides { position: relative; height: min(72vh, 680px); min-height: 420px; overflow: hidden; }
.hero-slide {
	position: absolute; inset: 0; height: 100%; min-height: 0;
	opacity: 0; transform: scale(1.04);
	transition: opacity 1.6s ease, transform 8s ease-out;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-pause {
	position: absolute; right: 24px; top: 24px; z-index: 2;
	width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.85); color: var(--ink);
	display: inline-flex; align-items: center; justify-content: center;
}
.hero-pause .i-play { display: none; }
.hero-pause[aria-pressed="true"] .i-pause { display: none; }
.hero-pause[aria-pressed="true"] .i-play { display: block; }
@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: opacity .3s; transform: none; }
	.hero-slide.is-active { transform: none; }
}
.hero h1 { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.4; letter-spacing: .08em; }
.hero-text p { margin: 16px 0 0; color: var(--ink-2); }

/* ---------- セクション共通 ---------- */
.sec { padding: 112px 0; }
.sec-mid { padding: 88px 0; }
.bg-off { background: var(--off); }
.banners { padding: 32px 0; background: var(--off); }
.banner-img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }

.en { margin: 0; font-size: 13px; letter-spacing: .24em; color: var(--green); }
.ja { margin: 12px 0 24px; font-family: var(--mincho); font-weight: 500; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.6; }
.ja.sm { font-size: clamp(22px, 2.2vw, 30px); }
.sec-head { margin-bottom: 48px; }
.sec-head .ja { margin-bottom: 12px; }
.sec-head .lead, .lead { margin: 0; color: var(--ink-2); }
.sec-head.is-center { text-align: center; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 40px; }
.head-row .sec-head { margin-bottom: 0; max-width: 680px; }

.grid-auto-200, .grid-auto-220, .grid-auto-260, .grid-auto-280, .grid-auto-300 { display: grid; gap: 24px; }
.grid-auto-200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.grid-auto-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.grid-auto-260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 24px; }
.grid-auto-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-auto-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.split.top { align-items: flex-start; }
.split-text { flex: 1 1 420px; min-width: 0; }
.split-media { flex: 1 1 360px; min-width: 0; }
.split-media.wide { flex: 1 1 520px; }

/* ---------- カード ---------- */
.card { display: flex; flex-direction: column; background: var(--white); color: var(--ink); text-decoration: none; transition: box-shadow .2s; }
.card:hover { color: var(--ink); box-shadow: 0 6px 24px rgba(51,54,58,.08); }
.card-body { padding: 24px; }
.card-body.lg { padding: 28px; }
.card-media { position: relative; }
.num { margin: 0; font-family: var(--mincho); font-size: 28px; color: var(--green); line-height: 1; }
.label-en { margin: 6px 0 0; font-size: 11px; letter-spacing: .18em; color: var(--quiet); }
.card h3 { margin: 10px 0 8px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.card h3.brand { margin-top: 6px; font-size: 24px; letter-spacing: .06em; }
.small { font-size: 14px; color: var(--ink-2); margin: 0; }
.tiny { font-size: 12px; color: var(--quiet); line-height: 1.9; margin: 16px 0 0; }
.kind { margin: 0 0 4px; font-size: 12px; letter-spacing: .1em; color: var(--green); }
.note { margin: 10px 0 0; font-size: 12px; color: var(--quiet); }
.strong { font-weight: 700; margin-bottom: 4px; }
.empty { color: var(--quiet); font-size: 14px; }

/* 強み（C値・レスキューローン） */
.strength { border: 1px solid var(--line); padding: 40px; }
.strength-big { margin: 14px 0 6px; font-family: var(--mincho); font-size: clamp(32px, 3.4vw, 44px); line-height: 1.2; }
.strength-sub { margin: 0 0 12px; font-size: 15px; font-weight: 700; }

/* 施工事例・動画 */
.work, .movie { color: var(--ink); text-decoration: none; }
.work:hover, .movie:hover { color: var(--green); }
.work-title { margin: 14px 0 2px; font-size: 15px; font-weight: 500; line-height: 1.6; }
.movie .kind { margin-top: 12px; }
.movie .work-title { margin-top: 0; }
.work-meta { margin: 0; font-size: 13px; color: var(--quiet); }
.movie-thumb { position: relative; }
.movie-thumb .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sns-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* オーナーインタビュー */
.voice { display: flex; gap: 20px; align-items: center; padding: 24px; background: var(--white); color: var(--ink); text-decoration: none; }
.voice:hover { color: var(--ink); box-shadow: 0 6px 24px rgba(51,54,58,.08); }
.voice-img { width: 140px; height: 140px; flex: 0 0 140px; object-fit: cover; }
.voice-quote { margin: 0 0 8px; font-family: var(--mincho); font-size: 18px; line-height: 1.6; }

/* イベント（見学クラウド連携） */
.event-intro { margin-bottom: 64px; }
.event-head {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px;
	border-top: 1px solid var(--line); padding-top: 28px; margin-bottom: 32px;
}
.event-head .kind { font-size: 15px; font-weight: 700; margin: 0; }
.event-title { margin: 0; font-size: 17px; }

.hf-kc.is-loading .hf-kc-list { min-height: 200px; background: linear-gradient(90deg, var(--off), #EEEDE8, var(--off)); background-size: 200% 100%; animation: hfKcLoad 1.4s ease infinite; }
@keyframes hfKcLoad { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bg-off .hf-kc.is-loading .hf-kc-list { background: linear-gradient(90deg, #FFFFFF, #F1F0EB, #FFFFFF); background-size: 200% 100%; }
.hf-kc-empty { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
.hf-kc-empty[hidden] { display: none; }
.hf-kc-empty .work-meta { margin-top: 6px; }

.hf-kc .c-section-list {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 40px 24px;
	list-style: none; margin: 0; padding: 0;
}
.hf-kc .c-post-event { display: flex; flex-direction: column; background: var(--white); color: var(--ink); }
.hf-kc .c-img-wrapper { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--off); }
.hf-kc .c-img-wrapper img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.hf-kc .c-post-event:hover .c-img-wrapper img { transform: scale(1.05); }
.hf-kc .post-infos { padding: 18px 20px 22px; letter-spacing: .02em; display: flex; flex-direction: column; flex: 1; }
.hf-kc .kc-date-type { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.hf-kc .kc-date { display: flex; align-items: center; flex-wrap: wrap; min-height: 40px; }
.hf-kc .c-post-date { display: flex; align-items: center; gap: 6px; color: var(--green); font-family: var(--mincho); }
.hf-kc .date-num { font-size: 30px; line-height: 1; }
.hf-kc .year-month { display: flex; flex-direction: column; font-family: var(--gothic); font-size: 11px; line-height: 1.3; letter-spacing: .08em; color: var(--quiet); }
.hf-kc .kc-date-start.-line::after, .hf-kc .kc-date-end.-line::before { content: ""; display: block; width: 10px; height: 1px; margin: 0 8px; background: var(--green); }
.hf-kc .kc-date-open { font-size: 13px; color: var(--green); }
.hf-kc .kc-date-other { font-family: var(--gothic); font-size: 15px; font-weight: 500; }
.hf-kc .kc-type { padding: 2px 10px; border: 1px solid var(--green); color: var(--green); font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.hf-kc .post-title { margin: 0 0 6px; font-size: 16px; font-weight: 500; line-height: 1.7; }
.hf-kc .post-title a { color: var(--ink); text-decoration: none; }
.hf-kc .post-title a:hover { color: var(--green); }
.hf-kc .post-meta { margin: 0; font-size: 13px; color: var(--quiet); }
.hf-kc .kc-more { align-self: flex-start; margin-top: auto; padding-top: 14px; font-size: 14px; text-decoration: none; }
.hf-kc .kc-more { border-bottom: 1px solid var(--green); padding-bottom: 4px; }
@media (max-width: 767px) {
	.hf-kc .c-section-list { grid-template-columns: 1fr; gap: 32px; }
	.hf-kc .date-num { font-size: 26px; }
	.hf-kc .post-title { font-size: 15px; }
}

/* LCCM マーク */
.badge-lccm {
	position: absolute; left: 12px; top: 12px;
	background: var(--green); color: var(--white); font-size: 12px; letter-spacing: .06em;
	padding: 4px 10px; border-radius: 2px;
}
.badge-lccm.static { position: static; display: inline-block; }

/* エリア・グループ */
.area-list { font-size: 14px; line-height: 2.2; color: var(--ink-2); margin: 0; }
.group-item { background: var(--off); padding: 28px; text-align: center; }
.group-name { margin: 0 0 6px; font-size: 16px; font-weight: 700; }

/* お知らせ */
.news { list-style: none; margin: 0; padding: 0; }
.news li { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; padding: 16px 0; border-top: 1px solid #E6E6E1; }
.news li:last-child { border-bottom: 1px solid #E6E6E1; }
.news time { font-size: 13px; color: var(--quiet); }
.news .kind { margin: 0; }
.news a { color: var(--ink); text-decoration: none; }
.news a:hover { color: var(--green); }
.map { width: 100%; height: 240px; border: 0; margin-top: 16px; }

/* ---------- 相談帯・フッター ---------- */
.sec-cta { padding: 104px 0; background: var(--green); color: var(--white); }
.sec-cta .ja { margin: 0 0 16px; }
.cta-lead { color: #E6ECE7; margin-bottom: 36px; }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cta-tel { margin: 32px 0 0; font-size: 22px; letter-spacing: .06em; }
.cta-tel a { color: var(--white); text-decoration: none; }
.cta-hours { margin: 4px 0 0; font-size: 13px; color: #E6ECE7; }

.site-footer { background: var(--off); padding: 56px 0 24px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer-addr { margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.footer-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; }
.footer-nav a { color: var(--ink); text-decoration: none; }
.copy { margin-top: 32px; font-size: 12px; color: var(--quiet); }

/* 画面下の固定ボタン（PC・スマホ共通） */
.fixed-cta {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: var(--white); border-top: 1px solid var(--line);
}
.fixed-cta a { text-align: center; padding: 14px 6px; font-size: 13px; color: var(--ink); text-decoration: none; min-height: 48px; }
.fixed-cta a + a { border-left: 1px solid var(--line); }
.fixed-cta a.is-main { background: var(--green); color: var(--white); }
.site-footer { padding-bottom: 80px; } /* ボタンでフッターが隠れないように */

/* スマホ時の余白など（元からあった指示） */
@media (max-width: 768px) {
	.sec { padding: 72px 0; }
	.sec-mid { padding: 56px 0; }
	.hero-text { padding: 32px 0; }
	.voice { flex-direction: column; align-items: flex-start; }
	.voice-img { width: 100%; height: 220px; flex: none; }
	.strength { padding: 28px; }
	.h-440, .h-400 { height: 280px; }
}

/* ---------- 下層ページ ---------- */
.page-head { padding: 72px 0 40px; background: var(--off); }
.page-head .ja { margin-bottom: 8px; }
.single-hero { margin: 40px 0; }
.entry { padding: 40px 0 96px; }
.entry h2 { font-family: var(--mincho); font-weight: 500; font-size: 26px; margin: 2em 0 .8em; }
.entry h3 { font-size: 19px; margin: 1.8em 0 .6em; }
.entry img { margin: 24px 0; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filter a { padding: 8px 16px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; border-radius: 2px; min-height: 40px; }
.filter a[aria-current] { background: var(--green); border-color: var(--green); color: var(--white); }
.pager { margin-top: 48px; text-align: center; }
.pager .page-numbers { display: inline-block; min-width: 40px; padding: 8px; margin: 0 2px; text-decoration: none; color: var(--ink); }
.pager .page-numbers.current { background: var(--green); color: var(--white); }

/* =====================================================================
   HOUSEFIT 住宅サイト｜共通ヘッダー プルダウン（6メニュー）
   ファイル：wp-content/themes/housefit2026/assets/css/hf-nav-dropdown.css
   ---------------------------------------------------------------------
   ・inc/hf-nav-dropdown.php が main.css の後に読み込みます
   ・すべて .global-nav の中だけに効きます（他の部分のデザインは変わりません）
   ・main.css の「.global-nav .sub-menu { display:none; }」は残したまま、
     より強い指定で上書きしています（main.css は書き換えません）
   ・PC：1081px以上／スマホ・タブレット：1080px以下（既存テーマと同じ）
   ===================================================================== */

.global-nav {
  --hf-dd-bg: #FFFFFF;
  --hf-dd-text: #33363A;
  --hf-dd-sub: #5E665F;
  --hf-dd-accent: #3F5D4A;
  --hf-dd-line: #DCDDD6;
  --hf-dd-hover: #F6F5F1;
}

/* 画面には出さず、読み上げソフトだけに伝える文字 */
.global-nav .hf-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 開閉ボタン（共通） */
.global-nav .hf-subnav-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(63, 93, 74, .12);
}
.global-nav .hf-subnav-toggle__icon { display: block; transition: transform .2s ease; }
.global-nav .is-open > .hf-subnav-toggle .hf-subnav-toggle__icon { transform: rotate(180deg); }
.global-nav .hf-subnav-toggle:focus-visible {
  outline: 2px solid var(--hf-dd-accent);
  outline-offset: 2px;
}

/* 下層項目の文字（共通） */
.global-nav .hf-subnav .hf-sub-title { display: block; font-weight: 500; }
.global-nav .hf-subnav .hf-sub-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--hf-dd-sub);
}
.global-nav .hf-subnav .hf-ext { margin-left: 4px; font-size: .85em; color: var(--hf-dd-sub); }
.global-nav .hf-subnav ul,
.global-nav ul.hf-subnav { list-style: none; margin: 0; padding: 0; }
.global-nav .hf-subnav li { margin: 0; padding: 0; border: 0; float: none; width: auto; }

/* =====================================================================
   PC（1081px以上）：hover・クリック・キーボードで開くプルダウン
   ===================================================================== */
@media (min-width: 1081px) {

  /* 矢印ボタンの分だけ横幅が増えるので、項目の間隔を少し詰める
     （main.css は gap: 4px 24px。矢印＋間隔で、見た目の間隔はほぼ同じです） */
  .global-nav .menu { column-gap: 12px; }

  .global-nav .menu-item-has-children {
    position: relative;
    display: flex;
    align-items: center;
  }
  .global-nav .menu-item-has-children > .hf-subnav-toggle {
    width: 22px;
    height: 28px;
    margin-left: 2px;
    color: var(--hf-dd-sub);
  }
  .global-nav .menu-item-has-children > .hf-subnav-toggle:hover,
  .global-nav .menu-item-has-children.is-open > .hf-subnav-toggle { color: var(--hf-dd-accent); }

  /* パネル本体（初期状態は非表示） */
  .global-nav .menu-item-has-children > .sub-menu.hf-subnav {
    display: block;
    position: absolute;
    /* ヘッダーの下線にそろえる（JSが実際の位置を計算して --hf-top に入れます） */
    top: var(--hf-top, calc(100% + 15px));
    left: 0;
    right: auto;
    z-index: 1000;
    box-sizing: border-box;
    min-width: 260px;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 10px 0;
    background: var(--hf-dd-bg);
    border: 1px solid var(--hf-dd-line);
    border-top: 2px solid var(--hf-dd-accent);
    box-shadow: 0 10px 24px rgba(51, 54, 58, .06);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--hf-shift, 0px), 6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  /* 親とパネルのすき間でカーソルが外れても閉じないための「橋」 */
  .global-nav .menu-item-has-children > .sub-menu.hf-subnav::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(-1 * var(--hf-bridge, 16px));
    height: var(--hf-bridge, 16px);
  }

  /* 表示：JSが動く時は .is-open、JSが無い時は hover / focus でも表示 */
  .global-nav .menu-item-has-children.is-open > .sub-menu.hf-subnav,
  .global-nav:not(.hf-nav-js) .menu-item-has-children:hover > .sub-menu.hf-subnav,
  .global-nav:not(.hf-nav-js) .menu-item-has-children:focus-within > .sub-menu.hf-subnav {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--hf-shift, 0px), 0);
    transition-delay: 0s;
  }

  /* 下層のリンク */
  .global-nav .hf-subnav a {
    display: block;
    box-sizing: border-box;
    width: auto;
    height: auto;
    margin: 0;
    padding: 11px 22px;
    border: 0;
    background: none;
    color: var(--hf-dd-text);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
  }
  .global-nav .hf-subnav a::before,
  .global-nav .hf-subnav a::after { content: none; }
  .global-nav .hf-subnav a:hover {
    background: var(--hf-dd-hover);
    color: var(--hf-dd-accent);
  }
  .global-nav .hf-subnav a:focus-visible {
    outline: 2px solid var(--hf-dd-accent);
    outline-offset: -2px;
    background: var(--hf-dd-hover);
  }
  .global-nav .hf-subnav .current-menu-item > a { color: var(--hf-dd-accent); }

  /* ---- 2列メガメニュー（家づくりの考え方） ---- */
  .global-nav .hf-mega > .sub-menu.hf-subnav--mega {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(800px, calc(100vw - 32px));
    padding: 24px 16px 20px;
  }
  .global-nav .hf-mega-col { min-width: 0; padding: 0 8px; }
  .global-nav .hf-mega-col + .hf-mega-col { border-left: 1px solid var(--hf-dd-line); padding-left: 16px; }
  .global-nav .hf-mega-heading {
    margin: 0 0 6px;
    padding: 0 14px 10px;
    border-bottom: 1px solid var(--hf-dd-line);
    color: var(--hf-dd-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .2em;
  }
  .global-nav .hf-mega-list a { padding: 11px 14px; }
}

/* 幅の狭いPC（1081〜1199px）：メニューが2段にならないよう、文字と間隔を少し小さく */
@media (min-width: 1081px) and (max-width: 1199px) {
  .global-nav { gap: 16px; }
  .global-nav .menu { column-gap: 6px; font-size: 13px; }
  .global-nav .menu-item-has-children > .hf-subnav-toggle { width: 20px; margin-left: 1px; }
}

/* =====================================================================
   スマホ・タブレット（1080px以下）：ハンバーガーの中のアコーディオン
   ===================================================================== */
@media (max-width: 1080px) {

  /* 開いたメニューが画面より長い時は、メニューの中だけスクロール
     （--hf-header-h はヘッダーの高さ。JSが実際の高さを入れます） */
  .global-nav.is-open {
    max-height: calc(100vh - var(--hf-header-h, 76px));
    max-height: calc(100dvh - var(--hf-header-h, 76px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* 親の行：左＝親ページへのリンク／右＝開閉ボタン（区切り線で分けて誤タップ防止） */
  .global-nav .menu-item-has-children {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    align-items: stretch;
  }
  .global-nav .menu-item-has-children > a { grid-column: 1; min-width: 0; }
  .global-nav .menu-item-has-children > .hf-subnav-toggle {
    grid-column: 2;
    width: 52px;
    min-height: 52px;
    border-left: 1px solid var(--hf-dd-line);
    border-bottom: 1px solid #EEE;   /* main.css の親リンクの下線と高さをそろえる */
    border-radius: 0;
    color: var(--hf-dd-accent);
  }
  .global-nav .menu-item-has-children > .hf-subnav-toggle .hf-subnav-toggle__icon { width: 14px; height: 14px; }

  /* 下層（閉じている時は非表示） */
  .global-nav .menu-item-has-children > .sub-menu.hf-subnav {
    grid-column: 1 / -1;
    display: none;
    position: static;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 4px 0 10px;
    background: var(--hf-dd-hover);
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .global-nav .menu-item-has-children.is-open > .sub-menu.hf-subnav { display: block; }

  .global-nav .hf-subnav a {
    display: block;
    box-sizing: border-box;
    min-height: 48px;
    margin: 0;
    padding: 12px 16px 12px 20px;
    border: 0;
    background: none;
    color: var(--hf-dd-text);
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    white-space: normal;
  }
  .global-nav .hf-subnav a:focus-visible {
    outline: 2px solid var(--hf-dd-accent);
    outline-offset: -2px;
  }

  /* メガメニューも1列に */
  .global-nav .hf-mega > .sub-menu.hf-subnav--mega { display: none; }
  .global-nav .hf-mega.is-open > .sub-menu.hf-subnav--mega { display: block; }
  .global-nav .hf-mega-col + .hf-mega-col { margin-top: 6px; }
  .global-nav .hf-mega-heading {
    margin: 8px 0 0;
    padding: 8px 16px 4px 20px;
    color: var(--hf-dd-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
  }
}

/* スマホ固定ボタン（768px以下・main.css の .fixed-cta）にメニューの最後が隠れないよう余白 */
@media (max-width: 768px) {
  .global-nav.is-open { padding-bottom: 88px; }
}

/* 動きを減らす設定の方には、アニメーションをなくす */
@media (prefers-reduced-motion: reduce) {
  .global-nav .sub-menu.hf-subnav,
  .global-nav .hf-subnav-toggle__icon { transition: none !important; }
}