/* トップページ専用CSS */

/* =========================================================
   ヘッダー
   SP：ロゴ＋ハンバーガー。押すとナビが画面いっぱいに広がる
   PC：ロゴ＋ナビ＋CTAを横1列
   ========================================================= */
.site-header {
	position: relative;
	z-index: 100;
	background-color: var(--color-white);
}

.site-header__inner {
	/* ヘッダーは項目数が多いため全幅で可変（他セクションのような1200px上限を設けない） */
	width: 100%;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* --- ロゴ --- */
.site-header__logo {
	display: inline-flex;
	align-items: center;
	position: relative;
	z-index: 110; /* オーバーレイより前面に置きロゴを見せる */
}

.site-header__logo-img {
	display: block;
	width: auto;
	height: 40px;
}

/* --- ハンバーガーボタン（SPのみ・ネイビー四角＋白ライン） --- */
.site-header__toggle {
	position: relative;
	z-index: 110;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background-color: var(--color-main);
	cursor: pointer;
}

.site-header__toggle-bar {
	position: absolute;
	left: 12px;
	width: 20px;
	height: 2px;
	background-color: var(--color-white);
	transition: transform 0.2s, opacity 0.2s;
}

/* デザインは2本線。中央のバーは常に非表示にし、1・3本目で「＝」→「×」を作る */
.site-header__toggle-bar:nth-child(1) { top: 18px; }
.site-header__toggle-bar:nth-child(2) { opacity: 0; }
.site-header__toggle-bar:nth-child(3) { top: 26px; }

/* 開いている間はバーを×に変形 */
.site-header.is-open .site-header__toggle-bar:nth-child(1) {
	top: 22px;
	transform: rotate(45deg);
}
.site-header.is-open .site-header__toggle-bar:nth-child(3) {
	top: 22px;
	transform: rotate(-45deg);
}

/* --- ナビ（SP：フルスクリーンオーバーレイ・白背景） --- */
.site-header__nav {
	position: fixed;
	inset: 0;
	z-index: 105;
	display: flex;
	flex-direction: column;
	/* 上部はヘッダー（ロゴ・ボタン）分を空ける */
	padding: 88px 24px 40px;
	background-color: var(--color-white);
	overflow-y: auto;
	/* 初期は非表示。開いたらフェードイン */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

.site-header.is-open .site-header__nav {
	opacity: 1;
	visibility: visible;
}

.site-header__nav-list {
	flex: 1; /* ナビ項目を中央エリアに、CTAを下部に押し下げる */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__nav-link {
	color: var(--color-main);
	font-family: var(--font-ja-body);
	font-size: 16px;
	text-decoration: none;
}

.site-header__cta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__btn {
	display: block;
	padding: 16px 24px;
	border: 1px solid var(--color-main);
	color: var(--color-main);
	font-family: var(--font-ja-body);
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}

.site-header__btn::after {
	content: "\2192"; /* → */
	margin-left: 8px;
}

/* 塗りボタン：明示的な modifier（フォールバック用）と、メニュー先頭項目の両方に適用 */
.site-header__btn--primary,
.site-header__cta li:first-child .site-header__btn {
	background-color: var(--color-main);
	color: var(--color-btn-text);
	border-color: var(--color-main);
}

/* --- PC（1100px以上）
   ナビ5項目＋CTA2つは中間幅で収まらないため、
   ヘッダーのみ1100pxまでハンバーガーを維持する --- */
@media (min-width: 1100px) {
	.site-header__inner {
		/* 左右余白・全体の間隔を画面幅に応じて可変に */
		padding: 16px clamp(12px, 2vw, 48px);
		gap: clamp(10px, 2vw, 40px);
	}

	/* ロゴも幅に応じて縮める（1100px付近でCTAが崩れないように） */
	.site-header__logo-img {
		height: clamp(28px, 2.6vw, 40px);
	}

	/* ハンバーガーは非表示 */
	.site-header__toggle {
		display: none;
	}

	/* ナビはオーバーレイを解除して横並びに戻す */
	.site-header__nav {
		position: static;
		flex: 1;
		min-width: 0; /* 収まらないときに縮められるように */
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: clamp(10px, 2vw, 32px);
		padding: 0;
		background-color: transparent;
		overflow: visible;
		opacity: 1;
		visibility: visible;
	}

	.site-header__nav-list {
		flex: none;
		flex-direction: row;
		justify-content: flex-start;
		gap: clamp(8px, 1.4vw, 24px);
	}

	.site-header__nav-link {
		color: var(--color-text-main);
		font-size: clamp(13px, 1.15vw, 15px);
		white-space: nowrap;
	}

	.site-header__cta {
		flex: none; /* ボタンは潰れさせない */
		flex-direction: row;
		gap: clamp(6px, 0.8vw, 12px);
	}

	.site-header__btn {
		padding: clamp(8px, 0.9vw, 10px) clamp(12px, 1.4vw, 20px);
		font-size: clamp(12px, 1vw, 14px);
		white-space: nowrap;
	}

	.site-header__btn::after {
		margin-left: clamp(4px, 0.5vw, 8px);
	}
}

/* 1100〜1279px：矢印を隠して横幅を稼ぎ、CTAの折返し・はみ出しを防ぐ */
@media (min-width: 1100px) and (max-width: 1279.98px) {
	.site-header__btn::after {
		content: none;
	}
}

/* =========================================================
   FV（ファーストビュー）
   SP：上に円＋ロゴのビジュアル、下にキャッチ・リード・CTA
   PC：背景画像を全面に敷き、左にテキスト・右にロゴ
   ========================================================= */
.fv {
	background-color: var(--color-bg-sub); /* 画像読込前の下地 */
}

.fv__inner {
	display: flex;
	flex-direction: column;
}

/* --- ビジュアル（円＋ロゴ） ---
   SPでは背景画像を疑似要素に敷き、画像内の「円の中心」＝(72%, 43%) の点を
   要素の中心（＝ロゴの中心）に重ねる。
   ※(72%, 43%) はPCでロゴを絶対配置している left:72% / top:43% と同じ値。
   ※background-position では画像の72%地点を中央に持ってこられないため疑似要素で対応。
   ★円が大きい／小さい場合は ::before の width を調整（下げすぎると端に余白が出る）。 */
.fv__visual {
	order: -1; /* SPでは最上部に配置 */
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 32px 20px;
	background-color: var(--color-bg-sub); /* 画像読込前の下地 */
}

.fv__visual::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	/* 円を中央に寄せても四辺に余白が出ないだけの大きさを確保する */
	width: max(185%, 760px);
	aspect-ratio: 1503 / 713; /* 背景画像の縦横比 */
	background-image: url(../images/top-fv-bg.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/* 画像の (72%, 43%) を要素の中心に一致させる */
	transform: translate(-72%, -43%);
	pointer-events: none;
}

.fv__logo {
	position: relative; /* 背景（::before）より前面に */
	z-index: 1;
	display: block;
	width: min(220px, 60%);
	height: auto;
}

/* --- コンテンツ（キャッチ・リード・CTA） --- */
.fv__content {
	padding: 8px 20px 40px;
}

.fv__title {
	margin: 0 0 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.fv__title-line {
	padding: 4px 12px;
	background-color: var(--color-white);
	color: var(--color-main);
	font-family: var(--font-ja-mincho);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.3;
}

.fv__lead {
	margin: 0 0 28px;
	color: var(--color-text-main);
	font-family: var(--font-ja-body);
	font-size: 15px;
	line-height: 1.9;
}

.fv__cta {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fv__btn {
	display: block;
	padding: 18px 24px;
	border: 1px solid var(--color-main);
	background-color: var(--color-white);
	color: var(--color-main);
	font-family: var(--font-ja-body);
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}

.fv__btn--primary {
	background-color: var(--color-main);
	color: var(--color-btn-text);
	border-color: var(--color-main);
}

/* 矢印は塗りボタン（鑑定のご依頼）のみ */
.fv__btn--primary::after {
	content: "\2192";
	margin-left: 8px;
}

/* --- PC（735px以上） ---
   背景画像(1503×713 ≒ 2.108:1)の縦横比で .fv を固定し、cover でも
   トリミングが起きないようにする。これで背景の円の中心が常に一定割合の
   位置に来るため、ロゴを同じ割合(左72% / 上47%)へ絶対配置し、幅も vw で
   背景と同じ比率でスケールさせれば、画面幅が変わってもズレない。
   ★ロゴ位置がずれる場合は .fv__visual の left / top を微調整。
   横並びは900pxから（735〜900pxはSPの縦積みのまま）。 */
@media (min-width: 900px) {
	.fv {
		position: relative;
		aspect-ratio: 1503 / 713;
		min-height: 440px; /* 文章が入りきる下限（この幅未満は多少トリミング） */
		/* 1層目：左側の円形グラデーション（白帯より下＝リード文付近に配置）／2層目：背景画像
		   ★グラデの濃さ・位置は 1層目の色と at 18% 58% / 20% を調整 */
		background-image:
			radial-gradient(circle at 18% 50%, #C9D6EA, rgba(201, 214, 234, 0) 20%),
			url(../images/top-fv-bg.jpg);
		background-repeat: no-repeat, no-repeat;
		background-position: center, center;
		background-size: cover, cover;
	}

	.fv__inner {
		flex-direction: row;
		align-items: center;
		max-width: var(--max-width);
		height: 100%;
		margin: 0 auto;
		padding: 40px 20px;
		box-sizing: border-box;
	}

	.fv__content {
		flex: none;
		width: 52%;
		max-width: 560px;
		padding: 0;
	}

	/* ロゴは .fv に対して円の中心へ絶対配置し、背景と同じ比率でスケール */
	.fv__visual {
		position: absolute;
		top: 43%;
		left: 72%;
		transform: translate(-50%, -50%);
		margin: 0;
		padding: 0;
		min-height: 0;
		overflow: visible;
		background: none;
	}

	/* PCの背景は .fv 側が持つので、SP用の疑似要素背景は出さない */
	.fv__visual::before {
		content: none;
	}

	.fv__logo {
		width: 15.3vw; /* ≒230px @1503px。背景の円と同じ比率で拡縮 */
		margin: 0;
	}

	.fv__title {
		gap: 10px;
		margin-bottom: 28px;
	}

	.fv__title-line {
		padding: 6px 16px;
		font-size: clamp(40px, 4vw, 56px);
	}

	.fv__lead {
		margin-bottom: 40px;
		max-width: 40em; /* 1行が長くなりすぎないように */
		font-size: 16px;
	}

	.fv__cta {
		flex-direction: row;
		gap: 16px;
	}

	.fv__btn {
		min-width: 0;
		flex: 1 1 0;
		padding: 18px 24px;
		white-space: nowrap;
	}
}

/* =========================================================
   NEW COLUMN帯（最新コラム1件・動的）
   SP：縦積み ／ PC：横1列
   ========================================================= */
.new-column {
	background-color: var(--color-bg-band);
}

.new-column__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.new-column__label {
	margin: 0;
	font-family: var(--font-en);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.2em;
	color: var(--color-main);
}

.new-column__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	text-decoration: none;
}

.new-column__date {
	font-family: var(--font-ja-body);
	font-size: 14px;
	color: var(--color-text-sub);
}

.new-column__category {
	display: inline-block;
	padding: 4px 16px;
	background-color: var(--color-main);
	color: var(--color-white);
	font-family: var(--font-ja-body);
	font-size: 13px;
	line-height: 1.6;
}

.new-column__title {
	flex-basis: 100%;
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--color-main);
}

/* --- PC（735px以上） --- */
@media (min-width: 735px) {
	.new-column__inner {
		flex-direction: row;
		align-items: center;
		gap: 40px;
		padding: 18px 20px;
	}

	.new-column__label {
		font-size: 16px;
	}

	.new-column__item {
		flex-wrap: nowrap;
		gap: 24px;
	}

	.new-column__title {
		flex-basis: auto;
		font-size: 16px;
	}
}

/* =========================================================
   鑑定について（APPRAISAL MENU・カード6枚）
   SP：1列＋ボタン下部 ／ PC：3列＋ボタン右上
   ========================================================= */
.about {
	background-color: var(--color-white);
	padding: 56px 0;
}

.about__inner {
	position: relative; /* PCでボタンを右上に絶対配置するため */
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* --- 見出し --- */
.about__header {
	margin-bottom: 32px;
}

.about__label {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--color-text-sub);
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
}

.about__label::after {
	content: "";
	width: 40px;
	height: 1px;
	background-color: currentColor;
}

.about__heading {
	margin: 8px 0 0;
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 28px;
}

/* --- カード一覧 --- */
.about__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px; /* SPはカード間を広めに（PCは735px〜で32px） */
	margin: 0;
	padding: 0;
	list-style: none;
}

.about__item {
	background-color: var(--color-white);
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(31, 44, 77, 0.08);
	overflow: hidden;
}

/* カード全体がアンカー遷移リンク */
.about__card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.about__thumb {
	position: relative;
	margin: 0;
}

.about__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* アイキャッチ未設定時のプレースホルダー */
.about__img--empty {
	background-color: var(--color-bg-sub);
}

.about__tag {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 4px 16px;
	background-color: var(--color-main);
	color: var(--color-white);
	font-family: var(--font-ja-body);
	font-size: 13px;
}

.about__body {
	padding: 20px 16px 24px;
	text-align: center;
}

.about__sub {
	margin: 0 0 6px;
	color: var(--color-text-sub);
	font-family: var(--font-ja-body);
	font-size: 13px;
	text-wrap: balance; /* 1文字だけの不自然な折返しを防ぐ */
}

.about__title {
	margin: 0;
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 22px; /* SPは .case__title と同じサイズ（PCは735px〜で18px） */
	text-wrap: balance;
}

/* --- 詳細を見るボタン --- */
.about__more {
	display: block;
	margin-top: 32px;
	padding: 16px 24px;
	background-color: var(--color-main);
	color: var(--color-btn-text);
	font-family: var(--font-ja-body);
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}

/* --- PC（735px以上） --- */
@media (min-width: 735px) {
	.about {
		padding: 80px 0;
	}

	.about__heading {
		font-size: 40px;
	}

	/* PCはカードが3列で窮屈なため小さめに戻す */
	.about__title {
		font-size: 18px;
	}

	/* 中間幅は2列（3列はカードが窮屈になるため1024pxから） */
	.about__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	/* ボタンは右上に配置 */
	.about__more {
		position: absolute;
		top: 0;
		right: 20px;
		margin-top: 0;
		padding: 18px 40px;
	}
}

/* --- PC（1024px以上）：デザイン通りの3列 --- */
@media (min-width: 1024px) {
	.about__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================
   プロフィール
   SP：ラベル/見出し中央、白カード（イラスト）＋下のネイビーBOXが重なる
   PC：左に白カード、右にネイビーBOX（白カードが左に重なる）
   背景・シャドウはCSSで付与（イラストは透過SVG）
   ========================================================= */
.profile {
	padding: 63px 0;
	/* 下地のグラデ＋タイトル付近にMV同様の円形グラデーション（★色・位置は調整可） */
	background:
		radial-gradient(circle at 12% 16%, #C9D6EA, rgba(201, 214, 234, 0) 22%),
		linear-gradient(135deg, #EEF1F5 0%, #E3E7EE 100%);
}

.profile__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* --- 見出し --- */
.profile__header {
	margin-bottom: 32px;
}

.profile__label {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--color-text-sub);
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
}

.profile__label::after {
	content: "";
	width: 40px;
	height: 1px;
	background-color: currentColor;
}

.profile__heading {
	margin: 8px 0 0;
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: 0.1em;
}

/* --- 本体（イラスト＋ネイビーBOX） --- */
.profile__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* イラストの白カード（背景・影をCSSで付与・正方形／絵は中央配置） */
.profile__illust {
	position: relative;
	z-index: 2;
	width: min(300px, 80%);
	aspect-ratio: 1; /* デザインの580×580に合わせて正方形に */
	margin: 0 0 -60px;
	padding: 32px; /* SP。PC（900px〜）で80pxに戻す */
	box-sizing: border-box;
	background-color: var(--color-white);
	box-shadow: 0 16px 32px rgba(31, 44, 77, 0.15);
}

.profile__illust-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* 縦長イラストを正方形カード内に中央配置 */
}

/* ネイビーBOX */
.profile__card {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 100px 24px 40px;
	background-color: var(--color-main);
	color: var(--color-white);
	text-align: center;
}

/* 白い内枠 */
.profile__card::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	pointer-events: none;
}

.profile__en {
	margin: 0 0 8px;
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.2em;
}

.profile__name {
	margin: 0 0 20px;
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 0.15em;
}

.profile__text {
	margin: 0 0 28px;
	font-family: var(--font-ja-body);
	font-size: 15px;
	line-height: 2;
}

.profile__more {
	display: inline-block;
	min-width: 220px;
	padding: 14px 32px;
	background-color: var(--color-white);
	color: var(--color-main);
	font-family: var(--font-ja-body);
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}

/* --- PC（735px以上）：余白・見出しサイズのみ --- */
@media (min-width: 735px) {
	.profile {
		padding: 120px 0 180px 0; /* コンテンツ全体の上下余白 */
	}

	.profile__heading {
		font-size: 40px;
	}
}

/* --- PC（900px以上）：白カード＋ネイビーBOXの重なりレイアウト（Figma実寸1200基準）
   ・ネイビーBOX：802×591（幅66.8%）を右寄せ、パディング左320/上下右125（=%換算）
   ・白カード：580×580 正方形（幅48.3%）を左に絶対配置し重ねる
   ・文字は左寄せ
   ※ %はいずれも 1200px 基準。max-width:1200 で頭打ちなので広い画面でも実寸を保つ --- */
@media (min-width: 900px) {
	.profile__header {
		margin-bottom: 48px; /* 見出し〜コンテンツ（デザイン約80px。重なりぶん詰めて調整可） */
	}

	/* 白カード（左）を高さの基準にし、ネイビーBOXを右に絶対配置。
	   両者の上端を揃える（.profile__card の top）。
	   ★ネイビーを下げたい場合は top を増やす（例 top: 40px） */
	.profile__content {
		position: relative;
		display: block;
	}

	/* 白カード（左・580×580正方形・通常フロー） */
	.profile__illust {
		position: relative;
		width: 48.3%;
		margin: 0;
		padding: 80px;
		z-index: 2;
	}

	/* ネイビーBOX（右・802×591・上端を白カードと揃える） */
	.profile__card {
		position: absolute;
		top: 10%;
		right: 0;
		width: 66.8%;
		aspect-ratio: 802 / 591;
		box-sizing: border-box;
		padding: 10.4% 10.4% 10.4% 26.7%; /* 125 / 125 / 125 / 320（1200基準） */
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		z-index: 1;
	}

	.profile__card::after {
		inset: 20px;
	}

	.profile__name {
		font-size: 38px;
	}

	.profile__more {
		max-width: 200px;
	}
}

/* =========================================================
   鑑定事例（CASE・動的 カスタム投稿タイプ）
   SP：1列 ／ PC：2列。カードは画像上＋中央寄せの本文
   ========================================================= */
.case {
	padding: 56px 0;
	background-color: var(--color-white);
}

.case__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.case__header {
	margin-bottom: 32px;
}

.case__label {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--color-text-sub);
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
}

.case__label::after {
	content: "";
	width: 40px;
	height: 1px;
	background-color: currentColor;
}

.case__heading {
	margin: 8px 0 0;
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 28px;
}

.case__lead {
	margin: 8px 0 0;
	color: var(--color-text-sub);
	font-family: var(--font-ja-body);
	font-size: 14px;
}

.case__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 64px; /* SPはカード間を広めに（PCは735px〜で40px） */
	margin: 0;
	padding: 0;
	list-style: none;
}

.case__item {
	background-color: var(--color-white);
	border-radius: 8px;
	box-shadow: 0 2px 16px rgba(31, 44, 77, 0.08);
	overflow: hidden;
}

.case__thumb {
	display: block; /* 画像リンク（クリックで事例詳細へ） */
	margin: 0;
	overflow: hidden;
}

.case__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 6;
	object-fit: cover;
}

