@charset "UTF-8";

/* ============================================================
   HUBRIDE Global styles（全ページ共通）
   設計書: hubride-design-spec.md §全ページ共通要素
   - スマホ固定フッターCTA（LINE / 電話 / お問合せ）
   ============================================================ */

/* ---- ヘッダー背景を pure white に統一 ----
   SWELL既定の --color_header_bg は #fdfdfd（微オフホワイト）。
   HUBRIDEは #ffffff ベースのNOREL風クリーン設計なので完全な純白に固定する。
   上部バー(.l-header__bar)もデフォルトでdark navyが入るが、白に寄せる。 */
:root {
	--color_header_bg: #ffffff;
}
.l-header,
.l-header__inner {
	background: #ffffff !important;
	box-shadow: none !important;
}
/* スマホ：追従ヘッダー（data-spfix=1）がスクロール中に発火したらドロップシャドウ
   ※ .home #header { box-shadow: none !important } を打ち消すために ID で強く書く */
@media (max-width: 959px) {
	[data-scrolled="true"] #header.l-header[data-spfix="1"] {
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
		transition: box-shadow 0.3s ease;
	}
}
/* ヘッダー表示エフェクト */
.l-header .c-headLogo,
.l-header .c-gnav > li {
	opacity: 0;
	transform: translateY(-8px);
	animation: hubride-header-fadein 0.8s ease forwards;
}
.l-header .c-headLogo {
	animation-delay: 0.2s;
}
.l-header .c-gnav > li:nth-child(1) { animation-delay: 0.4s; }
.l-header .c-gnav > li:nth-child(2) { animation-delay: 0.5s; }
.l-header .c-gnav > li:nth-child(3) { animation-delay: 0.6s; }
.l-header .c-gnav > li:nth-child(4) { animation-delay: 0.7s; }
.l-header .c-gnav > li:nth-child(5) { animation-delay: 0.8s; }
@keyframes hubride-header-fadein {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.l-fixHeader,
.l-fixHeader::before {
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}
.l-fixHeader__inner {
	background: transparent !important;
	padding-top: 0 !important;
	padding-bottom: clamp(0.6rem, 1vw, 1.2rem) !important;
}
.l-fixHeader::before {
	opacity: 0.88 !important;
}
/* 上部バー(.l-header__bar)は丸ごと非表示 — RSS/検索アイコンと catchphrase も消す */
.l-header__bar {
	display: none !important;
}

/* メインヘッダーのみゆったりパディング。
   固定ヘッダーはSWELL既定のコンパクトな高さを維持する。 */
/* ヘッダーコンテナをフルワイドに + 下端揃え */
.l-header .l-header__inner.l-container,
.l-fixHeader .l-fixHeader__inner.l-container {
	max-width: none !important;
	padding-left: 5% !important;
	padding-right: 5% !important;
	align-items: flex-end !important;
}
/* SWELLのロゴ高さ固定を解除 */
.l-header .c-headLogo,
.l-fixHeader .c-headLogo {
	height: auto !important;
}
.l-header .l-header__logo,
.l-fixHeader .l-fixHeader__logo {
	padding-bottom: 0 !important;
}
.l-header .l-header__inner {
	padding-top: clamp(0.8rem, 1.2vw, 1.5rem);
	padding-bottom: clamp(0.8rem, 1.2vw, 1.5rem);
}

/* ---- ナビ（メニュー）をロゴタグラインの高さに揃える ----
   logoが flex-end でタグラインを下端に寄せているため、
   nav も align-self: flex-end で同じく下端揃えにする。
   a要素の padding-bottom を詰めて、タグライン(padding-bottom: 4px)と視覚的に揃える。 */
.l-header .l-header__gnav,
.l-fixHeader .l-fixHeader__gnav {
	align-self: flex-end;
	margin-bottom: 0;
	line-height: 1;
}
.l-header .c-gnav > li > a,
.l-fixHeader .c-gnav > li > a {
	padding-bottom: 0;
	line-height: 1;
	font-weight: 700;
	font-family: "Inter", "Noto Sans JP", sans-serif;
	font-size: clamp(0.75rem, 1.25vw, 1.05rem) !important;
	letter-spacing: 0.15em;
	transform: none !important;
	transition: color 0.3s ease !important;
}
.l-header .c-gnav > li > a .ttl,
.l-fixHeader .c-gnav > li > a .ttl {
	font-size: inherit !important;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.l-header .c-gnav > li > a .ttl::after,
.l-fixHeader .c-gnav > li > a .ttl::after {
	font-size: clamp(0.55rem, 0.6vw, 0.7rem);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #999;
	margin-top: 0.2em;
}
/* メニューごとの日本語サブテキスト（SERVICE/COMPANY/COLUMN/CONTACT の4項目構成） */
.l-header .c-gnav > li:nth-child(1) > a .ttl::after { content: "事業紹介"; }
.l-header .c-gnav > li:nth-child(2) > a .ttl::after { content: "企業情報"; }
.l-header .c-gnav > li:nth-child(3) > a .ttl::after { content: "コラム"; }
.l-header .c-gnav > li:nth-child(4) > a .ttl::after { content: "お問合せ"; }
.l-header .c-gnav > li:nth-child(5) > a .ttl::after { content: "企業サイト"; }

/* 企業サイト（外部リンク）用：ラベルと小アイコンを横並び表示 */
.hubride-ext-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}
.hubride-ext-icon {
	flex-shrink: 0;
	opacity: 0.7;
}
.c-gnav a:hover .hubride-ext-icon,
.p-spMenu__nav a:hover .hubride-ext-icon {
	opacity: 1;
}
.l-fixHeader .c-gnav > li:nth-child(1) > a .ttl::after { content: "事業紹介"; }
.l-fixHeader .c-gnav > li:nth-child(2) > a .ttl::after { content: "企業情報"; }
.l-fixHeader .c-gnav > li:nth-child(3) > a .ttl::after { content: "コラム"; }
.l-fixHeader .c-gnav > li:nth-child(4) > a .ttl::after { content: "お問合せ"; }
.l-fixHeader .c-gnav > li:nth-child(5) > a .ttl::after { content: "企業サイト"; }

/* ---- SP ハンバーガーメニューにも PC と同じ和訳サブラベルを表示
   SP の .c-spnav は PC と違い <span class="ttl"> が無く素の <a>TEXT</a> 構造。
   直接 a::after に content を付与。sub-menu（SERVICE 配下の事業ページ）には
   伝播しないよう > で直下のみを対象にする。 ---- */
.p-spMenu__nav .c-spnav > li > a::after {
	display: block;
	font-family: "Noto Sans JP", "Inter", sans-serif;
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #999;
	margin-top: 0.3em;
}
.p-spMenu__nav .c-spnav > li:nth-child(1) > a::after { content: "事業紹介"; }
.p-spMenu__nav .c-spnav > li:nth-child(2) > a::after { content: "企業情報"; }
.p-spMenu__nav .c-spnav > li:nth-child(3) > a::after { content: "コラム"; }
.p-spMenu__nav .c-spnav > li:nth-child(4) > a::after { content: "お問合せ"; }
.p-spMenu__nav .c-spnav > li:nth-child(5) > a::after { content: "企業サイト"; }

/* ---- ナビ hover アンダーラインを文字の下 10px あたりに配置 ----
   a の padding-bottom 14px のうち下 4px を残して、
   文字の直下から 10px 下がった位置にアンダーラインを引く。 */
/* hover時: 上線 */
.l-header .c-gnav > li > a::after,
.l-fixHeader .c-gnav > li > a::after {
	bottom: auto !important;
	top: -12px !important;
	height: 1px !important;
	background: #e7e7e7 !important;
}
.l-header .c-gnav > li.-current > a::after,
.l-fixHeader .c-gnav > li.-current > a::after {
	background: #999 !important;
}

/* ---- メガメニュー（サービス ドロップダウン）----
   SWELL の .c-gnav .sub-menu を拡張して、横並びカード型メガメニューにする。 */
.l-header .c-gnav > .menu-item-has-children > .sub-menu,
.l-fixHeader .c-gnav > .menu-item-has-children > .sub-menu {
	display: flex !important;
	flex-direction: row !important;
	gap: 0;
	min-width: clamp(480px, 50vw, 680px);
	left: 50%;
	transform: translate(-50%, 5px);
	padding: 0.5rem;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--hb-border, #e5e5e5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}
.l-header .c-gnav > .menu-item-has-children:hover > .sub-menu,
.l-fixHeader .c-gnav > .menu-item-has-children:hover > .sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
}
/* 親 <li> とメガメニューの 5px の視覚ギャップを hover-bridge で埋める。
   透明な擬似要素で hover 判定を延長しつつ見た目は変えない。 */
.l-header .c-gnav > .menu-item-has-children,
.l-fixHeader .c-gnav > .menu-item-has-children {
	position: relative;
}
.l-header .c-gnav > .menu-item-has-children::before,
.l-fixHeader .c-gnav > .menu-item-has-children::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
	z-index: 5;
	/* 透明。見た目には影響せず hover 判定のみ拡張 */
}

