/*
Theme Name: Takapi Child
Theme URI: https://108takapi.jp/
Template: takapi
Author: 株式会社トラスト
Author URI: https://108takapi.jp/
Description: 週刊TAKAPIテーマ（Takapi）の子テーマ。修正・カスタマイズはこのテーマ内で行います。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: takapi-child
*/

/* ============================================
   子テーマのカスタムCSSはこのファイルに記述する
   （親テーマの style.css / header.css / front-page.css /
     footer.css より後に読み込まれる）
   ============================================ */

/* --------------------------------------------
   トップおすすめ枠（takapi-top-recommend プラグイン）
   デスクトップで内側が max-width:1000px に制限され、
   他エリア（コンテナ実質1140px）より狭いため合わせる。
   プラグインのインラインCSSより後に出力されないため、
   クラス2つで詳細度を上げて上書きする。
   -------------------------------------------- */
@media (min-width: 901px) {
	.takapi-top-recommend .takapi-top-recommend-inner {
		max-width: 1140px;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	}

	/* 横に広がる分、高さも少し増やしてバランスを取る */
	.takapi-top-recommend .takapi-top-recommend-main,
	.takapi-top-recommend .takapi-top-recommend-main img,
	.takapi-top-recommend .takapi-top-recommend-main > .takapi-top-recommend-noimage {
		min-height: 400px;
	}
}

/* --------------------------------------------
   注目NEWS枠（takapi-pickup-posts プラグイン）A案
   黒枠の入れ子をやめてフラットに。
   スマホは「左サムネ・右タイトル」の横並びリスト化。
   プラグインのインラインCSSより優先させるため、
   ID（#takapi-pickup-posts）で詳細度を上げて上書きする。
   タイトル文字列はプラグイン設定値をそのまま表示。
   -------------------------------------------- */

/* ===== 共通（PC・スマホ） ===== */
#takapi-pickup-posts {
	background: #fff;
	border: 0;
}

/* 見出し：青帯をやめ、PICKUPバッジ＋黒下線の左寄せに */
#takapi-pickup-posts h2 {
	align-items: center;
	background: none;
	border-bottom: 2px solid var(--takapi-text, #111);
	color: var(--takapi-text, #111);
	display: flex;
	font-family: inherit;
	font-size: 22px;
	font-weight: 800;
	gap: 10px;
	letter-spacing: .02em;
	line-height: 1.3;
	padding: 0 0 10px;
	text-align: left;
}

#takapi-pickup-posts h2::before {
	background: var(--takapi-blue, #0057bd);
	border-radius: 3px;
	color: #fff;
	content: "PICKUP";
	flex-shrink: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	line-height: 1;
	padding: 5px 8px;
}

/* サムネの「アイキャッチ」プレースホルダーを控えめに */
#takapi-pickup-posts .takapi-pickup-thumb {
	background: #eef1f6;
	color: #8a94a6;
	font-size: 14px;
}

/* ピックアップは編集部の選定枠なのでNEWバッジは出さない
   （おすすめ枠 top-recommend と同じ扱い） */
#takapi-pickup-posts .takapi-new-badge {
	display: none !important;
}

#takapi-pickup-posts .takapi-pickup-thumb span {
	transform: none;
}

/* ===== PC（901px〜）：3カラム維持で枠線だけ軽量化 ===== */
@media (min-width: 901px) {
	#takapi-pickup-posts .takapi-pickup-grid {
		gap: 28px;
		padding: 22px 0 0;
	}

	#takapi-pickup-posts .takapi-pickup-card {
		border: 1px solid var(--takapi-border, #e5eaf1);
		border-radius: 10px;
		overflow: hidden;
	}

	#takapi-pickup-posts .takapi-pickup-thumb {
		border-bottom: 1px solid var(--takapi-border, #e5eaf1);
	}

	#takapi-pickup-posts .takapi-pickup-card h3 {
		display: -webkit-box;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.55;
		min-height: 0;
		overflow: hidden;
		padding: 14px 16px 16px;
		text-align: left;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
}