@media (hover: hover) {
	.case__img {
		transition: transform 0.4s, opacity 0.2s;
	}
	.case__thumb:hover .case__img {
		transform: scale(1.05);
		opacity: 0.92;
	}
}

.case__img--empty {
	background-color: var(--color-bg-sub);
}

.case__body {
	padding: 24px;
	text-align: center;
}

.case__number {
	margin: 0 0 8px;
	color: var(--color-text-sub);
	font-family: var(--font-en);
	font-size: 12px;
	letter-spacing: 0.15em;
}

.case__title {
	margin: 0 0 16px;
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 22px;
}

.case__text {
	margin: 0 0 24px;
	color: var(--color-text-sub);
	font-family: var(--font-ja-body);
	font-size: 14px;
	line-height: 1.9;
	text-align: left;
}

.case__btn {
	display: inline-block;
	min-width: 260px;
	padding: 16px 24px;
	background-color: var(--color-bg-sub);
	color: var(--color-main);
	font-family: var(--font-ja-body);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

/* --- PC（735px以上） --- */
@media (min-width: 735px) {
	.case {
		padding: 80px 0;
	}

	.case__heading-row {
		display: flex;
		align-items: baseline;
		gap: 24px;
	}

	.case__heading {
		font-size: 40px;
	}

	.case__lead {
		margin: 0;
	}

	.case__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}

	.case__body {
		padding: 32px;
	}
}

