@charset "UTF-8";

/*
 * sept/css/style.css
 * sept 専用スタイル - common/css/style.css の上書き
 * すべてのルールは #sept スコープ内で定義し septproperties サイトに影響しない
 */

/* ===== CSS 変数 ===== */
#sept {
	--sp-gold:  #c9a96e;
	--sp-dark:  #1a1a1a;
	--sp-gray:  #f5f5f3;
	--sp-mid:   #888888;
}


/* ============================================================
   スライダー: フェードのみ（拡大なし）＋ パララックス固定
   ============================================================ */

/* フェードのみ・拡大なし（4枚 × 5s = 20s サイクル） */
@keyframes sp-hero-fade {
	0%   { opacity: 0; }
	5%   { opacity: 1; }   /* 1s でフェードイン */
	25%  { opacity: 1; }   /* 5s まで表示 */
	30%  { opacity: 0; }   /* 1s でフェードアウト */
	100% { opacity: 0; }
}

/* アニメーション上書き（拡大 transform を除去） */
#sept .header_slider > div {
	animation-name: sp-hero-fade;
	animation-duration: 20s;
}

#sept .header_slider > div:first-of-type  { animation-delay: 0s;  }
#sept .header_slider > div:nth-of-type(2) { animation-delay: 5s;  }
#sept .header_slider > div:nth-of-type(3) { animation-delay: 10s; }
#sept .header_slider > div:last-of-type   { animation-delay: 15s; }

/* パララックス: background-attachment: fixed で視差効果（z-index 問題なし） */
@media print, screen and (min-width:1024px) {
	#sept .header_slider > div {
		background-attachment: fixed;
	}
}


/* ============================================================
   ヒーロー グラデーションオーバーレイ
   ============================================================ */

#sept header::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top,    rgba(0,0,0,0.60) 0%,  transparent 50%),
		linear-gradient(to bottom, rgba(0,0,0,0.30) 0%,  transparent 28%),
		radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.25) 100%);
	z-index: 4;
	pointer-events: none;
}


/* ============================================================
   ヘッダー高さ
   ============================================================ */

#sept header {
	height: 100vh;
	max-height: 860px;
}

@media print, screen and (max-width:1023px) {
	#sept header {
		height: 100svh;
		max-height: 680px;
	}
}


/* ============================================================
   ヒーロー テキスト
   ============================================================ */

#sept .header_inner {
	position: absolute;
	inset: 0;
	height: auto !important;
	max-width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	filter: none;  /* filter があると子要素の position:fixed が機能しない */
	z-index: 5;
}

#sept .header_catch {
	font-family: "Noto Serif JP", serif;
	font-weight: 300;
	font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
	letter-spacing: 0.2em;
	line-height: 2;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0,0,0,0.7), 0 1px 6px rgba(0,0,0,0.5);
	margin-top: 1.5em;
}

#sept .header_catch span {
	display: block;
	font-size: 0.55em;
	letter-spacing: 0.35em;
	color: var(--sp-gold);
	font-family: "Lexend", sans-serif;
	font-weight: 300;
	margin-top: 0.4em;
	text-shadow: none;
}

/* SP: ヘッダー内オリジナルロゴ（白反転） */
#sept .header_logo img {
	filter: brightness(0) invert(1);
}


/* ============================================================
   PC 固定ロゴ (.sp-fixed-logo)
   body 直下に配置し filter 親コンテキストの影響ゼロ
   ============================================================ */

.sp-fixed-logo {
	display: none; /* SP では非表示 */
}

@media print, screen and (min-width:1024px) {
	.sp-fixed-logo {
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		left: 40px;
		height: 70px;
		z-index: 1002;
	}

	.sp-fixed-logo a {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.sp-fixed-logo img {
		width: 160px;
		height: auto;
		filter: brightness(0) invert(1);
		transition: opacity 0.3s;
	}

	.sp-fixed-logo img:hover {
		opacity: 0.65;
	}

	/* PC では header_inner 内の元ロゴを非表示 */
	#sept .header_inner .header_logo {
		display: none;
	}
}


/* ============================================================
   スライドインジケーター（線のみ・右下）
   ============================================================ */