.l-header .c-gnav .sub-menu .menu-item,
.l-fixHeader .c-gnav .sub-menu .menu-item {
	flex: 1;
}
.l-header .c-gnav .sub-menu .menu-item a,
.l-fixHeader .c-gnav .sub-menu .menu-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(0.8rem, 1vw, 1.2rem) clamp(1rem, 1.2vw, 1.5rem) !important;
	text-align: center;
	white-space: nowrap;
	border-radius: 12px;
	font-weight: 600;
	font-size: clamp(0.75rem, 0.9vw, 0.9rem);
	letter-spacing: 0.04em;
	transition: background 0.2s ease;
}
.l-header .c-gnav .sub-menu .menu-item a:hover,
.l-fixHeader .c-gnav .sub-menu .menu-item a:hover {
	background: var(--hb-bg-alt, #f5f4ef);
}
/* SWELL親テーマの .ttl left アニメーションを無効化 */
.l-header .c-gnav .sub-menu .ttl,
.l-fixHeader .c-gnav .sub-menu .ttl {
	left: 0 !important;
	transition: none !important;
}
/* サブメニュー内のアンダーラインは非表示 */
.l-header .c-gnav .sub-menu .menu-item a::after,
.l-fixHeader .c-gnav .sub-menu .menu-item a::after {
	display: none !important;
}
/* サブメニュー内の ::before（SWELL矢印アイコン）も非表示 */
.l-header .c-gnav .sub-menu .menu-item a::before,
.l-fixHeader .c-gnav .sub-menu .menu-item a::before {
	display: none !important;
}
/* SWELL の .sub-menu::before が角丸なしの白背景を被せるので、同じ角丸を適用 */
.l-header .c-gnav > .menu-item-has-children > .sub-menu::before,
.l-fixHeader .c-gnav > .menu-item-has-children > .sub-menu::before {
	border-radius: 16px !important;
}

/* ---- ヘッダーロゴを SVG に差し替え + ブランド名を右に並置 ----
   SWELL のテキストロゴ <h1 class="c-headLogo -txt"><a>サイト名</a></h1> を
   inline-flex にし、::before で SVG を、::after で「HUBRIDE［ハブライド］」を表示。
   元の <a> 内テキスト (サイトタイトル) は font-size:0 + color:transparent で隠す。 */
.c-headLogo.-txt .c-headLogo__link {
	display: inline-flex;
	align-items: flex-end;
	gap: 6px;
	font-size: 0;
	color: transparent;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}
.c-headLogo.-txt .c-headLogo__link::before {
	content: "";
	flex-shrink: 0;
	display: inline-block;
	width: clamp(80px, 9vw, 180px);
	height: clamp(40px, 4.5vw, 90px);
	background-image: url('../img/hubride-logo.svg');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}
.c-headLogo.-txt .c-headLogo__link::after {
	content: "車両販売｜車両買取｜PDR｜コーティング\AHUBRIDE［ハブライド］公式サイト";
	white-space: pre-line;
	flex-shrink: 0;
	display: inline-block;
	font-family: "Noto Sans JP", "Inter", sans-serif;
	font-size: clamp(8px, 0.7vw, 13px);
	font-weight: 600;
	color: #000000;
	letter-spacing: 0.08em;
	line-height: 1.15;
	padding-bottom: 0;
	margin-bottom: 0;
	transform: translateY(-3px);
}

/* 固定ヘッダー(スクロール時)は少し小さく */
.l-fixHeader .c-headLogo.-txt .c-headLogo__link {
	gap: 5px;
}
.l-fixHeader .c-headLogo.-txt .c-headLogo__link::before {
	width: clamp(80px, 9vw, 180px);
	height: clamp(40px, 4.5vw, 90px);
}
.l-fixHeader .c-headLogo.-txt .c-headLogo__link::after {
	font-size: clamp(8px, 0.7vw, 12px);
}

/* スマホ時のロゴ右のタグラインは2行許容 + 文言は中古車販売〜HUBRIDE まで */
@media (max-width: 600px) {
	.c-headLogo.-txt .c-headLogo__link {
		align-items: flex-end;
		gap: 8px;
		transform: translateX(-14px);
	}
	.c-headLogo.-txt .c-headLogo__link::before {
		width: 92px;
		height: 46px;
	}
	.c-headLogo.-txt .c-headLogo__link::after {
		content: "車両販売｜車両買取｜PDR｜コーティング\AHUBRIDE［ハブライド］公式サイト";
		display: inline-block;
		font-size: 7.5px;
		line-height: 1.45;
		letter-spacing: 0;
		padding-bottom: 0;
		white-space: pre-line;
		text-align: left;
		transform: translate(-14px, -1px);
	}
}

/* ---- スマホメニュー（ハンバーガー）のSWELLリセット ---- */
.p-spMenu__inner::before {
	background: #ffffff !important;
	opacity: 1 !important;
}
.p-spMenu {
	color: var(--hb-text) !important;
}
/* MENUヘッダーバー削除 */
.p-spMenu .c-widget__title.-spmenu {
	display: none !important;
}
/* メニューリンクのスタイル */
.p-spMenu .c-listMenu a {
	font-family: var(--hb-sans, "Noto Sans JP", sans-serif);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--hb-text) !important;
	padding: 1rem 1.5rem !important;
	border-bottom: 1px solid #f0f0f0 !important;
}
/* 矢印アイコン削除 */
.p-spMenu .c-listMenu a::before {
	display: none !important;
}
/* サブメニューのインデント＋スタイル */
.p-spMenu .c-listMenu .sub-menu a,
.p-spMenu .c-listMenu .children a {
	font-size: 0.9rem;
	font-weight: 500;
	padding-left: 2.5rem !important;
	color: var(--hb-text-sub) !important;
}
/* hover背景 */
.p-spMenu .c-listMenu a:hover {
	background: #f7f7f7 !important;
	padding-left: 1.5rem !important;
}
.p-spMenu .c-listMenu .sub-menu a:hover,
.p-spMenu .c-listMenu .children a:hover {
	padding-left: 2.5rem !important;
}
/* 閉じるボタン */
.p-spMenu .c-iconBtn.-menuBtn {
	color: var(--hb-text) !important;
}
/* オーバーレイ */
.p-spMenu__overlay {
	background: rgba(0, 0, 0, 0.4) !important;
}

