@charset "UTF-8";
/**
 * home.css — TOPページ専用
 *
 * 構成:
 *   ① キャッチコピー帯 ② MVスライダー ③④ 記事ブロック
 *   ⑤ 人気の特集 ⑥ SNS ⑦ 最近読んだ記事
 */

/* ============================================================
   ① 検索ヒーロー
   ============================================================ */
.top_hero {
	background: var(--c-bg-tint);
	padding-block: 34px;
}

/* 左：検索 ／ 右：注目の記事
 * align-items: stretch（既定）で右カードを左カラムと同じ高さに伸ばし、
 * 下端を「よく調べられる」の行に揃える。 */
/*
 * 右カラムの幅。
 *
 * 340px だとカードのタイトルが省略（…）されていた。
 * 実測したところ 380px で省略が 0 件になる。
 * それ以上広げても省略は減らず、左の検索窓（540px固定）にも影響しないため、
 * 余裕をみて 390px とした。
 */
.top_hero .l_container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: 48px;
}

.top_hero_inner { min-width: 0; }

.top_hero_ttl {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 8px;
}

/*
 * 見出しの折り返し位置。
 *
 * text-wrap: balance は2行を均等な長さにしようとするため、
 * 「プロの／不動産ライター」のように語の途中で改行されて読みにくかった。
 * 意味のまとまりで折り返したいので balance は使わず、
 * <span class="nowrap"> で切りたくない範囲を指定している。
 */
.top_hero_ttl .nowrap {
	white-space: nowrap;
}

.top_hero_sub {
	font-size: 13px;
	color: var(--c-text-sub);
	margin-bottom: 18px;
}

.top_hero_search {
	display: flex;
	max-width: 540px;
	margin-bottom: 16px;
}

.top_hero_search input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--c-border);
	border-right: 0;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	padding: 12px 15px;
	font: inherit;
	font-size: 14px;
	background: var(--c-bg);
	color: var(--c-text);
}

.top_hero_search input:focus {
	outline: 2px solid var(--c-accent);
	outline-offset: -2px;
}

.top_hero_search button {
	border: 0;
	background: var(--c-accent);
	color: #fff;
	padding-inline: 26px;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .2s ease;
}

.top_hero_search button:hover { opacity: .85; }

.top_hero_tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.top_hero_tags_label {
	font-size: 12px;
	color: var(--c-text-muted);
}

.top_hero_tag {
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 12px;
	color: var(--c-text);
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.top_hero_tag:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
	text-decoration: none;
}

/* --- 右側：注目の記事（1件・アイキャッチ付き） --- */
.top_hero_side {
	display: flex;
	flex-direction: column;
	background: var(--c-bg);
	border-radius: var(--radius-md);
	padding: 16px;
}

/*
 * 見出しと罫線の間隔（padding-bottom）が詰まりすぎ、
 * 罫線とカードの間隔（margin-bottom）が空きすぎて
 * 上下のバランスが逆転していたため揃えた。
 */
.top_hero_side_ttl {
	font-size: 12.5px;
	font-weight: 700;
	padding-bottom: 12px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--c-border);
}

/* 見出しの下の余白を記事カードが吸収し、カード全体を左カラムの高さに合わせる */
/*
 * ヒーロー右の「注目の記事」。
 *
 * 以前は1件を flex:1 で高さいっぱいに伸ばしていたが、
 * align-items:center で中身が上下中央に寄り、
 * カードの上下に不自然な余白が出ていた。
 * 2件並べ、余った分をカード間に配分する。
 */
.top_hero_side_list {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 14px;
}

.top_hero_side .trend_card {
	align-items: flex-start;
}

/* タイトルは2行まで。3行になると画像との高さ差が開きすぎる */
.top_hero_side .trend_card_ttl {
	-webkit-line-clamp: 2;
}

