@charset "UTF-8";

/* ==================================================================
   クロスハウス 追加スタイル（2026-09-09 新設）
   functions/xh-perf.php から読み込まれる。
   既存の stylesheet.css は変更しない（開発会社の作業と衝突させないため）。
   ================================================================== */

/* ------------------------------------------------------------------
   スマートフォン用 追従CTA（画面下に常時表示する問い合わせボタン）
   - 768px以下でのみ表示する（サイト全体のブレークポイントに合わせる）
   - 色・角丸は既存の banner__btn / cta__btn と同じ指定を使う
   - iPhone のホームインジケータに重ならないよう safe-area を確保する
   ------------------------------------------------------------------ */
.xh-sticky-cta {
	display: none;
}

@media screen and (max-width: 768px) {

	.xh-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 140; /* 既存の最大 z-index が 130 のため、その上に置く */
		display: flex;
		gap: 8px;
		padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .92);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
	}

	.xh-sticky-cta__btn {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;
		min-height: 48px; /* タップしやすい大きさを確保する */
		padding: 10px 8px;
		border-radius: 9999px;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	}

	.xh-sticky-cta__btn--contact {
		background: linear-gradient(180deg, #FF8721 0%, #EF6802 100%);
	}

	.xh-sticky-cta__btn--download {
		background: linear-gradient(180deg, #49A800 0%, #6EC929 100%);
	}

	.xh-sticky-cta__btn:active {
		filter: brightness(.94);
	}

	.xh-sticky-cta__btn .icon {
		display: flex;
		flex-shrink: 0;
		width: 18px;
	}

	.xh-sticky-cta__btn .icon svg {
		width: 100%;
		height: auto;
	}

	/* 追従バーがページ末尾の内容に重ならないように余白を足す */
	body.xh-has-sticky-cta {
		padding-bottom: 72px;
	}
}

/* 印刷時と、動きを減らす設定の端末では邪魔をしない */
@media print {
	.xh-sticky-cta {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
   ファーストビュー直下の問い合わせ／資料請求ボタンを出さない（2026-09-09）

   画面下の追従CTAで同じ導線が常時出るようになったため、重複を解消する。
   対象は「.banner__cta.-sp」＝スマートフォン専用に用意されている方のみ。
   PC用（.banner__main 直下の .banner__cta）はそのまま残す。
   ------------------------------------------------------------------ */
.banner__cta.-sp {
	display: none;
}

/* ------------------------------------------------------------------
   「こんな企業におすすめです」の見出しが 01〜04 のバッジと重なる件の修正

   .clients__number は position:absolute; top:-18px（PC）/ -24.4px（SP）で
   カードの上へはみ出す作りになっており、直前の見出しに下余白が無いため
   文字が重なって読めなくなっていた。見出し側に余白を確保する。
   ------------------------------------------------------------------ */
.home__clients .sec__heading {
	margin-bottom: 40px;
}

@media screen and (max-width: 768px) {

	.home__clients .sec__heading {
		margin-bottom: 48px;
	}
}

/* ------------------------------------------------------------------
   「その他650社を超える様々な業界の企業様にご利用いただいています」の
   スマートフォンでの改行位置を2行に整える（2026-09-09）

   元の home.php には <br class="sp_break"> が2つ入っており、
   450px以下で3行（「その他650社を超える」/「様々な業界の企業様に」/
   「ご利用いただいています」）に割れて読みにくかった。

   2つ目の改行だけを止めて次の2行にする:
     1行目「その他650社を超える」
     2行目「様々な業界の企業様にご利用いただいています」

   2行目は21文字あり元の文字サイズ(画面幅390pxで23.4px)では収まらないため、
   画面幅に対する比率で指定し直す。320〜449pxのすべての幅で2行に収まることを実測で確認済み。
   ※ 既存CSSが「@media (max-width:450px){ .sp_break{display:block!important} }」と
     !important で指定しているため、こちらも !important が必要。
   ------------------------------------------------------------------ */
.clients__notice br.sp_break:nth-of-type(2) {
	display: none !important;
}

@media screen and (max-width: 450px) {

	.clients__notice {
		font-size: 4.3vw !important;
		line-height: 1.5 !important;
	}

	.clients__notice .highlight {
		font-size: 5.0vw !important;
	}
}

/* ------------------------------------------------------------------
   「実際の物件を見る」ボタンを一旦出さない（2026-09-09・ユーザー指示）

   「こんな物件でコスト削減できます！」セクション末尾の導入事例へのリンク。
   HTMLからは削除せずCSSで隠しているだけなので、
   戻すときはこの指定を消せばよい。
   ------------------------------------------------------------------ */
.home__save .save__btn {
	display: none;
}

/* ------------------------------------------------------------------
   資料請求タブ（#download）へのアンカー着地位置を調整（2026-09-09）

   ヘッダーが固定表示（PC 80px / スマホ 70px）のため、
   そのままだとタブがヘッダーの裏に隠れる。
   ------------------------------------------------------------------ */
#download {
	scroll-margin-top: 100px;
}

@media screen and (max-width: 768px) {

	#download {
		scroll-margin-top: 88px;
	}
}

/* ------------------------------------------------------------------
   画像に width / height を書いたことへの対応（2026-09-09）

   home.php の <img> に実寸を書いて、読み込み前から場所を確保できるようにした。
   （遅延読み込みにしたことで、寸法が無いとページの高さが後から伸び、
     #contact / #download へのアンカーが正しい位置に着地しなかった）

   ただし width/height を書くと height 属性がそのまま高さになり縦横比が崩れるため、
   高さは縦横比から計算させる。目印として class="xh-ar" を付けてある。

   セレクタをクラス1つ（詳細度0,1,0）にとどめているので、
   CSS側で高さを指定している画像（.blog__img img など）はそちらが優先される。
   ------------------------------------------------------------------ */
.xh-ar {
	height: auto;
}

/* ------------------------------------------------------------------
   読み込み前に画像の場所を確保できない3箇所の対策（2026-09-09）

   これらの画像は width:100% で指定されているが、親要素の幅が
   「中身に合わせて決まる」作りのため、画像が読み込まれるまで幅が0になり、
   高さも0のままだった。結果、ページの高さが後から伸び、
   #contact / #download へのアンカーが正しい位置に着地しなかった。

   親側に幅を与えて、縦横比（width/height属性由来）から高さが決まるようにする。
   実測: PC・スマホ・768px のいずれでも、画像読み込みの前後で
         ページ高さの変化が 0px になることを確認済み。
   ------------------------------------------------------------------ */
.about__position,
.position__country {
	width: 100%;
}

.basnner__bg picture,
.benefit__img picture,
.work__paint picture,
.request__bg picture {
	display: block;
	width: 100%;
}

/* ------------------------------------------------------------------
   コラム一覧の絞り込み欄をスマートフォンで折りたたむ（2026-09-09）

   スマホでは絞り込み欄が845pxあり、記事が見えるまで1,357pxのスクロールが
   必要だった（原因は「悩みから探す」タグ7件が1行ずつ折り返されて331px占めていたこと）。

   ・カテゴリ4件は横1行のスクロールで常時表示（絞り込み導線を残すため）
   ・「悩みから探す」とフリーワード検索はボタンをタップして開く方式に
   実測: 絞り込み欄 845px → 220px、記事開始 y1,357px → y731px。
   PC（769px以上）は従来のまま変更しない。
   ------------------------------------------------------------------ */
.xh-filter-toggle {
	display: none;
}

@media screen and (max-width: 768px) {

	/* 既定で畳んでおく（JSで畳むと描画後にずれるため。実測CLS 0.27→0） */
	.blog__search .xh-collapsible {
		display: none;
	}

	.blog__search.xh-expanded .xh-collapsible {
		display: revert;
	}

	/* たたんでいる間は「カテゴリ」ラベルを省き、カードの余白も詰める */
	.blog__search .xh-cat-title {
		display: none;
	}

	.blog__search.xh-expanded .xh-cat-title {
		display: revert;
	}

	/* 2026-09-10 修正:
	   もとは「.blog__search .search__area で詰める → .xh-expanded 側で revert」
	   という書き方だったが、CSS の revert は「著者スタイルより前の値」に戻る
	   ＝ stylesheet.css の値ではなくブラウザ既定（padding 0 / gap normal）まで
	   戻ってしまい、開いたときに枠の上下の余白が消えていた。
	   :not(.xh-expanded) で「畳んでいる間だけ」上書きする形に変更し、
	   開いたときは stylesheet.css の指定がそのまま効くようにした。
	   併せて畳んだときの上下余白を *3 → *2 に詰めている。 */
	.blog__search:not(.xh-expanded) .search__area {
		gap: calc(var(--gap-unit)*2);
		padding-top: calc(var(--gap-unit)*2);
		padding-bottom: calc(var(--gap-unit)*2);
	}

	/* カテゴリは折り返さず横スクロールにする（カード端まで滑らせる） */
	.blog__search .xh-cat .search__category-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: calc(var(--gap-unit)*-2.5);
		margin-right: calc(var(--gap-unit)*-2.5);
		padding-left: calc(var(--gap-unit)*2.5);
		padding-right: calc(var(--gap-unit)*2.5);
	}

	.blog__search .xh-cat .search__category-list::-webkit-scrollbar {
		display: none;
	}

	.blog__search .xh-cat .search__category-item {
		flex: 0 0 auto;
	}

	.blog__search .xh-cat .search__category-link {
		white-space: nowrap;
	}

	.xh-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: calc(var(--gap-unit)*1.6) calc(var(--gap-unit)*2);
		border: 1px solid #0055AA;
		border-radius: 9999px;
		background: #fff;
		color: #0055AA;
		font-size: 1.4rem;
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
	}
}