/* ===== スマホ（〜900px）：横並びリスト＋番号バッジ ===== */
@media (max-width: 900px) {
	#takapi-pickup-posts {
		border: 0;
		margin: 26px 0 30px;
	}

	#takapi-pickup-posts h2 {
		font-size: 18px;
	}

	#takapi-pickup-posts .takapi-pickup-grid {
		counter-reset: takapi-pickup;
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 2px 0 0;
	}

	#takapi-pickup-posts .takapi-pickup-card {
		align-items: center;
		border: 0;
		border-bottom: 1px solid var(--takapi-border, #e5eaf1);
		border-radius: 0;
		counter-increment: takapi-pickup;
		display: flex;
		gap: 12px;
		padding: 14px 0;
	}

	#takapi-pickup-posts .takapi-pickup-card:last-child {
		border-bottom: 0;
		padding-bottom: 6px;
	}

	#takapi-pickup-posts .takapi-pickup-thumb {
		aspect-ratio: 16 / 10;
		border: 0;
		border-radius: 8px;
		flex-shrink: 0;
		font-size: 12px;
		overflow: hidden;
		position: relative;
		width: 128px;
	}

	/* 左上の番号バッジ（1〜3） */
	#takapi-pickup-posts .takapi-pickup-thumb::after {
		align-items: center;
		background: var(--takapi-blue, #0057bd);
		border-radius: 8px 0 8px 0;
		color: #fff;
		content: counter(takapi-pickup);
		display: flex;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-weight: 900;
		height: 22px;
		justify-content: center;
		left: 0;
		position: absolute;
		top: 0;
		width: 22px;
		z-index: 1;
	}

	#takapi-pickup-posts .takapi-pickup-card h3 {
		display: -webkit-box;
		flex: 1;
		font-size: 14.5px;
		font-weight: 700;
		line-height: 1.5;
		min-height: 0;
		min-width: 0;
		overflow: hidden;
		padding: 0;
		text-align: left;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
}

/* --------------------------------------------
   記事一覧カード（トップ＝.takapi-news-grid／
   新着一覧・カテゴリ一覧・検索結果＝.takapi-card-grid）
   カードは子テーマ版 takapi_child_post_card() の出力。
   ・タイトル3行省略（PC・スマホ共通）
   ・カテゴリは日付横の青テキスト
   ・NEWバッジ（new-badgeプラグイン）を小型チップ化
   ・スマホ（768px以下）は「左サムネ・右タイトル」の横並びリスト
   -------------------------------------------- */