/*
 * 横並び（画像 左・テキスト 右）。
 *
 * ヒーロー右カラムは左（検索＋タグ）の高さに収める必要があるため、
 * 縦積みにすると溢れる。サムネイルは 16:9 を保ったまま固定サイズにし、
 * テキストを縦中央に置いて視覚的な重心を合わせる。
 * （高さを埋めるためにサムネイルを引き伸ばすと、横長写真の
 *   左右が切り取られて不自然になるため、引き伸ばさない）
 */
.trend_card {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--c-text);
	text-decoration: none;
}

.trend_card:hover { text-decoration: none; }
.trend_card:hover .trend_card_ttl { color: var(--c-accent); }

.trend_card_img {
	display: block;
	flex-shrink: 0;
	width: 128px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--c-bg-tint);
	line-height: 0;
}

.trend_card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-size: 9px;
	color: var(--c-text-muted);
	transition: transform .35s ease;
}

.trend_card:hover .trend_card_img img { transform: scale(1.04); }

.trend_card_body { min-width: 0; }

.trend_card_ttl {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	transition: color .2s ease;
}

.trend_card_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 7px;
}

@media (max-width: 900px) {
	/* 横幅が足りなくなったら縦積みにする */
	.top_hero .l_container {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 768px) {
	.top_hero      { padding-block: 26px; }
	.top_hero_ttl  { font-size: 18px; }
	.top_hero_sub  { font-size: 12px; }

	/* 画面が狭いと nowrap のままでは横に溢れるので解除する */
	.top_hero_ttl .nowrap { white-space: normal; }
}

/* ============================================================
   ② MVスライダー
   ============================================================ */
/*
 * 画面幅いっぱいに広げる。
 * .l_container のような最大幅の制約を受けないよう、左右のpaddingも持たせない。
 */
.top_mv {
	margin-top: 24px;
}

/*
 * 左右の余白は Swiper の slidesOffsetBefore/After（home.js）で付ける。
 * ここで padding を書いても Swiper が初期化時に上書きするため効かない。
 */
.top_mv-slider {
	overflow: hidden;
}

/*
 * Swiper の初期化前もレイアウトを確定させる。
 *
 * ⚠️ これが無いと CLS が 0.234 になる。
 *    初期化前は全スライドが縦に積まれ、JSが動いた瞬間に横並びへ変わるため
 *    ページ全体が大きく上下する（実測でMAINが 0→775px 移動していた）。
 *
 * Swiper と同じ「横並び3枚」を CSS だけで先に作っておき、
 * 初期化後もそのまま同じ見た目になるようにする。
 */
.top_mv-slider .swiper-wrapper {
	display: flex;
}

/* home.js の breakpoints と同じ枚数・間隔にする */
.top_mv-slider .swiper-slide {
	flex: 0 0 auto;
	width: 100%;          /* 450px未満: 1枚 */
	margin-right: 0;
}

@media (min-width: 450px) {
	.top_mv-slider .swiper-slide {
		width: calc((100% - 15px * 1.8) / 1.8);
		margin-right: 15px;
	}
}

@media (min-width: 768px) {
	.top_mv-slider .swiper-slide {
		width: calc((100% - 40px) / 3);
		margin-right: 20px;
	}
}

/* 操作UIの高さも先に確保しておく（後から出現して押し下げるのを防ぐ） */
.mv_controls {
	min-height: 34px;
}

.mv_card {
	display: block;
	color: var(--c-text);
	text-decoration: none;
}

.mv_card_img {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--c-bg-tint);
	line-height: 0;
}

.mv_card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-size: 10px;
	color: var(--c-text-muted);
}

.mv_card_ttl {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.mv_card:hover .mv_card_ttl { color: var(--c-accent); }

/* --- コントロール（ページャ + 矢印） ---
 * スライダーは全幅だが、コントロールは本文カラムの幅に揃える。
 * こうすると矢印が画面の右端まで飛ばず、サイドバー（人気記事）の
 * 手前に収まって視線の流れが自然になる。
 */
.mv_controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--w-content);
	margin: 16px auto 0;
	padding-inline: 24px;
}

@media (max-width: 768px) {
	.mv_controls { padding-inline: 20px; }
}