/* ------------------------------------------------------------------
   一覧ページの見出し（英語名＋日本語名）をスマートフォンで横並びにする（2026-09-09）

   COLUMN／コラム、CASE／導入事例、DATA／資料一覧 が縦2段になっており、
   ファーストビューを余計に使っていた。横に並べて約45px詰める。
   実測（幅390px）: 見出しブロック コラム262→217px / 導入事例387→242px / 資料一覧362→267px
   ※PC（769px以上）は従来どおり縦2段のまま。
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

	.page__title {
		flex-direction: row;
		align-items: baseline;
		flex-wrap: wrap;
		gap: calc(var(--gap-unit)*1.5);
	}
}

/* ------------------------------------------------------------------
   導入事例ページの絞り込み条件をスマートフォンで折りたたむ（2026-09-09）

   絞り込みフォームが590pxあり、最初の事例が見えるまで1,082pxのスクロールが
   必要だった。コラム一覧と同じ方式でボタン開閉にする。
   ※PC（769px以上）は従来のまま。
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

	/* 既定で畳んでおく（JSで畳むと描画後にずれるため） */
	.works__filter .xh-collapsible {
		display: none;
	}

	.works__filter.xh-expanded .xh-collapsible {
		display: revert;
	}
}

/* ------------------------------------------------------------------
   資料一覧のカードにダウンロードボタンを表示する（2026-09-09）

   カード全体がリンクになっているが、見た目に手がかりが無く
   「押せる」ことが伝わっていなかった。
   ------------------------------------------------------------------ */
