/**
 * category（カテゴリー）アーカイブ — /category/{slug}/ 専用CSS
 *
 * テンプレート: category.php からのみ wp_enqueue_scripts（is_category()条件）で読込。
 * デザイン元: investalk.jp/category/ir-paper
 *
 * 構成:
 *  - ヒーロー帯: bg #f2eee8・フルブリード全幅・上下padding 160/120・中央1160・2カラム(row gap40)
 *      左 = 白カード(width500/radius12/padding40)= eyebrow + H1 + 「カテゴリーで探す」+ チップ + 検索
 *      右 = 注目記事カルーセル(残り幅)= 大画像16:9 + 色バッジ + タイトル + 前後矢印
 *  - 記事グリッド: 白・中央 max1160・padding 60/100・4列 grid・列gap32 行gap40
 *  - ページネーション（company-archive 流用）
 *  - お問い合わせCTA = [blog_parts id="150"]
 *
 * 色: #247465 eyebrow / #333 見出し / #363e39 ラベル / #f2eee8 帯地
 */

/* ============================================
   SWELL既定のアーカイブUI打ち消し（当アーカイブのみ）
   body.investalk-cat-archive を当テンプレが body_class で付与する。
   ============================================ */
.investalk-cat-archive #content {
	padding-top: 0;
}
.investalk-cat-archive .c-pageTitle,
.investalk-cat-archive .p-breadcrumb {
	display: none;
}

/* live はサイドバー無し（フルワイド1カラム）。SWELL の .l-sidebar を当アーカイブのみ非表示。 */
.investalk-cat-archive .l-sidebar {
	display: none;
}