.top_mv .swiper-pagination {
	position: static;
	width: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.top_mv .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: var(--c-border-light);
	opacity: 1;
	margin: 0 !important;
}

.top_mv .swiper-pagination-bullet-active { background: var(--c-accent); }

.mv_arrows { display: flex; gap: 8px; }

.top_mv .swiper-button-prev,
.top_mv .swiper-button-next {
	position: static;
	width: 34px;
	height: 34px;
	margin: 0;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	color: var(--c-text);
	background: var(--c-bg);
	transition: border-color .2s ease, color .2s ease;
}

.top_mv .swiper-button-prev:hover,
.top_mv .swiper-button-next:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/* Swiper標準の矢印サイズを縮める */
.top_mv .swiper-button-prev::after,
.top_mv .swiper-button-next::after {
	font-size: 13px;
	font-weight: 700;
}

@media (max-width: 768px) {
	.top_mv { padding-inline: 20px; margin-top: 16px; }
	.mv_card_ttl { font-size: 13px; }
}

/* ============================================================
   セクション共通（③〜⑦）
   ※ .blocks_label / .block_btn / .card_meta / .small_card /
     .share_links / .recent_grid は記事詳細でも使うため
     components.css に移動済み。ここには置かない。
   ============================================================ */
/* ============================================================
   編集部が選ぶ（大カード1枚・画像左＋テキスト右）
   ============================================================ */
.pick_card {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 24px;
	background: var(--c-bg-tint);
	border-radius: var(--radius-md);
	padding: 20px;
}

.pick_card_img {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--c-bg);
	line-height: 0;
}

.pick_card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-size: 10px;
	color: var(--c-text-muted);
}

.pick_card_body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pick_card_badge {
	align-self: flex-start;
	background: var(--c-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 11px;
	border-radius: var(--radius-sm);
	margin-bottom: 10px;
	line-height: 1.5;
}

.pick_card_ttl {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 9px;
	text-wrap: balance;
}

.pick_card_ttl a {
	color: var(--c-text);
	text-decoration: none;
}

.pick_card_ttl a:hover { color: var(--c-accent); }

.pick_card_exc {
	font-size: 13px;
	line-height: 1.9;
	color: var(--c-text-sub);
	margin-bottom: 4px;
}

@media (max-width: 768px) {
	.pick_card     { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
	.pick_card_ttl { font-size: 16px; }
}

/* ============================================================
   新着記事（横並びリスト）
   ============================================================ */
.recent_list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.recent_item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--c-border);
}

.recent_item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.recent_item_img {
	display: block;
	flex-shrink: 0;
	width: 160px;
	height: 90px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--c-bg-tint);
	line-height: 0;
}

.recent_item_img img {
	width: 160px;
	height: 90px;
	object-fit: cover;
	font-size: 9px;
	color: var(--c-text-muted);
}

.recent_item_body { min-width: 0; }

.recent_item_ttl {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
}

.recent_item_ttl a {
	color: var(--c-text);
	text-decoration: none;
}

.recent_item_ttl a:hover { color: var(--c-accent); }

@media (max-width: 768px) {
	.recent_item     { gap: 13px; padding-bottom: 15px; }
	.recent_item_img { width: 120px; height: 68px; }
	.recent_item_img img { width: 120px; height: 68px; }
	.recent_item_ttl { font-size: 13.5px; }
}

@media (max-width: 450px) {
	.recent_item_img { width: 100px; height: 56px; }
	.recent_item_img img { width: 100px; height: 56px; }
}

/* ============================================================
   ③④ 記事ブロック（大カード + 小カード）
   ============================================================ */
.post_block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* --- 大カード --- */
.pickup_card {
	display: block;
	color: var(--c-text);
	text-decoration: none;
}

.pickup_card_img {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--c-bg-tint);
	line-height: 0;
}

.pickup_card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-size: 10px;
	color: var(--c-text-muted);
}

.pickup_card_body { display: block; margin-top: 12px; }

.pickup_card_ttl {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	transition: color .2s ease;
}

.pickup_card:hover .pickup_card_ttl { color: var(--c-accent); }

