@charset "UTF-8";

/* =========================================
   追加・上書きCSS
   css/style.css（コンパイル済み・本番と差分あり）は編集せず、追加分はこのファイルに書く
   ブレイクポイントは既存に合わせる … SP: 〜767px / PC: 768px〜
========================================= */


/* -----------------------------------------
   共通: お知らせバー・固定ヘッダーと本文の重なり対策
   --notice-height / --header-bottom は js/custom.js が実測して上書きする。ここの値はJSが動く前・動かない時の目安
----------------------------------------- */

:root { /* sp: お知らせバー54px + ヘッダー57px */
	--notice-height: 54px;
	--header-bottom: 111px;
}

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

:root { /* pc（768〜949pxはメニュー3段） */
	--header-bottom: 201px;
}

}

@media screen and (min-width: 950px) {

:root { /* 950〜1099px（幅によりメニュー2〜3段） */
	--header-bottom: 231px;
}

}

@media screen and (min-width: 1100px) {

:root { /* 1100px以上（メニュー1〜2段） */
	--header-bottom: 189px;
}

}

/* SP: ヘッダーをお知らせバーの直下に付ける（header.php のインライン margin-top:65px だと11pxの隙間ができる） */
@media screen and (max-width: 767px) {

#notice ~ .l-body .l-header {
	margin-top: var(--notice-height) !important;
}

}

/* 下層ページ: パンくず・ページタイトルがヘッダーの裏に隠れないよう、ヘッダー下端から24px空ける */
.breadcrumbs {
	padding-top: calc(var(--header-bottom) + 24px);
}


/* -----------------------------------------
   共通: フッターメニュー
   768〜940px付近で「カスタマーポリシー（顧客対応に関する基本方針）」の行が画面からはみ出し、
   全ページで横スクロールが出ていたため、折り返しを許可する（広い画面では1行のまま）
----------------------------------------- */

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

.footer__navi .menu-footer-2-container .menu,
.footer__navi .menu-footer-3-container .menu { /* pc */
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	row-gap: 10px;
}

}


/* -----------------------------------------
   共通: ヘッダーメニュー（768〜949px）
   既存は幅380pxの3列グリッドで、項目が増えて4段（ヘッダー下端301px）になっていたため、
   950px以上と同じ横並び（右寄せ・折り返し）にして文字と間隔を詰める
----------------------------------------- */

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

.navi .menu { /* 768〜949px */
	width: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.navi .menu-item { /* 768〜949px */
	margin-left: 16px;
	text-align: left;
}

.navi .menu-item a { /* 768〜949px */
	display: block;
	padding: 10px 0;
	font-size: 1.2rem;
}

}


/* -----------------------------------------
   不動産白書（template-parts/block-platform.php、#factbook）
   2026年版からドバイ編・アブダビ編の2冊。表紙を2枚並べる（.platform__explain--books）
----------------------------------------- */

.platform__heading { /* sp: 見出しが2行になるので幅を広げ、文字を少し小さく */
	width: calc(100% - 32px);
	max-width: 360px;
	font-size: 1.6rem;
}

.platform__content { /* sp: 2行の見出しの下半分の分、上余白を広げる */
	padding-top: 60px;
}

.platform__explain__books {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start; /* 画像が横の文章の高さに引き伸ばされないように */
	-ms-flex-item-align: start;
	align-self: flex-start;
	width: 100%;
	max-width: 400px;
}

/* 表紙画像は左右に透明な余白（影）があるので、少し重ねて1冊ずつを大きく見せる */
.platform__explain__books img {
	width: 55%;
	height: auto;
}

.platform__explain__books img + img {
	margin-left: -12%;
}

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

.platform__heading { /* pc */
	width: 100%;
	max-width: 780px;
	font-size: 3rem;
}

.platform__content { /* pc */
	padding-top: 97px;
}

.platform__explain__books { /* pc */
	width: 45%;
	max-width: none;
	margin-right: 3%;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	-ms-flex-item-align: center;
	align-self: center; /* 文章に対して縦中央 */
}

.platform__explain--books .platform__explain__main { /* pc */
	width: 52%;
	margin-top: 0;
}

}


/* -----------------------------------------
   私たちについて（template-parts/block-entrust.php。トップ・おすすめ物件詳細で共通）
   2026-10に写真を日本チームの集合写真（横長 約4.8:1）に変更。
   PCの「左に写真・右に文章」だと写真が小さくなるので、写真をカード幅いっぱいにし、下に見出しと文章を置く
----------------------------------------- */

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

.entrust__image { /* sp: カードの左右の余白（32px）まで広げる */
	width: auto;
	margin-left: -32px;
	margin-right: -32px;
}

.entrust__image img { /* sp */
	display: block;
	width: 100%;
	height: auto;
}

}

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

.entrust__content { /* pc */
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 64px 6% 72px;
}

.entrust__image { /* pc */
	width: 100%;
	max-width: 960px;
	margin-bottom: 40px;
}

.entrust__image img { /* pc */
	display: block;
	width: 100%;
	height: auto;
}

.entrust__main { /* pc */
	width: 100%;
	max-width: 760px;
	margin-left: 0;
}