/* テンプレが自前の1カラム構成を持つので、SWELLの最大幅/左右パディング制約を解除 */
.investalk-cat-archive .l-mainContent.investalk-cat-archive-main {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* ============================================
   base
   ============================================ */
.investalk-cat-archive-main {
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	color: #363e39;
	box-sizing: border-box;
}
.investalk-cat-archive-main *,
.investalk-cat-archive-main *::before,
.investalk-cat-archive-main *::after {
	box-sizing: border-box;
}

/* ============================================
   ヒーロー帯（フルブリード #f2eee8）
   ============================================ */
.investalk-cat-archive__hero {
	/* SWELL .l-mainContent の左右余白を打ち消し、ビューポート全幅にフルブリード */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #f2eee8;
	padding: 160px 20px 120px;
	display: flex;
	justify-content: center;
}
.investalk-cat-archive__hero-inner {
	width: 100%;
	max-width: 1160px;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 40px;
}

/* 左カラム（ベージュ地のまま・見出しは白カードの外に出す） */
.investalk-cat-archive__hero-left {
	flex: 0 0 500px;
	width: 500px;
	display: flex;
	flex-direction: column;
}

/* 検索ボックス（白カード・「カテゴリーで探す」＋チップ＋検索 のみを内包） */
.investalk-cat-archive__searchbox {
	margin-top: 24px;
	background: #fff;
	border-radius: 12px;
	padding: 40px;
	display: flex;
	flex-direction: column;
}

/* eyebrow（英字・色 #247465） */
.investalk-cat-archive__eyebrow {
	margin: 0 0 8px;
	color: #999999;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1;
}

/* カテゴリ名 H1（SWELL見出し装飾リセット込み） */
.investalk-cat-archive__title {
	margin: 0;
	color: #363e39;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	font-family: "Zen Kaku Gothic New", sans-serif;
	background: none;
	border: none;
	padding: 0;
}
.investalk-cat-archive__title::before,
.investalk-cat-archive__title::after {
	display: none;
	content: none;
}

/* 「カテゴリーで探す」ラベル */
.investalk-cat-archive__chips-label {
	margin: 0 0 12px;
	color: #363e39;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

/* カテゴリチップ（色付き完全角丸ピル・flex折返し） */
.investalk-cat-archive__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.investalk-cat-archive__chip {
	display: inline-flex;
	align-items: center;
	border-radius: 128px;
	padding: 4px 12px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.investalk-cat-archive__chip:hover {
	opacity: 0.85;
}
/* 現在のカテゴリは軽く強調（リング） */
.investalk-cat-archive__chip.is-current {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentColor;
}

/* 「タイトルで検索する」ラベル */
.investalk-cat-archive__search-label {
	margin: 24px 0 12px;
	color: #363e39;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

/* 検索ボックス（白カード内いっぱい） */
.investalk-cat-archive__search {
	position: relative;
	margin-top: 0;
	display: flex;
	width: 100%;
}
.investalk-cat-archive__search-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0 48px 0 16px;
	border: 1px solid #d8d2c8;
	border-radius: 8px;
	background: #fff;
	color: #363e39;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
}
.investalk-cat-archive__search-input::placeholder {
	color: #a7a097;
}
.investalk-cat-archive__search-input:focus {
	outline: none;
	border-color: #247465;
}
.investalk-cat-archive__search-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: #247465;
	cursor: pointer;
	padding: 0;
}
.investalk-cat-archive__search-btn .material-symbols-outlined {
	font-family: 'Material Symbols Outlined';
	font-size: 22px;
	line-height: 1;
}

/* ============================================
   右 = 注目記事カルーセル
   ============================================ */
.investalk-cat-archive__carousel {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}
.investalk-cat-archive__carousel-viewport {
	width: 100%;
	overflow: hidden;
	border-radius: 12px;
}
.investalk-cat-archive__carousel-track {
	display: flex;
	flex-wrap: nowrap;
	transition: transform 0.4s ease;
	will-change: transform;
}

/* 各スライド（1枚=ビューポート幅100%）
   slide-overlay は figure の兄弟。PC はこの slide を基準に absolute オーバーレイする。 */
.investalk-cat-archive__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	display: block;
	text-decoration: none;
	color: inherit;
}
.investalk-cat-archive__slide-thumb {
	position: relative;
	margin: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: #e6e0d6;
}
.investalk-cat-archive__slide-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.investalk-cat-archive__slide-noimg {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e6e0d6;
	color: #b5ab9b;
	font-size: 13px;
	letter-spacing: 0.08em;
}
/* 左上の「Pick Up」コーナーリボン（live の設計SVGをそのまま使用＝三角サイズ・フォント完全一致）。
   slide-thumb は overflow:hidden + radius12px なので、SVGの角はスライドの丸角に沿う。 */
.investalk-cat-archive__slide-thumb img.investalk-cat-archive__slide-pickup {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	object-fit: contain;
	display: block;
	z-index: 2;
	pointer-events: none;
}

/* 左上の色付きカテゴリバッジ */
.investalk-cat-archive__slide-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	border-radius: 128px;
	padding: 5px 14px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
/* 画像下部オーバーレイ（出典＋タイトルを画像に被せる。live準拠＝半透明白ベタ帯、グラデなし） */
.investalk-cat-archive__slide-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 24px 28px;
	background: rgba(255, 255, 255, 0.7);
}
.investalk-cat-archive__slide-source {
	margin: 0 0 6px;
	color: #555555;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}
.investalk-cat-archive__slide-title {
	margin: 0;
	color: #333333;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	background: none;
	border: none;
	padding: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.investalk-cat-archive__slide-title::before,
.investalk-cat-archive__slide-title::after {
	display: none;
	content: none;
}
.investalk-cat-archive__slide:hover .investalk-cat-archive__slide-title {
	opacity: 0.7;
}

/* 前後矢印 */
.investalk-cat-archive__carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	color: #333;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.investalk-cat-archive__carousel-arrow span {
	display: block;
	margin-top: -3px;
}
.investalk-cat-archive__carousel-arrow:hover {
	background: #fff;
}
.investalk-cat-archive__carousel-arrow--prev {
	left: 12px;
}
.investalk-cat-archive__carousel-arrow--next {
	right: 12px;
}
.investalk-cat-archive__carousel-arrow:disabled {
	opacity: 0.4;
	cursor: default;
}
.investalk-cat-archive__carousel-empty {
	color: #8a8378;
	font-size: 14px;
	text-align: center;
	width: 100%;
	padding: 60px 0;
}

/* ============================================
   記事グリッド（白・中央 max1160・4列）
   ============================================ */
.investalk-cat-archive__grid-section {
	width: 100%;
	background: #fff;
}
.investalk-cat-archive__grid-inner {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 60px 20px 100px;
}
.investalk-cat-archive__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 32px;
	row-gap: 40px;
}
/* grid item の min-width:auto による不均等列を防ぐ */
.investalk-cat-archive__grid > * {
	min-width: 0;
}

/* 空状態 */
.investalk-cat-archive__empty {
	color: #999;
	font-size: 15px;
	text-align: center;
	padding: 60px 0 80px;
}

/* ============================================
   ページネーション（company-archive 流用）
   ============================================ */