/* =========================================================
   占いコラム（COLUMN・動的 最新6件）
   SP：画像上の縦カード ／ PC：画像左＋テキスト右の横カード
   背景は薄いグリッド柄
   ========================================================= */
.column {
	padding: 56px 0;
	background-color: var(--color-bg-sub);
	background-image:
		linear-gradient(rgba(31, 44, 77, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(31, 44, 77, 0.04) 1px, transparent 1px);
	background-size: 40px 40px;
}

.column__inner {
	position: relative; /* PCでボタンを右上に絶対配置するため */
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.column__header {
	margin-bottom: 32px;
	text-align: center;
}

.column__label {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--color-text-sub);
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
}

.column__label::after {
	content: "";
	width: 40px;
	height: 1px;
	background-color: currentColor;
}

.column__heading {
	margin: 8px 0 0;
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 28px;
}

.column__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px; /* SPはカード間を広めに（PCは735px〜で32px） */
	margin: 0;
	padding: 0;
	list-style: none;
}

.column__card {
	display: block;
	background-color: var(--color-white);
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(31, 44, 77, 0.08);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.column__thumb {
	margin: 0;
}

.column__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.column__img--empty {
	background-color: var(--color-bg-sub);
}

.column__body {
	padding: 20px;
}

.column__title {
	margin: 0 0 12px;
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 18px;
}

.column__excerpt {
	margin: 0 0 16px;
	color: var(--color-text-sub);
	font-family: var(--font-ja-body);
	font-size: 14px;
	line-height: 1.8;
}

.column__meta {
	display: flex;
	align-items: center;
	gap: 16px;
}

.column__date {
	color: var(--color-text-sub);
	font-family: var(--font-ja-body);
	font-size: 13px;
}

.column__category {
	padding: 4px 16px;
	background-color: var(--color-main);
	color: var(--color-white);
	font-family: var(--font-ja-body);
	font-size: 13px;
}

.column__more {
	display: block;
	margin-top: 32px;
	padding: 16px 24px;
	background-color: var(--color-main);
	color: var(--color-btn-text);
	font-family: var(--font-ja-body);
	font-size: 15px;
	text-align: center;
	text-decoration: none;
}

/* --- PC（735px以上） --- */
@media (min-width: 735px) {
	.column {
		padding: 80px 0;
	}

	.column__header {
		text-align: left;
	}

	.column__heading {
		font-size: 40px;
	}

	.column__more {
		position: absolute;
		top: 0;
		right: 20px;
		margin-top: 0;
		padding: 18px 40px;
	}

	.column__list {
		gap: 32px;
	}

	/* 画像左・テキスト右の横カード（中間幅では画像を縮めてテキスト領域を確保） */
	.column__card {
		display: grid;
		grid-template-columns: minmax(260px, 420px) 1fr;
	}

	/* 画像はテキスト側の高さに合わせて敷き詰める（実寸で伸びない） */
	.column__thumb {
		position: relative;
	}

	.column__img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	.column__body {
		align-self: center;
		padding: clamp(28px, 4vw, 48px);
	}

	.column__title {
		font-size: 22px;
	}
}

/* =========================================================
   ご依頼・お問い合わせ（CONTACT）
   ネイビー背景。カード1枚目のみ白（プライマリ）、2・3枚目は半透明白
   SP：1列 ／ PC：3列
   ========================================================= */
.contact {
	padding: 56px 0;
	background-color: var(--color-main);
}

.contact__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px;
}

