@charset "UTF-8";
/* ==========================================================================
   jiko-lower-variety.css
   下層9ページ(事故物件・孤独死・ゴミ屋敷・再建築不可・共有持分・借地権・
   底地・相続不動産・買取全般)のデザイン差別化用スタイル。

   方針:
   - style.css / jiko-detail-sp.css は改変しない(差分レビューを容易にするため)
   - 既存の --jiko-key / --jiko-gold / --jiko-bg-soft / --jiko-line トークンを
     ベースに、ページ種別ごとの --jiko-accent のみ切り替える
   - 新規追加する主要コンポーネントは .jiko-feature-visual のみ
   ========================================================================== */

/* --------------------------------------------------------------------
   1. ページ種別ごとのアクセントカラー
   ブランドの世界観(ネイビー×ベージュ×ゴールド)を崩さない範囲で、
   物件種別ごとに近縁色をあてて識別性を出す。
   -------------------------------------------------------------------- */
body.page-jiko-baikyaku          { --jiko-accent: var(--jiko-key); }      /* 事故物件: 基準色(ネイビー) */
body.page-kodokushi-baikyaku     { --jiko-accent: #3A3A63; }              /* 孤独死: 深いインディゴグレー */
body.page-gomiyashiki-baikyaku   { --jiko-accent: #8A6D3B; }              /* ゴミ屋敷: 温かみのあるブラウンゴールド */
body.page-saikenchiku-fuka-baikyaku { --jiko-accent: #4A5568; }           /* 再建築不可: スレートグレー */
body.page-kyoyu-mochibun-baikyaku   { --jiko-accent: #2B6777; }           /* 共有持分: 落ち着いたティール */
body.page-shakuchiken-baikyaku   { --jiko-accent: #6B6440; }              /* 借地権: オリーブブラウン */
body.page-sokochi-baikyaku       { --jiko-accent: #5C4A3A; }              /* 底地: ディープブラウン */
body.page-sozoku-fudosan-baikyaku { --jiko-accent: #4F6350; }             /* 相続不動産: セージグリーン */
body.page-wakeari-kaitori        { --jiko-accent: var(--jiko-key); }      /* 買取全般: 基準色(ハブページ) */

/* アクセントカラーの適用箇所(控えめに。CTAや基本レイアウトの色は変えない) */
.jiko-detail .jiko-eyebrow { color: var(--jiko-accent, var(--jiko-key)); }
.jiko-detail .jiko-card span {
	color: rgba(113,100,58,.1);
	color: color-mix(in srgb, var(--jiko-accent, var(--jiko-key)) 13%, transparent);
}
.jiko-detail .jiko-flow-card span { background: var(--jiko-accent, var(--jiko-key)); }
.jiko-detail .jiko-flow-section .jiko-card-grid--4::before { background: var(--jiko-accent, var(--jiko-key)); }
.jiko-detail .jiko-faq__toggle { color: var(--jiko-accent, var(--jiko-key)); }
.jiko-detail .jiko-faq__icon::before,
.jiko-detail .jiko-faq__icon::after { background: var(--jiko-accent, var(--jiko-key)); }
.jiko-detail .jiko-check-list li { border-left: 4px solid var(--jiko-accent, var(--jiko-key)); }

/* --------------------------------------------------------------------
   2. 主役ビジュアルモジュール(写真挿入用の受け皿)
   各ページの「解説セクション」に差し込む、物件種別ごとの専用写真
   エリア。画像が未着手の間はプレースホルダー表示になる。

   使い方(Codex向け):
   <section class="jiko-section jiko-feature-visual">
     <div class="jiko-feature-visual__media">
       <img src="img/[ページ種別]/feature-01.jpg" alt="◯◯の説明">
       <!-- 画像が無い場合は img タグごと省略し、
            jiko-feature-visual__placeholder の <p> だけ残す -->
     </div>
     <div class="jiko-feature-visual__text">
       <p class="jiko-eyebrow">POINT</p>
       <h2>見出し</h2>
       <p>本文。既存の解説文をそのまま流用可。</p>
     </div>
   </section>

   奇数回目は画像が右、jiko-feature-visual--reverse を付けると
   画像が左にくる(ページ内で使う場合の変化づけ用、必須ではない)。
   -------------------------------------------------------------------- */
.jiko-feature-visual {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(28rem, .82fr);
	gap: 4rem;
	align-items: center;
	padding: 6rem 7vw;
}
.jiko-feature-visual--reverse { grid-template-columns: minmax(28rem, .82fr) minmax(0, 1fr); }
.jiko-feature-visual--reverse .jiko-feature-visual__media { order: 2; }
.jiko-feature-visual--reverse .jiko-feature-visual__text { order: 1; }

.jiko-feature-visual__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: 1.2rem;
	border: .2rem solid var(--jiko-line);
	background: var(--jiko-bg-soft);
}
.jiko-feature-visual__media img { width: 100%; height: 100%; object-fit: cover; }

/* 写真が未着手の間の代替表示(本番公開前に必ず画像へ差し替えること) */
.jiko-feature-visual__placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	text-align: center; padding: 2rem;
	border: 2px dashed var(--jiko-accent, var(--jiko-line));
	color: var(--jiko-accent, var(--jiko-key));
	font-size: 1.4rem; font-weight: 700; line-height: 1.7;
	background: repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 10px, transparent 10px 20px);
}
.jiko-feature-visual__media:has(img) .jiko-feature-visual__placeholder { display: none; }

.jiko-feature-visual__text .jiko-eyebrow { margin-bottom: 1.6rem; }
.jiko-feature-visual__text h2 {
	font-size: 3rem; line-height: 1.5; margin-bottom: 1.6rem;
	color: var(--jiko-key); font-weight: 800;
	font-family: "Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
}
.jiko-feature-visual__text p { font-size: 1.55rem; line-height: 1.95; }

@media (max-width: 899px) {
	.jiko-feature-visual,
	.jiko-feature-visual--reverse {
		grid-template-columns: 1fr;
		padding: 4.5rem 2rem;
		gap: 2.4rem;
	}
	.jiko-feature-visual__media,
	.jiko-feature-visual--reverse .jiko-feature-visual__media { order: 1; }
	.jiko-feature-visual__text,
	.jiko-feature-visual--reverse .jiko-feature-visual__text { order: 2; }
	.jiko-feature-visual__text h2 { font-size: 2.4rem; }
}