.investalk-cat-archive__pagination {
	margin-top: 48px;
	display: flex;
	justify-content: center;
}
.investalk-cat-archive__pagination .nav-links {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}
.investalk-cat-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #363e39;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.investalk-cat-archive__pagination .page-numbers.current {
	background: #04384c;
	border-color: #04384c;
	color: #fff;
}
.investalk-cat-archive__pagination a.page-numbers:hover {
	background: #f1f1f1;
}

/* ============================================
   お問い合わせCTA（[blog_parts id="150"] のラッパー）
   full-wide breakout はパーツ側で有効なので余白制御のみ。
   ============================================ */
.investalk-cat-archive__cta {
	width: 100%;
}
/* CTA見出し「お問い合わせはこちらから」h2 は SWELL の .post_content h2 既定で margin-top:144px が付き、
   リード文（個人投資家・企業様各位）との間に大きな空白ができる。当アーカイブのみ詰める（live準拠の小余白）。 */
.investalk-cat-archive .investalk-cat-archive__cta h2 {
	margin-top: 16px !important;
}
/* CTA（街並みシルエット）と共通フッターの間の余白（SWELL既定 .w-beforeFooter margin-top:96px）を
   当アーカイブのみ除去し、シルエットがフッターに繋がる（live準拠）。
   ※body class でなく body_wrap 等に付与される investalk-cat-archive を起点にする（body.*では不発のため）。
   ※別セッションは .page 限定で密着済み＝アーカイブは別途必要。 */
.investalk-cat-archive #before_footer_widget,
.investalk-cat-archive .w-beforeFooter {
	margin-top: 0 !important;
}
/* SWELL標準の「コンテンツ下マージン .l-content.l-container margin-bottom:96px」も当アーカイブで0に。
   （別セッションが .page 限定で0化済み＝.w-beforeFooter の margin-top と相殺で96px残るのを解消） */
.investalk-cat-archive .l-content.l-container {
	margin-bottom: 0 !important;
}

/* ============================================
   レスポンシブ — タブレット（959px以下）
   ヒーロー2カラム → 縦積み、グリッド4 → 2列
   ============================================ */
@media (max-width: 959px) {
	.investalk-cat-archive__hero {
		padding: 120px 20px 80px;
	}
	.investalk-cat-archive__hero-inner {
		flex-direction: column;
		gap: 28px;
	}
	.investalk-cat-archive__hero-left {
		flex: 1 1 auto;
		width: 100%;
	}
	.investalk-cat-archive__title {
		font-size: 32px;
	}
	.investalk-cat-archive__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 24px;
		row-gap: 32px;
	}

	/* --------------------------------------------
	   TB/SP（<=959）カルーセル: live 準拠でテキストを画像の外（下）へ。
	   出典＋タイトルは画像下に通常フロー、前後矢印は「出典行」を左右から挟む。
	   PC（>=960）の base ルール（オーバーレイ on 画像・矢印 左右中央）は不変。
	   -------------------------------------------- */

	/* カルーセル: 中央寄せ解除（縦は viewport=正方形を基準に矢印を出典行へ）。
	   margin-bottom = 白カード（absolute overlay）下と記事グリッドの間の余白。
	   overlay は absolute で浮きカルーセル高さに寄与しないため、margin で次セクション（グリッド）を
	   押し下げて余白を確保する（padding-bottom にすると top:100% 基準の矢印位置がズレるため margin を使う）。
	   実効ギャップ ≒ margin-bottom + ヒーロー padding-bottom − overlay高さ。 */
	.investalk-cat-archive__carousel {
		width: 100%;
		display: block; /* base の flex+align-items:center を解除 */
		margin-bottom: 72px;
	}
	/* viewport: 横はクリップ（隣スライドを隠しスライド動作維持）／縦は開放（画像下テキストを見せる）。
	   overlay は absolute 化（下記）で height に寄与しないため、viewport 高さ＝正方形画像高さで安定。
	   正方形クリップ・角丸は figure.slide-thumb 側が自前で担保するので viewport の radius は除去。 */
	.investalk-cat-archive__carousel-viewport {
		overflow-x: clip;
		overflow-y: visible;
		border-radius: 0;
	}
	/* スライドを上揃え＝正方形画像が viewport 上端から始まる。 */
	.investalk-cat-archive__carousel-track {
		align-items: flex-start;
	}

	/* 画像＋白テキスト領域で1枚の白カードにする（live 実測＝テキスト領域は純白 #fff・
	   カード下にクリーム余白）。画像は上だけ角丸・下は直線にして下の白ブロックと連結。 */
	.investalk-cat-archive__slide-thumb {
		border-radius: 12px 12px 0 0;
	}

	/* オーバーレイ → 画像の外（下）へ。absolute(top:100% of slide=正方形図形の直下) で
	   フローから外し viewport 高さに寄与させない＝viewport高さ=正方形画像高さを保つ。
	   背景は白（live 実測 #fff）＝画像と地続きの白カード。下だけ角丸でカード下端を丸める。
	   slide は base で position:relative。 */
	.investalk-cat-archive__slide-overlay {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		bottom: auto;
		background: #fff;
		border-radius: 0 0 12px 12px;
		padding: 18px 24px 22px; /* タイトルはこの左右24pxインセット。白カード内の余白。 */
		text-align: left;        /* 出典・タイトルとも左寄せ（live 実測 align:left 準拠） */
	}
	/* 出典は左寄せだが、前後矢印（左右端・40px）に重ならないよう更に内側へ。
	   live 準拠＝「‹ 出典 …… ›」＝出典は左の矢印直後から始まる左寄せ。
	   overlay 左右24px + 出典自身28px ≒ カード端から52px＝矢印（left/right:12 幅40＝〜52px）を回避。 */
	.investalk-cat-archive__slide-source {
		margin: 0 0 6px;
		padding: 0 28px;
		color: #555555;
	}
	.investalk-cat-archive__slide-title {
		text-align: left; /* タイトルは左寄せ・カード余白内で幅いっぱい（live 準拠） */
		color: #333333;
	}

	/* 前後矢印を白カードの「出典行」の高さへ再配置（base の top:50%/translateY を上書き）。
	   viewport(=カルーセル)高さ=正方形画像高さ。top:100% で画像下端＝白カード上端、
	   +28px で出典行中心へ（白カード padding-top 18 + 半行≒10）。 */
	.investalk-cat-archive__carousel-arrow {
		top: calc(100% + 28px);
		transform: translateY(-50%);
		/* 白カード上では live と同じく白丸を出さずアイコン（シェブロン）のみ見せる
		   （live は白丸 no-shadow で白地に溶ける）＝透明地で同じ見た目に。 */
		background: transparent;
		box-shadow: none;
	}
	.investalk-cat-archive__carousel-arrow:hover {
		background: transparent;
		opacity: 0.6;
	}
}