.contact__header {
	margin-bottom: 32px;
}

.contact__label {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--color-white);
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.15em;
}

.contact__label::after {
	content: "";
	width: 40px;
	height: 1px;
	background-color: currentColor;
}

.contact__heading {
	margin: 8px 0 0;
	color: var(--color-white);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 28px;
	letter-spacing: 0.05em;
}

.contact__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact__item {
	padding: 32px 24px;
	background-color: rgba(255, 255, 255, 0.06);
	border-radius: 6px;
}

.contact__item--primary {
	background-color: var(--color-white);
}

.contact__title {
	margin: 0 0 12px;
	color: var(--color-white);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 20px;
}

.contact__item--primary .contact__title {
	color: var(--color-main);
}

.contact__text {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--font-ja-body);
	font-size: 14px;
	line-height: 1.8;
}

.contact__item--primary .contact__text {
	color: var(--color-text-sub);
}

.contact__btn {
	display: block;
	padding: 16px 24px;
	background-color: var(--color-main);
	color: var(--color-btn-text);
	font-family: var(--font-ja-body);
	font-size: 15px;
	text-align: center;
	text-decoration: none;
	border-radius: 2px;
}

/* --- PC（735px以上）：余白・見出しサイズのみ --- */
@media (min-width: 735px) {
	.contact {
		padding: 80px 0;
	}

	.contact__heading {
		font-size: 40px;
	}
}