/* 縦線・縦並び: 上から下へ伸びる */
@keyframes sp-ind-fill {
	0%    { height: 0%;   }
	25%   { height: 100%; }   /* 5s かけて上→下へ伸びる */
	25.5% { height: 0%;   }   /* 即リセット */
	100%  { height: 0%;   }
}

.sp-hero-indicators {
	position: absolute;
	right: 40px;
	bottom: 36px;
	z-index: 10;
	display: flex;
	flex-direction: column;  /* 縦並び */
	gap: 8px;
	pointer-events: none;
}

.sp-indicator {
	display: block;
	width: 2px;    /* 縦線: 細い */
	height: 32px;  /* 縦線: 縦長 */
	background: rgba(255, 255, 255, 0.28);
	position: relative;
	overflow: hidden;
}

.sp-indicator::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;           /* 上から下へ */
	background: #fff;
	animation: sp-ind-fill 20s linear infinite;
}

.sp-indicator:nth-child(1)::after { animation-delay: 0s;  }
.sp-indicator:nth-child(2)::after { animation-delay: 5s;  }
.sp-indicator:nth-child(3)::after { animation-delay: 10s; }
.sp-indicator:nth-child(4)::after { animation-delay: 15s; }

@media print, screen and (max-width:1023px) {
	.sp-hero-indicators {
		right: 20px;
		bottom: 24px;
	}
}


/* ============================================================
   グローバルナビ: PC（tapplanning スタイル）
   ============================================================ */

@media print, screen and (min-width:1024px) {

	#sept .sp_menubtn {
		display: none;
	}


	/* ナビ wrapper: fixed・透明・全幅 */
	#sept .globalnavi_wrapper {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		height: 70px;
		background: transparent;
		z-index: 1000;
		transition: background 0.45s;
		pointer-events: auto;
		opacity: 1;
	}

	/* スクロール後: 半透明ダーク */
	#sept .globalnavi_wrapper.sp-scrolled {
		background: rgba(12, 12, 12, 0.88) !important;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
	}

	#sept .globalnavi {
		background: transparent !important;
		height: 100%;
	}

	/* メニュー: 右揃え */
	#sept .globalmenu {
		height: 100%;
		justify-content: flex-end;
		align-items: center;
		padding-right: 40px;
	}

	/* 区切り線なし */
	#sept .globalmenu li:not(:first-of-type) {
		border-left: none !important;
	}

	/* メニュー各リンク */
	#sept .globalmenu li a {
		height: 70px;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		color: #fff;
		font-family: "Lexend", sans-serif;
		font-size: 1.15rem;
		font-weight: 300;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		background: transparent;
		transition: opacity 0.3s;
	}

	#sept .globalmenu li a:hover {
		background: transparent !important;
		color: #fff;
		opacity: 0.55;
	}

	/* 日本語サブテキスト: 極小・半透明 */
	#sept .globalmenu li a span {
		display: block;
		font-size: 0.65rem;
		letter-spacing: 0.06em;
		color: rgba(255, 255, 255, 0.45) !important;
		font-family: "Noto Serif JP", serif;
		font-weight: 300;
		text-transform: none;
		transition: none;
	}

	#sept .globalmenu li a:hover span {
		color: rgba(255, 255, 255, 0.45) !important;
	}

	/* SP 専用項目は PC 非表示 */
	#sept .globalmenu li.sp_b {
		display: none;
	}
}


/* ============================================================
   グローバルナビ: SP
   ============================================================ */

@media print, screen and (max-width:1023px) {
	#sept .sp_menubtn {
		background: transparent;
		filter: drop-shadow(0 0 2px rgba(0,0,0,.7));
	}
	#sept .sp_menubtn span {
		height: 2px;
	}
	#sept .sp_menubtn span:nth-of-type(1) {
        top: 12px;
    }
	#sept .sp_menubtn span:nth-of-type(2) {
        top: 22px;
    }
	#sept .sp_menubtn span:nth-of-type(3) {
        bottom: 12px;
    }
	#sept .sp_menubtn.active span {
        background: #FFF;
    }
	#sept .globalmenu li a span {
		color: var(--sp-gold);
	}
}


/* ============================================================
   セクション共通
   ============================================================ */

#sept section:nth-of-type(even) {
	background: var(--sp-gray);
}