.data__btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: calc(var(--gap-unit)*1);
	margin-top: auto;
	padding: calc(var(--gap-unit)*1.6) calc(var(--gap-unit)*2);
	border-radius: 9999px;
	background: linear-gradient(180deg, #FF8721 0%, #EF6802 100%);
	color: #fff;
	font-size: var(--font-size16);
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	transition: filter .2s ease;
}

.data__btn::after {
	content: "";
	width: .6em;
	height: .6em;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	margin-left: .2em;
}

.data__item:hover .data__btn {
	filter: brightness(1.07);
}

.data__link:active .data__btn {
	filter: brightness(.94);
}

/* ==================================================================
   2026-09-10 追記分
   ================================================================== */

/* ------------------------------------------------------------------
   1) FV（ファーストビュー）が広いウィンドウで崩れるのを止める

   このサイトは html{font-size:0.625vw} で「画面幅に比例して全部が
   拡大縮小する」作り。ところが custom.css（開発会社）が FV の
   .banner__content / catch / title / intro / lang / btn にだけ
   ピクセルの max-width を掛けているため、1440px を超えると
   「箱は止まるのに文字と余白だけ大きくなり続ける」状態になる。

   実測（.banner__btn）: 1280px→200x46px / 1920px→225x69px /
   2560px→225x138px（文字が折り返し、矢印と衝突）。

   対処: 1440px 以上では FV の文字・余白も 1440px 時点の値で固定する。
   ここに書いてある px は「root font-size = 1440*0.00625 = 9px」で
   計算した値（--gap-unit = .8rem = 7.2px）。
   1440px 未満は現状のまま（正常に比例縮小している）。
   影響範囲は .banner__* のみ。ページの他の部分には触れていない。
   ------------------------------------------------------------------ */