/* --- PC（900px以上）：カード3列（中間幅では窮屈になるため） --- */
@media (min-width: 900px) {
	.contact__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
	}
}

/* =========================================================
   フッター
   ネイビー背景。ロゴはインラインSVGを fill で白に。
   SP：中央縦積み ／ PC：ロゴ左・ナビ右、コピーライトは下部中央
   ========================================================= */
.site-footer {
	background-color: var(--color-main);
	color: var(--color-white);
}

.site-footer__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 48px 20px 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* SPは左寄せ（デザイン準拠） */
	gap: 32px;
}

/* ロゴ（インラインSVGを白に） */
.site-footer__logo svg {
	display: block;
	width: 200px;
	height: auto;
}

.site-footer__logo svg path {
	fill: var(--color-white);
}

.site-footer__nav-area {
	width: 100%;
}

.site-footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.site-footer__nav-list a {
	color: var(--color-white);
	font-family: var(--font-ja-body);
	font-size: 14px;
	text-decoration: none;
}


.site-footer__copyright {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 20px 32px;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-en);
	font-size: 12px;
	text-align: left; /* SPは左寄せ（デザイン準拠） */
}

/* --- PC（735px以上） --- */
@media (min-width: 735px) {
	.site-footer__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding: 56px 20px 32px;
	}

	.site-footer__nav-area {
		width: auto;
		text-align: right;
	}

	.site-footer__nav-list {
		flex-direction: row;
		gap: 32px;
		margin-bottom: 16px;
	}

	.site-footer__copyright {
		padding-bottom: 24px;
		text-align: center;
	}
}