#sept .section_inner {
	padding: 90px 0;
}

@media print, screen and (max-width:1023px) {
	#sept .section_inner {
		padding: 60px 0;
	}
}

/* セクションタイトル */
#sept .section_title {
	font-family: "Lexend", sans-serif;
	font-size: clamp(2.4rem, 1.6rem + 2vw, 4rem);
	font-weight: 100;
	letter-spacing: 0.35em;
	color: var(--sp-dark);
	margin-bottom: 4px;
}

@media print, screen and (max-width:1023px) {
	#sept .section_title {
		font-size: 2.8rem;
		letter-spacing: 0.1em;
	}
}

#sept .section_title span {
	display: block;
	font-size: 0.28em;
	font-family: "Noto Serif JP", serif;
	font-weight: 400;
	letter-spacing: 0.3em;
	color: var(--sp-mid);
	margin-top: 14px;
}

/* ゴールドアクセントライン: 共通ベース */
#sept .section_title::after,
#sept #top_link_block h3::after {
	content: '';
	display: block;
	width: 100px;
	height: 1px;
	background: var(--sp-gold);
}

/* 個別調整 */
#sept .section_title::after {
	margin: 15px auto 40px;
}

#sept #top_link_block h3::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}


/* ============================================================
   ボタン
   ============================================================ */

#sept .btn a,
#sept .btn input {
	background: transparent;
	color: var(--sp-dark);
	border: 1px solid var(--sp-dark);
	font-family: "Lexend", sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 0.15em;
	width: 280px;
	height: 52px;
	line-height: 52px;
	transition: background 0.4s, color 0.4s;
}

#sept .btn a:hover {
	background: var(--sp-dark);
	color: #fff;
}


/* ============================================================
   TOP PROFILE: PC 2カラム
   ============================================================ */

#sept #top_profile {
	background: #fff;
}

/* ── 共通（SP含む） ── */
#sept #top_profile .title {
	font-family: "Noto Serif JP", serif;
	font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem);
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 1.9;
	color: var(--sp-dark);
	position: relative;
}
#sept #top_profile .title img {
	margin-top: 20px;
}
#sept #top_profile .txt {
	color: #555;
	line-height: 2.4;
	font-size: clamp(1.3rem, 1.1rem + 0.3vw, 1.48rem);
	font-weight: 300;
}
#sept #top_profile .txt .img_wrapper {
	margin-top: 10px;
}
#sept #top_profile .txt .img_wrapper img {
	width: calc(50% - 5px);
}
#sept #top_profile .txt .img_wrapper img + img {
	margin-left: 10px;
}
/* ── PC: 2カラムグリッド ── */
@media print, screen and (min-width:1024px) {
	#sept #top_profile .section_inner {
		display: grid;
		grid-template-columns: 5fr 7fr;
		grid-template-areas:
			"title txt"
			"title btn";
		column-gap: 80px;
		align-items: start;
		padding: 100px 0;
	}

	/* 左カラム: 装飾ラベル ＋ 見出し */
	#sept #top_profile .title {
		grid-area: title;
		text-align: left;
		margin: 0;
		padding: 0;
		align-self: center;
	}

	/* 大きな装飾ラベル "MESSAGE" */
	#sept #top_profile .title::before {
		content: 'MESSAGE';
		display: block;
		font-family: "Lexend", sans-serif;
		font-size: clamp(5rem, 4rem + 3vw, 9rem);
		font-weight: 100;
		letter-spacing: 0.12em;
		color: rgba(0, 0, 0, 0.055);
		line-height: 1;
		margin-bottom: 28px;
		margin-left: -3px; /* 視覚的な左揃え補正 */
	}

	/* 右カラム: 本文 */
	#sept #top_profile .txt {
		grid-area: txt;
		margin: 0 0 0 0;
		padding-left: 48px;
		border-left: 1px solid rgba(0,0,0,0.1);
		align-self: start;
		padding-top: 8px;
	}

	/* 右カラム: ボタン（左揃え） */
	#sept #top_profile .btn {
		grid-area: btn;
		margin: 0 auto;
	}

	#sept #top_profile .btn a {
		margin: 32px 0 0 0; /* 自動センタリングを解除 */
	}
}