@media screen and (min-width: 1440px) {

	/* 3.6rem / padding calc(--gap-unit*2.5) 0 */
	.banner__headline {
		font-size: 32.4px;
		padding-top: 18px;
		padding-bottom: 18px;
	}

	/* margin calc(--gap-unit*2.5) 0 calc(--gap-unit*3) */
	.banner__title {
		margin-top: 18px;
		margin-bottom: 21.6px;
	}

	/* margin calc(--gap-unit*2.5) 0 */
	.banner__lang {
		margin-top: 18px;
		margin-bottom: 18px;
	}

	/* gap calc(--gap-unit*3) */
	.banner__cta {
		gap: 21.6px;
	}

	/* font-size var(--font-size18)=1.8rem / gap calc(--gap-unit*1)
	   / padding calc(--gap-unit*1.8) */
	.banner__btn {
		font-size: 16.2px;
		gap: 7.2px;
		padding: 12.96px;
	}

	.banner__btn .icon {
		width: 19.8px;
	}

	/* right 2.5rem / width 1rem */
	.banner__btn .arrow {
		right: 22.5px;
		width: 9px;
	}
}

/* ------------------------------------------------------------------
   2) スマートフォンで CTA バナーの人物画像を出さない

   .cta__img は position:absolute で右下に重ねてあり、そのために
   .cta__content に padding-bottom: calc(--gap-unit*30) ＝ 375px 幅で
   225px の空きスペースが確保されている。
   画像を消すだけでは空白がそのまま残るので、余白も併せて詰める。
   PC（769px 以上）は一切変更しない。
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

	.cta__img {
		display: none;
	}

	/* 上下の余白を揃える（元は上 *4 / 下 *30） */
	.cta__content {
		padding-bottom: calc(var(--gap-unit)*4);
	}
}

/* ------------------------------------------------------------------
   3) コラム一覧・導入事例一覧の冒頭を詰める（スマートフォンのみ）

   ファーストビューに記事が少し覗くようにするため。
   - 「コラムを検索」の見出し行は FV に不要なので出さない
   - 検索枠の内側余白と、検索枠〜一覧の間の隙間を縮める
   PC は無変更。
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

	/* 「🔍 コラムを検索」の行（.blog__search の gap も一緒に消える） */
	.blog__search-title {
		display: none;
	}

	/* 検索枠の内側余白は、上の 2026-09-09 ブロックの
	   .blog__search:not(.xh-expanded) .search__area で *2 に詰めている。 */

	/* 検索枠と一覧の間（元は calc(--gap-unit*10) ＝ 375px 幅で 75px） */
	.page__blog .page__inner,
	.page__works .page__inner {
		gap: calc(var(--gap-unit)*3);
	}

	/* 「新着記事一覧」「導入事例 一覧」の見出しと本体の間（元は *5） */
	.blog__body,
	.works__body {
		gap: calc(var(--gap-unit)*3);
	}
}