/* =========================================================
   ボタン共通：角丸6px（ボタンと認識されやすく）
   ========================================================= */
.site-header__btn,
.fv__btn,
.about__more,
.profile__more,
.case__btn,
.column__more,
.contact__btn {
	border-radius: 6px;
}

/* =========================================================
   hover / interaction（マウス環境のみ）
   ========================================================= */
@media (hover: hover) {
	/* --- テキストリンク：軽く薄く --- */
	.site-header__nav-link,
	.site-footer__nav-list a,
	.site-footer__privacy,
	.new-column__item {
		transition: opacity 0.2s;
	}
	.site-header__nav-link:hover,
	.site-footer__nav-list a:hover,
	.site-footer__privacy:hover,
	.new-column__item:hover {
		opacity: 0.6;
	}

	/* --- ボタン共通：トランジション --- */
	.site-header__btn,
	.fv__btn,
	.about__more,
	.profile__more,
	.case__btn,
	.column__more,
	.contact__btn {
		transition: background-color 0.2s, color 0.2s, opacity 0.2s;
	}

	/* 塗り／白ボタン：明度を少し落とす */
	.site-header__btn:hover,
	.about__more:hover,
	.profile__more:hover,
	.column__more:hover,
	.contact__btn:hover,
	.fv__btn--primary:hover {
		opacity: 0.85;
	}

	/* アウトライン（白背景）のFVボタン：ホバーで塗りに反転 */
	.fv__btn:not(.fv__btn--primary):hover {
		background-color: var(--color-main);
		color: var(--color-btn-text);
		opacity: 1;
	}

	/* グレーボタン（鑑定事例）：ホバーで少し濃く */
	.case__btn:hover {
		background-color: #dbe0e8;
	}

	/* --- カード（全体がリンクの about / column）：浮き上がり --- */
	.about__item,
	.column__item {
		transition: transform 0.2s, box-shadow 0.2s;
	}
	.about__item:hover,
	.column__item:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 24px rgba(31, 44, 77, 0.14);
	}
	/* 画像ズームは about のみ（column一覧では行わない） */
	.about__img {
		transition: transform 0.4s;
	}
	.about__item:hover .about__img {
		transform: scale(1.05);
	}
}