/* ── SP: 縦積み・センター ── */
@media print, screen and (max-width:1023px) {
	#sept #top_profile .section_inner {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#sept #top_profile .title {
		text-align: center;
		margin: 0 auto 48px;
		padding-bottom: 20px;
	}

	#sept #top_profile .title::before {
		content: none;
	}

	#sept #top_profile .txt {
		max-width: 100%;
		margin: 0 auto 36px;
		text-align: left;
	}
}


/* ============================================================
   TOP LINK BLOCK
   ============================================================ */

#sept #top_link_block {
	background: var(--sp-dark);
}

#sept #top_link_block h3 {
	font-family: "Noto Serif JP", serif;
	font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
	font-weight: 300;
	letter-spacing: 0.15em;
	color: #fff;
	text-align: center;
	margin: 0 auto 60px;
	padding-bottom: 28px;
	position: relative;
}


#sept #top_link_block h3 span {
	color: var(--sp-gold);
}

#sept #top_link_block ul li {
	overflow: hidden;
	position: relative;
	background: #111;
}

#sept #top_link_block .link_img {
	overflow: hidden;
}

#sept #top_link_block .link_img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	opacity: 0.78;
	transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
}

#sept #top_link_block ul li:hover .link_img img {
	transform: scale(1.08);
	opacity: 0.55;
}

/* カードタイトル下のアクセントライン */
#sept #top_link_block .title {
	background: transparent;
	color: #fff;
	font-family: "Lexend", sans-serif;
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-align: center;
	padding: 22px 16px 10px;
	transition: color 0.35s;
	position: relative;
}

#sept #top_link_block .title::after {
	content: '';
	display: block;
	width: 0;
	height: 1px;
	background: var(--sp-gold);
	margin: 10px auto 0;
	transition: width 0.4s ease;
}

#sept #top_link_block ul li:hover .title {
	color: var(--sp-gold);
}

#sept #top_link_block ul li:hover .title::after {
	width: 32px;
}

#sept #top_link_block .txt {
	color: #ddd;
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	text-align: center;
	padding: 0 16px 30px;
	line-height: 1.8;
}

@media print, screen and (min-width:1024px) {
	#sept #top_link_block ul {
		gap: 2px;
	}

	#sept #top_link_block ul li {
		width: calc(100% / 3 - 2px);
	}
}

/* ============================================================
   LA OCASIÓN: ベントグリッドギャラリー（トップページ専用）
   ============================================================ */

/* グリッド: 左に大きいHEROカード + 右に2×2 */
.top_loc-grid {
    display: grid !important;
    flex-wrap: unset;
    grid-template-columns: 1.8fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 4px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 40px;
}

/* 共通カード */
.top_loc-card {
    position: relative;
    overflow: hidden;
    background: #111;
    margin: 0 !important;
    width: auto !important;
    font-size: initial;
}

/* 左大カード: 2行分 */
.top_loc-card--hero {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* 画像コンテナ */
.top_loc-card__img {
    width: 100%;
    height: 100%;
}

.top_loc-card__img a {
    display: block;
    width: 100%!important;
    height: 100%;
    overflow: hidden;
}

.top_loc-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s;
}

.top_loc-card:hover .top_loc-card__img img {
    transform: scale(1.07);
    filter: brightness(0.65);
}

/* グラデーションオーバーレイ */
.top_loc-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.12) 50%,
        transparent 75%
    );
    pointer-events: none;
    z-index: 1;
}

/* HEROカード テキストブロック */
.top_loc-card__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.top_loc-card__title {
    position: absolute;
    bottom: 20px;
    left: 18px;
    right: 18px;
}

.top_loc-card__name {
    font-size: 1.7rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin: 0 0 6px;
}

.top_loc-card__sub {
    font-family: "Lexend", sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.16em;
    margin: 0;
}

/* 連番カウント */
.top_loc-card__count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-family: "Lexend", sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.12em;
    z-index: 2;
}

/* ── SP レスポンシブ ── */
@media print, screen and (max-width: 1023px) {
    .top_loc-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 130px 130px;
    }

    .top_loc-card--hero {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .top_loc-card__name {
        font-size: 1.5rem;
    }
}