/* ---- スマホ時のヘッダー配置を調整 ----
   - 検索アイコン(customBtn)を非表示
   - ロゴ左寄せ + ハンバーガーメニューを右端へ
   SWELL 既定は `.l-header__menuBtn { order: 1 }`（左端）/
   `.l-header__logo { order: 2; text-align: center }`（中央）なので上書きする。 */
@media (max-width: 959px) {
	.l-header__customBtn.sp_,
	.l-header__customBtn {
		display: none !important;
	}
	.l-header .l-header__logo,
	.l-fixHeader .l-fixHeader__logo {
		order: 1 !important;
		text-align: left !important;
		margin-right: auto !important;
	}
	.l-header__menuBtn,
	.l-header__menuBtn.sp_ {
		order: 2 !important;
		margin-left: 0 !important;
	}
}

/* ---- パンくずリスト ---- */
.p-breadcrumb {
	background: #f7f7f7 !important;
	box-shadow: none !important;
}

/* ---- フッター ポリシーリンク ---- */
.hubride-footer-policy {
	background: #1a1a1a;
	padding: 3rem 5%;
	text-align: center;
}
.hubride-footer-policy__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem 2.5rem;
	margin-bottom: 2rem;
}
.hubride-footer-policy__inner a {
	font-family: var(--hb-sans, "Noto Sans JP", sans-serif);
	font-size: clamp(0.75rem, 0.9vw, 0.9rem);
	font-weight: 500;
	color: #aaa;
	text-decoration: none;
	letter-spacing: 0.05em;
	transition: color 0.3s ease;
	opacity: 0;
	transform: translateY(10px);
}
.hubride-footer-policy.is-visible .hubride-footer-policy__inner a {
	animation: hubride-footer-fadein 0.6s ease forwards;
}
.hubride-footer-policy.is-visible .hubride-footer-policy__inner a:nth-child(1) { animation-delay: 0.1s; }
.hubride-footer-policy.is-visible .hubride-footer-policy__inner a:nth-child(2) { animation-delay: 0.25s; }
.hubride-footer-policy.is-visible .hubride-footer-policy__inner a:nth-child(3) { animation-delay: 0.4s; }
.hubride-footer-policy.is-visible .hubride-footer-policy__inner a:nth-child(4) { animation-delay: 0.55s; }
@keyframes hubride-footer-fadein {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.hubride-footer-policy__inner a:hover {
	color: #fff;
}
.hubride-footer-policy__copy {
	font-family: var(--hb-sans, "Inter", sans-serif);
	font-size: 0.7rem;
	color: #666;
	letter-spacing: 0.1em;
	margin: 0;
}

/* SP: ポリシーリンクは 2列 × 2行 の grid で左揃え。コピーライトは中央のまま。
   「反社会的勢力に対する基本方針」が最長ラベルで column 幅に収まらないため、
   font-size を絞り、白空 (nowrap) + 和文不可分 (keep-all) で崩れを防ぐ。 */
@media (max-width: 820px) {
	.hubride-footer-policy {
		text-align: left;
		padding: 2.5rem 1.5rem;
	}
	.hubride-footer-policy__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.9rem 0.8rem;
		justify-items: start;
	}
	.hubride-footer-policy__inner a {
		font-size: 0.68rem;
		letter-spacing: 0.01em;
		white-space: nowrap;
		word-break: keep-all;
		overflow-wrap: normal;
		min-width: 0;
	}
	.hubride-footer-policy__copy {
		text-align: center;
		margin-top: 1.5rem;
	}
}