/* =========================================================
   SP専用の調整（〜734.98px）
   ※本ファイルは原則モバイルファーストだが、「SPのみ中央寄せ」は
     各セクションのPCブロックを個別に戻す必要があり煩雑なため、
     ここに max-width で集約する。
   ========================================================= */
@media (max-width: 734.98px) {
	/* セクション見出し（英字ラベル＋h2）は共通で画面中央に */
	.about__header,
	.profile__header,
	.case__header,
	.column__header,
	.contact__header {
		text-align: center;
	}

	/* コラム記事の詳細（投稿）のタイトルは、トップのカード見出しと同じ22pxに。
	   固定ページの見出し（プロフィール等）は28pxのまま。 */
	.single-post .articleHeader .articleHeader__title {
		font-size: 22px;
	}
}

/* =========================================================
   下層ページ共通（親テーマの page.php / single.php 上に乗るもの）
   ※このCSSは全ページで読み込まれる
   ========================================================= */

/* --- ページ見出し：占いコラム一覧の見出し（.column__heading）と同じ体裁に揃える --- */
.articleHeader .articleHeader__title {
	color: var(--color-main);
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.4;
}

/* --- パンくず（フッターのお問い合わせ直前に表示） --- */
.site-breadcrumbs {
	background-color: var(--color-white);
}