/* ============================================
   レスポンシブ — モバイル（599px以下）
   グリッド 2 → 1列、カルーセル幅100%
   ============================================ */
@media (max-width: 599px) {
	.investalk-cat-archive__hero {
		padding: 100px 16px 56px;
	}
	/* SP: スライドが小さいので Pick Up リボンも縮小 */
	.investalk-cat-archive__slide-thumb img.investalk-cat-archive__slide-pickup {
		width: 72px;
		height: 72px;
	}
	/* SP はヒーロー padding-bottom が小さく（56px）タイトルも折返しやすいので
	   白カード下の余白を多めに確保（TB の 72px を上書き）。 */
	.investalk-cat-archive__carousel {
		margin-bottom: 104px;
	}
	.investalk-cat-archive__searchbox {
		padding: 28px 20px;
	}
	.investalk-cat-archive__title {
		font-size: 28px;
	}
	.investalk-cat-archive__grid-inner {
		padding: 40px 16px 64px;
	}
	.investalk-cat-archive__grid {
		grid-template-columns: 1fr;
		row-gap: 28px;
	}
	.investalk-cat-archive__slide-title {
		font-size: 16px;
	}
}

/* ============================================
   検索結果ページ（search.php）
   ヒーローを category.php と左右反転: 左=「検索ワード」＋検索語（ベージュ地のまま）/
   右=白パネル（カテゴリチップ＋タイトル検索）。白カードは .investalk-cat-archive__searchbox を流用。
   ============================================ */
.investalk-search__hero-left {
	flex: 0 0 360px;
	width: 360px;
	justify-content: center; /* 検索語を右パネルの高さに対して縦中央に置く */
}
.investalk-search__panel {
	flex: 1 1 auto;          /* ヒーロー右側を占める（≒760px） */
	margin-top: 0;           /* searchbox 既定の上マージン(24px)を打ち消し、左の検索語と頭を揃える */
}
/* ヒット無し時のメッセージ（白の結果エリアに中央表示・live準拠） */
.investalk-search__noresult {
	margin: 0;
	text-align: center;
	color: #363e39;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	padding: 80px 20px 100px;
}

/* TB/SP（<=959）: ヒーローは cat-archive 既定で縦積み。検索語ブロックを全幅に戻す。 */
@media (max-width: 959px) {
	.investalk-search__hero-left {
		flex: 1 1 auto;
		width: 100%;
	}
}