.entrust__heading { /* pc */
	text-align: center;
}

.entrust__text { /* pc */
	padding-left: 0;
}

}


/* -----------------------------------------
   トップページ KVバナー
   .mainvisual--has-banner … 表示するバナーがある時だけ付く。背景写真を薄くしてバナーを立たせる
   .kv-banner--slide       … バナーが2件以上の時だけ付く。スライド用の矢印・ページネーションを表示
----------------------------------------- */

.mainvisual--has-banner {
	height: auto;
	min-height: 620px;
	padding: 150px 16px 170px; /* 上: お知らせバー+ヘッダー分 / 下: キャッチコピー分 */
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* 背景写真を薄くするレイヤー（濃さは background の透明度で調整） */
.mainvisual--has-banner::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: rgba(246, 246, 246, 0.62);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.mainvisual--has-banner .mainvisual__inner {
	z-index: 1;
}

.kv-banner {
	position: relative;
	z-index: 1;
	width: 100%;
	-webkit-animation: kv-banner-in 0.8s ease 0.2s both;
	animation: kv-banner-in 0.8s ease 0.2s both;
}

.kv-banner__slider.swiper {
	-webkit-box-shadow: 0 18px 40px -12px rgba(9, 9, 43, 0.5);
	box-shadow: 0 18px 40px -12px rgba(9, 9, 43, 0.5);
	-webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kv-banner__link {
	display: block;
}

.kv-banner__link:focus-visible {
	outline: 3px solid #12A2DD;
	outline-offset: -3px;
}

.kv-banner__link img {
	display: block;
	width: 100%;
	height: auto;
}

/* スライド時の矢印（SPはスワイプで操作するので非表示） */
.kv-banner__prev,
.kv-banner__next {
	display: none;
}

/* スライド時のページネーション（既存のおすすめ物件スライダーと同じバー型） */
.kv-banner__pagination {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 14px;
	margin-top: 16px;
}

.kv-banner__pagination .swiper-pagination-bullet {
	width: 12px;
	height: 4px;
	margin: 0 1px;
	background: rgba(23, 23, 70, 0.3);
	border-radius: 0;
	opacity: 1;
	-webkit-transition: height 0.3s ease, background-color 0.3s ease;
	transition: height 0.3s ease, background-color 0.3s ease;
}

.kv-banner__pagination .swiper-pagination-bullet-active {
	height: 14px;
	background: #171746;
}

@-webkit-keyframes kv-banner-in {
	from {
		opacity: 0;
		-webkit-transform: translateY(16px);
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes kv-banner-in {
	from {
		opacity: 0;
		-webkit-transform: translateY(16px);
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@media (hover: hover) {

.kv-banner__slider.swiper:hover {
	-webkit-transform: translateY(-4px);
	transform: translateY(-4px);
	-webkit-box-shadow: 0 26px 50px -14px rgba(9, 9, 43, 0.6);
	box-shadow: 0 26px 50px -14px rgba(9, 9, 43, 0.6);
}

}

@media (prefers-reduced-motion: reduce) {

.kv-banner,
.kv-banner__slider.swiper {
	-webkit-animation: none;
	animation: none;
	-webkit-transition: none;
	transition: none;
}

}

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

/* 上余白 --kv-top = ヘッダー下端（js/custom.js が実測）+ 31px
   下余白 = キャッチコピー2行分（文字サイズ×行高3.5×2行 − はみ出し45px）＋ 間隔40px */
.mainvisual--has-banner { /* pc */
	--kv-top: calc(var(--header-bottom) + 31px);
	min-height: 723px;
	padding: var(--kv-top) 4% calc(clamp(1.8rem, 1.736vw, 2.5rem) * 7 - 5px);
}

/* 画面の高さに合わせて、KV全体がなるべく1画面に収まる幅にする（600〜960px） */
.kv-banner { /* pc */
	width: clamp(600px, calc((100vh - var(--kv-top) - 140px) * 1.9), 960px);
	max-width: 100%;
}

.kv-banner__prev,
.kv-banner__next { /* pc */
	position: absolute;
	top: 50%;
	z-index: 2;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: -39px; /* ページネーション分(30px)を除いた、バナーの縦中央 */
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #ffffff;
	-webkit-box-shadow: 0 4px 12px rgba(9, 9, 43, 0.2);
	box-shadow: 0 4px 12px rgba(9, 9, 43, 0.2);
	cursor: pointer;
	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

.kv-banner__prev { /* pc */
	left: -24px;
}

.kv-banner__next { /* pc */
	right: -24px;
}

.kv-banner__prev::after,
.kv-banner__next::after { /* pc */
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2px solid #171746;
	border-right: 2px solid #171746;
	-webkit-transition: border-color 0.3s ease;
	transition: border-color 0.3s ease;
}

.kv-banner__prev::after { /* pc */
	margin-left: 5px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.kv-banner__next::after { /* pc */
	margin-right: 5px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.kv-banner__prev:hover,
.kv-banner__next:hover { /* pc */
	background: #171746;
}

.kv-banner__prev:hover::after,
.kv-banner__next:hover::after { /* pc */
	border-color: #ffffff;
}

}