.site-breadcrumbs__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 24px 20px;
}

.site-breadcrumbs .breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-sub);
	font-family: var(--font-ja-body);
	font-size: 13px;
}

.site-breadcrumbs .breadcrumbs a {
	color: var(--color-text-sub);
	text-decoration: none;
}

/* パンくずの家アイコンは非表示（HOME→TOP の表記変更は functions.php のフィルター） */
.breadcrumbs .fa-home {
	display: none;
}

/* --- プロフィールページ：写真＝左列／本文＝右列 の2カラム固定 ---
   本文の構造は .wp-block-group__inner-container > .wp-block-columns >
   .wp-block-column の中に figure.wp-block-image と <p> が兄弟で並ぶ。
   フロートだと段落が写真の下に回り込んで左端がそろわないため、
   カラム自体をグリッド化して本文をすべて右列に固定する。
   （グループ内に限定することで、上部の経歴テーブルのカラムには影響しない） */
@media (min-width: 735px) {
	.page-profile .articleBody .wp-block-group__inner-container .wp-block-column {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 32px;
		row-gap: 0;
		align-items: start;
	}

	/* 本文はすべて右列（左端がそろう） */
	.page-profile .articleBody .wp-block-group__inner-container .wp-block-column > * {
		grid-column: 2;
	}

	/* 写真は左列。複数行にまたがらせ、1段落目の高さに引きずられないようにする */
	.page-profile .articleBody .wp-block-group__inner-container .wp-block-column > figure.wp-block-image {
		float: none;
		grid-column: 1;
		grid-row: 1 / span 30;
		align-self: start;
		margin: 0;
	}

	/* 1段落目の上余白を消して写真と上端をそろえる */
	.page-profile .articleBody .wp-block-group__inner-container .wp-block-column > p:first-of-type {
		margin-top: 0;
	}
}

/* --- プロフィールページ：名前欄をトップの .profile__en / .profile__name と同じ体裁に ---
   マークアップは <td class="has-text-align-center">英字<br><span class="xwb-fs-32"><strong>和名</strong></span></td> */
.page-profile .articleBody figure.wp-block-table td.has-text-align-center:first-child {
	font-family: var(--font-en);
	font-size: 13px;
	letter-spacing: 0.2em;
	line-height: 1.6;
	text-transform: uppercase; /* トップと同じ大文字表記に */
}

.page-profile .articleBody figure.wp-block-table td.has-text-align-center:first-child .xwb-fs-32,
.page-profile .articleBody figure.wp-block-table td.has-text-align-center:first-child strong {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--font-ja-heading);
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 0.15em;
	line-height: 1.4;
	text-transform: none;
}

/* --- PC（735px以上） --- */
@media (min-width: 735px) {
	.articleHeader .articleHeader__title {
		font-size: 40px;
	}

	/* コラム記事（投稿）のタイトルだけ小さめに。固定ページの見出しは40pxのまま */
	.single-post .articleHeader .articleHeader__title {
		font-size: 32px;
	}
}