/* ==================================================================
   2026-09-28 追記分
   コラム一覧・導入事例一覧の絞り込み欄を PC でも詰める

   PC（1440x900）で最初の記事が見えるまで コラム y1,167px／導入事例 y881px
   （カードの頭が画面下端にかかるだけ）で、一覧がファーストビューに入っていなかった。
   実測（1440x900）: コラム 最初の記事 y1,167→y644 ／ 導入事例 y881→y528
   スマホは 2026-09-09/10 の折りたたみで対応済みなので、ここは 769px 以上だけ。

   ・絞り込みは畳まずに常時表示のまま（PC は横幅があるので1行に収める）
   ・見出しを左、選択肢を右に並べる2列レイアウトにして縦の段数を減らす
   ・文字とボタンを小さくする（下限 12px。html{font-size:0.625vw} の比例縮小で
     小さい画面ほど読めなくなるのを防ぐ）
   ・検索枠〜一覧の間の余白を詰める
   ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {

	/* 見出しブロックと検索枠の間（元 50px） */
	.page__blog .hx10,
	.page__works .hx10 {
		height: calc(var(--gap-unit)*3);
	}

	/* 検索枠と一覧の間（元 *10） */
	.page__blog .page__inner,
	.page__works .page__inner {
		gap: calc(var(--gap-unit)*4);
	}

	/* 「新着記事一覧」「導入事例 一覧」の見出しと本体の間（元 *5） */
	.blog__body,
	.works__body {
		gap: calc(var(--gap-unit)*2.5);
	}

	/* ---------- コラム一覧 ---------- */

	.blog__search {
		gap: calc(var(--gap-unit)*1.5);
	}

	/* 「🔍 コラムを検索」の行は枠そのもので分かるので PC でも出さない（スマホと同じ） */
	.blog__search-title {
		display: none;
	}

	/* 見出し（左）＋選択肢（右）の2列。
	   .search__search を display:contents にして「フリーワード検索」の
	   ラベルと入力欄もそのまま同じ2列に乗せる */
	.search__area {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		column-gap: calc(var(--gap-unit)*3);
		row-gap: calc(var(--gap-unit)*1.4);
		align-items: center;
		padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*4);
	}

	.search__search {
		display: contents;
	}

	.search__title,
	.search__label {
		font-size: max(12px, 1.5rem);
		font-weight: 700;
		line-height: 1.4;
		align-self: start;
		padding-top: .35em;
	}

	.search__category-list {
		gap: calc(var(--gap-unit)*.8);
	}

	.search__category-link {
		font-size: max(12px, 1.35rem);
		padding: .35em .9em;
		line-height: 1.4;
	}

	.search__form {
		max-width: 520px;
	}

	.search__input {
		font-size: max(12px, 1.4rem);
		padding: .55em 1em;
	}

	.search__btn {
		padding: .55em 1.2em;
		font-size: max(12px, 1.4rem);
	}

	/* ---------- 導入事例一覧 ---------- */

	.works__filter-wrap {
		gap: calc(var(--gap-unit)*1.5);
		padding: calc(var(--gap-unit)*3) calc(var(--gap-unit)*4);
	}

	/* 「業種」を左、チェックボックスを右に */
	.filter__field {
		flex-direction: row;
		align-items: flex-start;
		gap: calc(var(--gap-unit)*3);
	}

	.filter__cap {
		flex: 0 0 auto;
		width: auto;
		font-size: max(12px, 1.5rem);
		line-height: 1.4;
	}

	/* 縦並びのときの区切り線（border-top）は横並びでは不要 */
	.filter__control {
		flex: 1 1 auto;
		padding: 0;
		border-top: 0;
		gap: calc(var(--gap-unit)*1.2) calc(var(--gap-unit)*2.2);
	}

	.filter__label {
		font-size: max(12px, 1.4rem);
		line-height: 1.4;
	}

	/* 「導入事例を探す」ボタンと「すべての条件を解除」を横並びに */
	.filter__submit {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: calc(var(--gap-unit)*3);
		margin-top: calc(var(--gap-unit)*2);
	}

	.filter__btn {
		padding: calc(var(--gap-unit)*1.2) calc(var(--gap-unit)*5);
		font-size: max(12px, 1.4rem);
	}

	.filter__reset {
		font-size: max(12px, 1.3rem);
	}
}