.pickup_card_exc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--c-text-sub);
}

/* --- 小カードのリスト --- */
.small_list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ※ .small_card / .small_card_img / .small_card_ttl は
     記事詳細でも使うため components.css に定義済み。 */

@media (max-width: 768px) {
	.blocks_label { font-size: 18px; }
	.post_block  { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.pickup_card_ttl { font-size: 16px; }
	.pickup_card_exc { display: none; }
}

@media (max-width: 450px) {
	.small_card_img     { width: 96px; height: 54px; }
	.small_card_img img { width: 96px; height: 54px; }
}

/* ============================================================
   カテゴリから探す（各カテゴリ ランダム1記事）
   ============================================================ */
.cat_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.cat_card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.cat_card:hover {
	border-color: var(--c-accent);
	box-shadow: var(--shadow-card);
}

.cat_card_img {
	display: block;
	aspect-ratio: 16 / 8.4;
	overflow: hidden;
	background: var(--c-bg-tint);
	line-height: 0;
}

.cat_card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-size: 10px;
	color: var(--c-text-muted);
	transition: transform .35s ease;
}

.cat_card:hover .cat_card_img img { transform: scale(1.04); }

.cat_card_body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1;
	padding: 13px 15px 15px;
}

.cat_card_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.cat_card_name {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--c-accent);
	text-decoration: none;
}

.cat_card_name:hover { text-decoration: underline; }

.cat_card_count {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * タイトルは常に2行ぶんの高さを確保する。
 * 1行の記事と2行の記事が混在すると、その下の要素の位置がカードごとにズレる。
 */
.cat_card_ttl {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	min-height: calc(13px * 1.6 * 2);
}

.cat_card_ttl a {
	color: var(--c-text);
	text-decoration: none;
	/* 2行で省略 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * 閲覧数バッジの行。
 * 閾値未満でバッジが出力されない場合も高さを確保し、
 * カード同士の「このカテゴリの記事をすべて見る」の位置を揃える。
 */
.cat_card_views {
	min-height: calc(11.5px * 1.5);
	line-height: 1.5;
}

.cat_card:hover .cat_card_ttl a { color: var(--c-accent); }

.cat_card_more {
	margin-top: auto;
	padding-top: 6px;
	font-size: 11.5px;
	color: var(--c-text-muted);
	text-decoration: none;
}

.cat_card_more:hover { color: var(--c-accent); text-decoration: none; }

.cat_grid_foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 14px;
}

.cat_reload {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	padding: 6px 14px;
	font-size: 12px;
	color: var(--c-text);
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.cat_reload:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
	text-decoration: none;
}

.cat_reload_icon { font-size: 13px; }

.cat_grid_note {
	font-size: 11.5px;
	color: var(--c-text-muted);
}

@media (max-width: 450px) {
	.cat_grid_foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 768px) {
	.cat_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 450px) {
	.cat_grid { grid-template-columns: minmax(0, 1fr); }
	.cat_grid_note { text-align: left; }
}

/* ============================================================
   ⑤ 人気の特集
   ============================================================ */
.feature_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.feature_card {
	display: block;
	color: var(--c-text);
	text-decoration: none;
}

.feature_card_img {
	display: block;
	aspect-ratio: 1100 / 620;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--c-bg-tint);
	line-height: 0;
}

.feature_card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-size: 10px;
	color: var(--c-text-muted);
}

.feature_card_ttl {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.6;
	transition: color .2s ease;
}

.feature_card:hover .feature_card_ttl { color: var(--c-accent); }

@media (max-width: 450px) {
	.feature_grid { gap: 16px; }
}

/* ============================================================
   ⑥ SNSボタン
   ============================================================ */

.share_btn--fb   { background: #3b5998; }
.share_btn--x    { background: #000000; }
.share_btn--line { background: #00c300; }

@media (max-width: 450px) {
	.share_btn span { display: none; }
	.share_links    { margin-bottom: 44px; }
}

/* ============================================================
   ⑦ 最近読んだ記事
   ============================================================ */

@media (max-width: 768px) {
	.recent_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}