/* ---- SWELLデフォルトフッター非表示 ---- */
.l-footer,
#footer {
	display: none !important;
}

/* ---- TOPへ戻るボタン非表示 ---- */
#pagetop {
	display: none !important;
}

/* ---- スマホ固定フッターCTA ---- */
.hubride-fixed-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 998;
	display: none;
	background: #ffffff;
	border-top: 1px solid #e5e5e5;
	padding: 6px;
	gap: 4px;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

/* スマホ固定フッターCTA — 現状は無効化中。
   バー非表示に合わせて body の下余白予約も撤去（白スペース対策）。
   再度有効化する場合は .hubride-fixed-footer を display: flex に戻し、
   body に padding-bottom: 72px を再設定する。 */
@media (max-width: 768px) {
	.hubride-fixed-footer {
		display: none;
	}
}

.hubride-fixed-footer__btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 10px 4px;
	min-height: 56px;
	text-decoration: none;
	color: #ffffff;
	font-family: var(--hb-sans, "Inter", "Noto Sans JP", sans-serif);
	transition: opacity 0.3s ease, transform 0.2s ease;
}
.hubride-fixed-footer__btn:hover,
.hubride-fixed-footer__btn:focus-visible {
	opacity: 0.9;
}
.hubride-fixed-footer__btn:active {
	transform: scale(0.97);
}

.hubride-fixed-footer__btn--line {
	background: #06c755;
}
.hubride-fixed-footer__btn--tel {
	background: #1a1a1a;
}
.hubride-fixed-footer__btn--contact {
	background: #1e5a8e;
}

.hubride-fixed-footer__icon {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hubride-fixed-footer__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.hubride-fixed-footer__label {
	font-size: 0.7rem;
	line-height: 1;
	letter-spacing: 0.04em;
}