/* ===== 共通 ===== */
.takapi-news-grid .takapi-post-title,
.takapi-card-grid .takapi-post-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.takapi-news-grid .takapi-post-meta,
.takapi-card-grid .takapi-post-meta {
	align-items: center;
	color: var(--takapi-muted, #667085);
	display: flex;
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
	margin: 0;
}

.takapi-news-grid .takapi-post-cat,
.takapi-card-grid .takapi-post-cat {
	color: var(--takapi-blue, #0057bd);
	font-weight: 800;
}

.takapi-news-grid .takapi-post-cat::after,
.takapi-card-grid .takapi-post-cat::after {
	color: #c9d2de;
	content: "｜";
	font-weight: 400;
	margin-left: 8px;
}

.takapi-news-grid .takapi-post-meta .takapi-post-date,
.takapi-card-grid .takapi-post-meta .takapi-post-date {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
}

/* NEWバッジ：大きなスタンプ → 小さな赤チップ */
.takapi-news-grid .takapi-new-badge,
.takapi-card-grid .takapi-new-badge {
	background: var(--takapi-red, #d52b22);
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-size: 11px;
	font-style: normal;
	font-weight: 900;
	left: 6px;
	letter-spacing: .05em;
	min-width: 0;
	padding: 4px 6px;
	text-shadow: none;
	top: 6px;
	transform: none;
}

/* ===== セクションの区切りを明確に =====
   余白だけで区切られていて境界が分かりづらいため、
   見出し行に全幅の下線（ピックアップ枠の見出しと同じ言語）＋
   セクション間の余白を拡大 */
.takapi-front-page .takapi-news-section {
	margin-top: 64px;
}

.takapi-front-page .takapi-news-section:first-of-type {
	margin-top: 28px;
}

.takapi-front-page .takapi-section-head {
	border-bottom: 2px solid var(--takapi-text, #111);
	margin-bottom: 20px;
	padding-bottom: 10px;
}

/* セクション中間のSNSフォロー枠も同じリズムに */
.takapi-front-page .takapi-sns-follow--front {
	margin-top: 64px;
}

@media (max-width: 768px) {
	.takapi-front-page .takapi-news-section {
		margin-top: 48px;
	}

	.takapi-front-page .takapi-news-section:first-of-type {
		margin-top: 24px;
	}

	.takapi-front-page .takapi-sns-follow--front {
		margin-top: 48px;
	}

	.takapi-front-page .takapi-section-head {
		margin-bottom: 12px;
	}
}

/* ===== PC（769px〜） ===== */
@media (min-width: 769px) {
	.takapi-news-grid .takapi-post-title,
	.takapi-card-grid .takapi-post-title {
		margin: 12px 0 8px;
	}
}

/* ===== スマホ（〜768px）：横並びリスト ===== */
@media (max-width: 768px) {
	.takapi-front-page .takapi-news-grid,
	.takapi-content-layout .takapi-card-grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.takapi-front-page .takapi-news-grid .takapi-post-card,
	.takapi-content-layout .takapi-card-grid .takapi-post-card {
		align-items: center;
		border-bottom: 1px solid var(--takapi-border, #e5eaf1);
		display: flex;
		gap: 12px;
		padding: 13px 0;
	}

	.takapi-front-page .takapi-news-grid .takapi-post-card:last-child,
	.takapi-content-layout .takapi-card-grid .takapi-post-card:last-child {
		border-bottom: 0;
	}

	.takapi-front-page .takapi-news-grid .takapi-post-thumb,
	.takapi-content-layout .takapi-card-grid .takapi-post-thumb {
		aspect-ratio: 16 / 10;
		border-radius: 8px;
		flex-shrink: 0;
		width: 128px;
	}

	.takapi-front-page .takapi-news-grid .takapi-post-body,
	.takapi-content-layout .takapi-card-grid .takapi-post-body {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 6px;
		min-width: 0;
	}

	.takapi-front-page .takapi-news-grid .takapi-post-title,
	.takapi-content-layout .takapi-card-grid .takapi-post-title {
		font-size: 14.5px;
		font-weight: 700;
		line-height: 1.5;
		margin: 0;
	}

	.takapi-front-page .takapi-news-grid .takapi-post-meta,
	.takapi-content-layout .takapi-card-grid .takapi-post-meta {
		font-size: 11px;
		gap: 6px;
	}

	.takapi-front-page .takapi-news-grid .takapi-post-cat::after,
	.takapi-content-layout .takapi-card-grid .takapi-post-cat::after {
		margin-left: 6px;
	}

	.takapi-front-page .takapi-news-grid .takapi-new-badge,
	.takapi-content-layout .takapi-card-grid .takapi-new-badge {
		font-size: 9px;
		left: 0;
		padding: 3px 5px;
		border-radius: 8px 0 6px 0;
		top: 0;
	}
}

/* --------------------------------------------
   記事ページ：前後記事ナビ＋「記事一覧に戻る」ボタン
   （子テーマ single.php の出力）
   -------------------------------------------- */

/* 本文とナビの間隔を詰める（親は margin-bottom:70px） */
.single .takapi-entry {
	margin-bottom: 34px;
}

.takapi-entry-nav {
	margin: 0 auto 70px;
	max-width: 860px;
	padding: 0 20px;
}

.takapi-entry-nav-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 前の記事がない場合も「次の記事」を右側に置く */
.takapi-entry-nav-item.takapi-next {
	grid-column: 2;
	text-align: right;
}

.takapi-entry-nav-item.takapi-prev {
	grid-column: 1;
}

.takapi-entry-nav-item {
	border: 1px solid var(--takapi-border, #e5eaf1);
	border-radius: 10px;
	color: var(--takapi-text, #111);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px;
	text-decoration: none;
	transition: border-color .2s ease, background .2s ease;
}

.takapi-entry-nav-item:hover {
	background: var(--takapi-soft, #f5f8fc);
	border-color: var(--takapi-blue, #0057bd);
}

.takapi-entry-nav-label {
	color: var(--takapi-blue, #0057bd);
	font-size: 12px;
	font-weight: 900;
}

.takapi-entry-nav-title {
	display: -webkit-box;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.takapi-entry-back {
	margin-top: 22px;
	text-align: center;
}

.takapi-entry-back a {
	border: 1px solid var(--takapi-text, #111);
	border-radius: 999px;
	color: var(--takapi-text, #111);
	display: inline-flex;
	font-size: 14px;
	font-weight: 800;
	padding: 11px 34px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.takapi-entry-back a:hover {
	background: var(--takapi-blue, #0057bd);
	border-color: var(--takapi-blue, #0057bd);
	color: #fff;
}

/* スマホ：前後ナビを縦積みに */
@media (max-width: 680px) {
	.takapi-entry-nav {
		padding: 0 16px;
	}

	.takapi-entry-nav-grid {
		grid-template-columns: 1fr;
	}

	.takapi-entry-nav-item.takapi-next {
		grid-column: auto;
		text-align: right;
	}

	.takapi-entry-nav-item.takapi-prev {
		grid-column: auto;
	}

	.takapi-entry-back a {
		display: flex;
		justify-content: center;
	}
}

/* --------------------------------------------
   SNS：フローティングシェアバーの停止＋フォロー枠
   -------------------------------------------- */

/* sns-share-buttons プラグインの画面下固定バーを非表示
   （コンテンツに常時被さるため。本番ではプラグイン停止を推奨） */
.sns-share-bar {
	display: none !important;
}

/* 公式SNSフォロー枠（トップ中央・フッター・記事下で共用） */
.takapi-sns-follow {
	align-items: center;
	border: 1px solid var(--takapi-border, #e5eaf1);
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	justify-content: space-between;
	padding: 20px 24px;
}

.takapi-sns-follow-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.takapi-sns-follow-title {
	color: var(--takapi-text, #111);
	font-size: 16px;
	font-weight: 900;
}

.takapi-sns-follow-sub {
	color: var(--takapi-muted, #667085);
	font-size: 12.5px;
	font-weight: 700;
}

.takapi-sns-follow-icons {
	display: flex;
	gap: 12px;
}

.takapi-sns-icon {
	align-items: center;
	border-radius: 50%;
	color: #fff;
	display: flex;
	height: 44px;
	justify-content: center;
	text-decoration: none;
	transition: opacity .2s ease, transform .2s ease;
	width: 44px;
}

.takapi-sns-icon:hover {
	opacity: .85;
	transform: translateY(-2px);
}

.takapi-sns-icon svg {
	height: 20px;
	width: 20px;
}

.takapi-sns-icon--line {
	background: #06c755;
}

.takapi-sns-icon--x {
	background: #0f1419;
}

.takapi-sns-icon--instagram {
	background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.takapi-sns-icon--tiktok {
	background: #010101;
}

/* トップ中央：セクションの合間に置くので背景色で区切る */
.takapi-sns-follow--front {
	background: var(--takapi-soft, #f5f8fc);
	border: 0;
	margin-top: 42px;
}

/* 記事下：本文と同じ幅に */
.takapi-entry-follow {
	margin: 0 auto 34px;
	max-width: 860px;
	padding: 0 20px;
}

/* フッター：背景写真の上に置くので白背景で浮かせる */
.takapi-sns-follow--footer {
	background: rgba(255, 255, 255, .93);
	margin: 26px 0 30px;
}

@media (max-width: 680px) {
	.takapi-sns-follow {
		justify-content: center;
		text-align: center;
	}

	.takapi-sns-follow-label {
		align-items: center;
	}

	.takapi-entry-follow {
		padding: 0 16px;
	}
}

/* --------------------------------------------
   広告主募集ページ（専用テンプレート）
   -------------------------------------------- */

.takapi-ad-page {
	padding-bottom: 70px;
}

/* ヒーロー */
.takapi-ad-hero {
	background: linear-gradient(135deg, var(--takapi-blue-dark, #00469a) 0%, var(--takapi-blue, #0057bd) 55%, #1976f3 100%);
	color: #fff;
	padding: 64px 20px 58px;
	text-align: center;
}

.takapi-ad-hero-inner {
	margin: 0 auto;
	max-width: 760px;
}

.takapi-ad-hero-label {
	color: var(--takapi-yellow, #ffc928);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .22em;
	margin: 0 0 14px;
}

.takapi-ad-hero-title {
	font-size: 38px;
	font-weight: 900;
	line-height: 1.35;
	margin: 0 0 18px;
}

.takapi-ad-hero-lead {
	color: rgba(255, 255, 255, .92);
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
	margin: 0 0 30px;
}

/* ボタン共通 */
.takapi-ad-button {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: 16px;
	font-weight: 900;
	gap: 10px;
	padding: 15px 40px;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.takapi-ad-button--yellow {
	background: var(--takapi-yellow, #ffc928);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	color: #111;
}

.takapi-ad-button:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
	transform: translateY(-2px);
}

/* セクション共通 */
.takapi-ad-section {
	margin-top: 56px;
}

.takapi-ad-heading {
	border-left: 5px solid var(--takapi-blue, #0057bd);
	font-size: 26px;
	font-weight: 900;
	line-height: 1.25;
	margin: 0 0 22px;
	padding-left: 12px;
}

.takapi-ad-caption {
	color: var(--takapi-muted, #667085);
	font-size: 14px;
	font-weight: 700;
	margin: 16px 0 0;
}

/* 掲載メニュー */
.takapi-ad-menu-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.takapi-ad-menu-item {
	align-items: center;
	border: 1px solid var(--takapi-border, #e5eaf1);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 12px 18px;
	text-align: center;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.takapi-ad-menu-item:hover {
	border-color: var(--takapi-blue, #0057bd);
	box-shadow: 0 6px 16px rgba(0, 87, 189, .08);
}

.takapi-ad-menu-icon {
	align-items: center;
	background: var(--takapi-soft, #f5f8fc);
	border-radius: 50%;
	color: var(--takapi-blue, #0057bd);
	display: flex;
	height: 52px;
	justify-content: center;
	width: 52px;
}

.takapi-ad-menu-icon svg {
	height: 24px;
	width: 24px;
}

.takapi-ad-menu-label {
	font-size: 14px;
	font-weight: 800;
}

/* 発信ジャンル */
.takapi-ad-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.takapi-ad-chips li {
	background: var(--takapi-soft, #f5f8fc);
	border-radius: 999px;
	color: var(--takapi-blue-dark, #00469a);
	font-size: 14px;
	font-weight: 800;
	padding: 10px 20px;
}

/* CTA */
.takapi-ad-cta {
	background: var(--takapi-soft, #f5f8fc);
	border-radius: 16px;
	padding: 44px 28px;
	text-align: center;
}

.takapi-ad-cta-title {
	font-size: 24px;
	font-weight: 900;
	margin: 0 0 14px;
}

.takapi-ad-cta-text {
	color: var(--takapi-text, #111);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.9;
	margin: 0 auto 20px;
	max-width: 620px;
}

.takapi-ad-checklist {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.takapi-ad-checklist li {
	background: #fff;
	border: 1px solid var(--takapi-border, #e5eaf1);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 800;
	padding: 9px 18px;
}

.takapi-ad-checklist li::before {
	color: var(--takapi-blue, #0057bd);
	content: "✓ ";
	font-weight: 900;
}

.takapi-ad-note {
	color: var(--takapi-muted, #667085);
	font-size: 12.5px;
	font-weight: 700;
	margin: 24px 0 0;
}

/* スマホ */
@media (max-width: 680px) {
	.takapi-ad-hero {
		padding: 44px 16px 42px;
	}

	.takapi-ad-hero-title {
		font-size: 26px;
	}

	.takapi-ad-hero-lead {
		font-size: 14px;
		text-align: left;
	}

	.takapi-ad-section {
		margin-top: 42px;
	}

	.takapi-ad-heading {
		font-size: 22px;
	}

	.takapi-ad-menu-grid {
		gap: 10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.takapi-ad-cta {
		padding: 32px 18px;
	}

	.takapi-ad-cta-title {
		font-size: 20px;
	}

	.takapi-ad-cta-text {
		text-align: left;
	}

	.takapi-ad-button {
		display: flex;
		justify-content: center;
	}
}