@media print, screen and (max-width: 480px) {
    .top_loc-grid {
        grid-template-rows: 160px 110px 110px;
    }

    .top_loc-card__name {
        font-size: 1.3rem;
    }
}




/* ============================================================
   LA OCASIÓN: ベントグリッドギャラリー(9枚)
   ============================================================ */

#sept .loc-grid {
    display: grid !important;
    flex-wrap: unset;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    aspect-ratio: 491 / 361;
    gap: 4px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 40px;
}

/* 共通カード */
#sept .loc-card {
    position: relative;
    overflow: hidden;
    background: #111;
    margin: 0 !important;
    width: auto !important;
    font-size: initial;
}

/* 1: 列1 / 行1-2(縦長大) */
#sept .loc-card--1 {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* 2: 列2 / 行1 */
#sept .loc-card--2 {
    grid-column: 2;
    grid-row: 1;
}

/* 3: 列2 / 行2 */
#sept .loc-card--3 {
    grid-column: 2;
    grid-row: 2;
}

/* 4: 列3 / 行1-2(縦長大) */
#sept .loc-card--4 {
    grid-column: 3;
    grid-row: 1 / 3;
}

/* 5: 列1 / 行3 */
#sept .loc-card--5 {
    grid-column: 1;
    grid-row: 3;
}

/* 6: 列1 / 行4 */
#sept .loc-card--6 {
    grid-column: 1;
    grid-row: 4;
}

/* 7: 列2 / 行3-4(縦長大) */
#sept .loc-card--7 {
    grid-column: 2;
    grid-row: 3 / 5;
}

/* 8: 列3 / 行3 */
#sept .loc-card--8 {
    grid-column: 3;
    grid-row: 3;
}

/* 9: 列3 / 行4 */
#sept .loc-card--9 {
    grid-column: 3;
    grid-row: 4;
}

/* 画像コンテナ */
#sept .loc-card__img {
    width: 100%;
    height: 100%;
}

#sept .loc-card__img a {
    display: block;
    width: 100% !important;
    height: 100%;
    overflow: hidden;
}

#sept .loc-card__img img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    display: block;
    transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s;
}

#sept .loc-card:hover .loc-card__img img {
    transform: scale(1.07);
    filter: brightness(0.65);
}

/* グラデーションオーバーレイ */
#sept .loc-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.12) 50%,
        transparent 75%
    );
    pointer-events: none;
    z-index: 1;
}

/* HEROカード テキストブロック */
#sept .loc-card__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

#sept .loc-card__title {
    position: absolute;
    bottom: 2.5%;
    left: 0;
    right: 0;
}

#sept .loc-card__name {
    font-size: 1.7rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.06em;
    line-height: 1.5;
    margin: 0 0 6px;
}

#sept .loc-card__sub {
    font-family: "Lexend", sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.16em;
    margin: 0;
}

/* 連番カウント */
#sept .loc-card__count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-family: "Lexend", sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.12em;
    z-index: 2;
}

/* ── SP レスポンシブ ── */
@media print, screen and (max-width: 1023px) {
    #sept .loc-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: repeat(4, 1fr);
        aspect-ratio: 1 / 1;
    }

    #sept .loc-card__name {
        font-size: 1.5rem;
    }
}

@media print, screen and (max-width: 480px) {
    #sept .loc-card__name {
        font-size: 1.3rem;
    }
}





/* ============================================================
   TOP PROPERTIES: 画像正方形 + タイトル・エリア画像上オーバーレイ
   ============================================================ */

#sept #top_properties {
	background: var(--sp-gray);
}

#sept .properties div.content.la-ocasion_before {
	flex-wrap: nowrap;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 50px;
}
#sept .properties div.content.la-ocasion_before > div {
	width: calc(100% / 5 - 4px);
	border-radius: 50%;
	overflow: hidden;
}
#sept .properties div.content.la-ocasion_before > div + div {
	margin-left: 5px;
}

/* グリッドレイアウト: PC 5列・SP 2列、均一ギャップ */
#sept .properties div.content:last-of-type {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	gap: 5px;
	align-items: start;
}
@media print, screen and (max-width:1023px) {
	#sept .properties div.content {
		grid-template-columns: repeat(3, 1fr)!important;
	}
}

/* カード: 共通 CSS の flex 由来の width / margin をリセット */
#sept .properties div.content ul {
	width: 100% !important;
	margin: 0 !important;
	background: #000;
	overflow: hidden;
	transition: box-shadow 0.5s, transform 0.5s;
	box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}

#sept .properties div.content ul:hover {
	box-shadow: 0 16px 48px rgba(0,0,0,0.22);
	transform: translateY(-4px);
}

/* 画像: 正方形固定 */
#sept .properties div.content ul img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	opacity: 1 !important;
	transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s;
}

#sept .properties div.content ul:hover img {
	transform: scale(1.07);
	opacity: 0.72 !important;
}

/* グラデーションオーバーレイ（画像下部を暗くしてテキストを見やすく） */
#sept .properties div.content ul::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.18) 42%,
		transparent 65%
	);
	pointer-events: none;
	z-index: 1;
	transition: opacity 0.5s;
}

#sept .properties div.content ul:hover::after {
	opacity: 0.88;
}
#sept .properties p {
	text-align: center;
	margin: 20px auto;
}
#sept .properties p.before-after_ttl {
    color: #FFF;
    letter-spacing: .25em;
    margin: 20px auto;
    background: var(--sp-dark);
    width: fit-content;
    padding: 2px 20px;
}
#sept .properties p.other_ttl {

}
#sept .properties h3.builname {
    font-size: clamp(2rem, 1.6rem + 2vw, 3.5rem);
    font-weight: 500;
	text-align: center;
}

/* カテゴリバッジ: 半透明グラス */
#sept .properties .category {
	background: rgba(15, 15, 15, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: "Lexend", sans-serif;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	padding: 4px 10px;
	z-index: 3;
}

/* タイトル: 画像上にオーバーレイ */
#sept .properties .title {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	padding: 0 12px;
	color: #fff !important;
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.35;
	z-index: 2;
	margin: 0;
}

/* エリア: タイトル下にオーバーレイ */
#sept .properties .area {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	padding: 0 12px;
	color: rgba(255, 255, 255, 0.58);
	font-size: 1.0rem;
	font-family: "Lexend", sans-serif;
	font-weight: 300;
	letter-spacing: 0.12em;
	z-index: 2;
	margin: 0;
	pointer-events: none;
}


/* ============================================================
   TOP TOPICS
   ============================================================ */

#sept #top_topics {
	background: #fff;
}

#sept #top_topics .section_inner {
	max-width: 840px;
}

#sept #top_topics dl {
	padding: 22px 0 22px 18px;
	border-top: 1px solid #e8e8e6;
	border-left: 2px solid transparent;
	justify-content: flex-start;
	transition: border-left-color 0.35s;
}

#sept #top_topics dl:hover {
	border-left-color: var(--sp-gold);
}

#sept #top_topics dl + dl {
	border-top: 1px solid #e8e8e6;
	margin-top: 0;
}

#sept #top_topics dl dt {
	color: var(--sp-mid);
	font-family: "Lexend", sans-serif;
	font-size: 1.25rem;
	font-weight: 300;
	letter-spacing: 0.05em;
}

#sept #top_topics dl dt i {
	color: var(--sp-gold);
	font-size: 0.75rem;
}

#sept #top_topics dl dd {
	color: #444;
	line-height: 1.9;
	font-size: 1.35rem;
}

#sept #top_topics dl dd a {
	color: var(--sp-gold);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

@media print, screen and (min-width:1024px) {
	#sept #top_topics dl dt {
		width: 11em;
		flex-shrink: 0;
	}

	#sept #top_topics dl dd {
		width: calc(100% - 11em);
	}
}

@media print, screen and (max-width:1023px) {
	#sept #top_topics dl dt,
	#sept #top_topics dl dd {
		width: 100%;
	}

	#sept #top_topics dl dd {
		padding-left: 0;
		margin-top: 6px;
	}
}

/* ============================================================
   COMPANY TOPICS
   ============================================================ */
#sept #company_profile .txt, #sept #business_content p {
	text-align: left;
	line-height: 2;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

/* ============================================================
   フッター: craftcorp.jp インスパイア
   左: ロゴ・会社情報  右: CONTENTSラベル＋ナビ（3列）
   ============================================================ */

/* ベース: ウォームダークグレー ＋ CSS Grid */
#sept footer {
	background: #383838 !important;
	display: grid;
	grid-template-areas:
		"info nav"
		"bnr  bnr"
		"copy copy";
	grid-template-columns: 38% 62%;
}

/* ─── 左カラム: 会社情報 ─── */
#sept .footer_info {
	grid-area: info;
	text-align: left;
	padding: 64px 48px 52px 64px;
	border-top: none;
	border-bottom: none;
}

#sept .footer_info .footer_logo {
	margin: 0 0 36px;
}

#sept .footer_info .footer_logo img {
	max-width: 200px;
	margin: 0 0 14px;
}

#sept .footer_info .footer_logo p {
	color: rgba(255,255,255,0.4);
	font-size: 1.1rem;
	letter-spacing: 0.25em;
	margin-top: 0;
}

#sept .footer_address {
	color: rgba(255,255,255,0.62);
	font-size: 1.25rem;
	line-height: 2.1;
	margin-bottom: 0;
}

#sept .footer_address .tel {
	font-size: 1.9rem;
	margin-top: 20px;
}

#sept .footer_address .tel a {
	color: var(--sp-gold);
	transition: opacity 0.3s;
}

#sept .footer_address .tel a:hover {
	opacity: 0.75;
}

#sept .footer_address .tel i {
	font-size: 0.7em;
	color: var(--sp-gold);
	margin-right: 0.4em;
}

/* ─── 右カラム: ナビゲーション ─── */
#sept .footer_nav {
	grid-area: nav;
	padding: 64px 64px 52px 52px;
	margin: 0;
	display: block !important;
}

/* 「CONTENTS」ラベル */
#sept .footer_nav::before {
	content: 'CONTENTS';
	display: block;
	font-family: "Lexend", sans-serif;
	font-size: 0.9rem;
	font-weight: 300;
	letter-spacing: 0.45em;
	color: rgba(255,255,255,0.32);
	margin-bottom: 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* 3列グリッド */
#sept .footer_nav ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px 12px;
	width: 100%;
	margin: 0;
	font-size: 0; /* inline-block 用途のリセット */
}

#sept .footer_nav ul li {
	border-left: none;
	margin: 0;
	padding: 0;
}

#sept .footer_nav ul li + li {
	border-left: none;
}

/* リンク */
#sept .footer_nav ul li a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,0.68);
	font-family: "Noto Serif JP", serif;
	font-size: 1.3rem;
	font-weight: 300;
	letter-spacing: 0.05em;
	transition: color 0.3s;
	padding: 10px 0;
	width: 100%;
}

/* 「—」プレフィックス */
#sept .footer_nav ul li a::before {
	content: '—';
	font-family: "Lexend", sans-serif;
	font-size: 1.0rem;
	color: rgba(255,255,255,0.22);
	flex-shrink: 0;
	transition: color 0.3s;
	letter-spacing: 0;
}

#sept .footer_nav ul li a:hover {
	color: var(--sp-gold);
}

#sept .footer_nav ul li a:hover::before {
	color: var(--sp-gold);
}

/* ─── 下部バー: バナーリンク ─── */
#sept .footer_bnr_block {
	grid-area: bnr;
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 22px 64px;
	border-top: 1px solid rgba(255,255,255,0.08);
	text-align: left;
}

#sept .footer_bnr_block h3 {
	font-family: "Lexend", sans-serif;
	font-size: 1.0rem;
	font-weight: 300;
	letter-spacing: 0.3em;
	color: rgba(255,255,255,0.3);
	margin: 0;
	flex-shrink: 0;
}

#sept .footer_bnr_block ul {
	border: none;
	padding: 0;
	width: 100%;
}
#sept .footer_bnr_block ul li span {
	display: block;
	font-size: small;
	margin-top: 10px;
	text-align: center;
	letter-spacing: .05em;
}
#sept .footer_bnr_block ul li img {
	height: auto;
	width: 100%;
	max-width: 140px;
	padding: 0;
}

#sept .footer_bnr_block ul li img:hover {
	opacity: .8;
}

/* ─── コピーライト ─── */
#sept .copyright {
	grid-area: copy;
	text-align: left;
	padding: 18px 64px;
	border-top: 1px solid rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.28) !important;
	font-family: "Lexend", sans-serif;
	font-size: 1.0rem;
	font-weight: 300;
	letter-spacing: 0.12em;
}

#sept .copyright a {
	color: rgba(255,255,255,0.28);
	transition: color 0.3s;
}

#sept .copyright a:hover {
	color: var(--sp-gold);
}

/* ─── SP: 縦積みに戻す ─── */
@media print, screen and (max-width:1023px) {
	#sept footer {
		grid-template-columns: 100%;
	}

	#sept .footer_info {
		padding: 40px 24px 36px;
		border-right: none;
		text-align: center;
	}

	#sept .footer_info .footer_logo img {
		margin: 0 auto 14px;
	}

	#sept .footer_bnr_block {
		flex-direction: column;
		align-items: center;
		padding: 24px;
		gap: 16px;
	}

	#sept .footer_nav {
		display: none !important;
	}

	#sept .copyright {
		text-align: center;
		padding: 18px 24px;
	}
}


/* ============================================================
   フェードイン
   ============================================================ */

#sept .fadeUp {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}

#sept .fadeUp.active {
	opacity: 1;
	transform: translateY(0);
}


/* ============================================================
   サブページ: ヘッダー高さ（非トップページ）
   ============================================================ */

body#sept:not(.home) header {
	height: 300px;
	max-height: 300px;
}

@media print, screen and (max-width:1023px) {
	body#sept:not(.home) header {
		height: 200px;
		max-height: 200px;
	}
}


/* ============================================================
   サブページ: インジケーター非表示
   ============================================================ */

body#sept:not(.home) .sp-hero-indicators {
	display: none;
}


/* ============================================================
   サブページ: administration ヘッダー背景（未定義クラス補完）
   ============================================================ */

body#sept.administration header {
	background-image: url(../img/properties_header.webp);
}


/* ============================================================
   オレンジ除去: common_page / company_profile タイトル
   style.css の color: var(--color-accent) = #ff5a00 を上書き
   ============================================================ */

#sept .common_page h3.title,
#sept #company_profile h3.title {
	color: var(--sp-dark);
	/* border-bottom-color: var(--sp-gold); */
	border: none;
}

#company_overview img {
	margin-left: 5px;
}
#sept #company_overview img {
	max-width: 350px;
}
.company_overview-slider { overflow: hidden; width: 100%; padding: 20px 0; }
.company_overview-track { display: flex; width: max-content; animation: scroll 25s linear infinite; }
.company_overview-track img { width: 300px; margin-right: 20px; border-radius: 12px; flex-shrink: 0; }
/* 無限スクロール */ 
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* renovation の case タイトル */
#sept #case .contents .title {
	color: var(--sp-dark);
}


/* ============================================================
   オレンジ除去: 物件詳細 info_area タイトル
   ============================================================ */

#sept .info_area .title {
	color: var(--sp-dark);
}


/* ============================================================
   オレンジ除去: タブ切替
   ============================================================ */

#sept .tab-btn a {
	background-color: #e0e0e0;
	color: #555;
}

#sept .tab-btn a.is-active {
	background: var(--sp-dark);
	color: #fff;
}


/* ============================================================
   オレンジ除去: FAQ Q ボタン
   ============================================================ */

#sept #faq dl dt::before {
	background: var(--sp-dark);
}


/* ============================================================
   オレンジ除去: 経営理念 philosophy
   ============================================================ */

#sept #philosophy ul li figure::before {
	background: rgba(26, 26, 26, 0.75);
}

#sept #philosophy ul li p span {
	color: var(--sp-dark);
	border-bottom-color: var(--sp-gold);
}


/* ============================================================
   オレンジ除去: SP ハンバーガーボタン active 状態
   style.css: .sp_menubtn.active { background: #FFF; }
              .sp_menubtn.active span { background: var(--color-fg); } ← orange
   ============================================================ */

@media print, screen and (max-width:1023px) {
	#sept .sp_menubtn.active {
		background: transparent;
	}

	/* SP 絞り込みカテゴリ current */
	#sept .refinement_categories ul li.current a:link,
	#sept .refinement_categories ul li.current a:visited {
		background: var(--sp-dark);
	}
}