@charset "UTF-8";
/* ============================================================
   Airdrop Blog Kit for Cocoon  v1.0
   設置場所: cocoon-child-master/ap-airdrop.css
   ※ ap-airdrop.php が自動で読み込みます（追加設定は不要）
   ※ すべて .ap- 接頭辞。Cocoon 標準のスタイルとは競合しません
   ============================================================ */

/* ---------- 1. デザイントークン ---------- */
:root {
	--ap-bg: #ffffff;
	--ap-bg-sub: #f5f5f7;
	--ap-bg-card: #ffffff;
	--ap-text: #1d1d1f;
	--ap-text-sub: #6e6e73;
	--ap-line: rgba(0, 0, 0, .08);
	--ap-line-strong: rgba(0, 0, 0, .14);
	--ap-accent: #0071e3;
	--ap-accent-ink: #ffffff;
	--ap-green: #147a3d;
	--ap-green-bg: #e9f6ee;
	--ap-orange: #a8460b;
	--ap-orange-bg: #fdf0e7;
	--ap-red: #c8102e;
	--ap-red-bg: #fdecee;
	--ap-blue-bg: #eaf3fd;
	--ap-gray-bg: #f0f0f2;
	--ap-star: #f5a524;

	--ap-radius: 18px;
	--ap-radius-sm: 12px;
	--ap-radius-pill: 999px;
	--ap-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
	--ap-shadow-hover: 0 2px 6px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .10);

	--ap-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans",
		"Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
}

/* Cocoon のダークモード／OS ダークでも読めるように最低限だけ上書き */
@media (prefers-color-scheme: dark) {
	body.ap-dark-ready {
		--ap-bg: #000000;
		--ap-bg-sub: #1c1c1e;
		--ap-bg-card: #1c1c1e;
		--ap-text: #f5f5f7;
		--ap-text-sub: #a1a1a6;
		--ap-line: rgba(255, 255, 255, .12);
		--ap-line-strong: rgba(255, 255, 255, .2);
	}
}

/* ---------- 2. 共通 ---------- */
.ap-section,
.ap-hero,
.ap-spec,
.ap-faq,
.ap-guide {
	font-family: var(--ap-font);
	color: var(--ap-text);
	-webkit-font-smoothing: antialiased;
}

.ap-section {
	margin: 0 0 3rem;
}

.ap-section__head {
	margin: 0 0 1rem;
}

.ap-section__title {
	font-size: 1.35rem;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: .01em;
	margin: 0 0 .35rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--ap-text);
}

.ap-section__title::before,
.ap-section__title::after {
	content: none;
}

.ap-section__sub {
	font-size: .85rem;
	line-height: 1.7;
	color: var(--ap-text-sub);
	margin: 0;
}

.ap-section__foot {
	margin-top: 1.1rem;
	text-align: center;
}

.ap-more {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .7em 1.6em;
	border: 1px solid var(--ap-line-strong);
	border-radius: var(--ap-radius-pill);
	font-size: .85rem;
	font-weight: 600;
	color: var(--ap-text);
	text-decoration: none;
	background: var(--ap-bg-card);
	transition: background .2s ease, border-color .2s ease;
}

.ap-more::after {
	content: "›";
	font-size: 1.1em;
	line-height: 1;
}

.ap-more:hover {
	background: var(--ap-bg-sub);
	border-color: var(--ap-line-strong);
	text-decoration: none;
}

.ap-empty {
	margin: 0;
	padding: 2rem 1.2rem;
	background: var(--ap-bg-sub);
	border-radius: var(--ap-radius);
	color: var(--ap-text-sub);
	font-size: .85rem;
	text-align: center;
}

/* ---------- 3. カードレイアウト（モバイル最優先） ---------- */
.ap-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.ap-scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
	margin: 0 -5vw;
	padding-left: 5vw;
	padding-right: 5vw;
	scrollbar-width: thin;
}

.ap-scroller > .ap-card {
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.ap-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.ap-scroller { grid-auto-columns: 46%; }
}

@media (min-width: 1000px) {
	.ap-grid { grid-template-columns: repeat(3, 1fr); }
	.ap-scroller {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: repeat(3, 1fr);
		overflow: visible;
		margin: 0;
		padding: 0;
	}
	.ap-section__title { font-size: 1.6rem; }
}

/* ---------- 4. カード ---------- */
.ap-card {
	background: var(--ap-bg-card);
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius);
	overflow: hidden;
	box-shadow: var(--ap-shadow);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

.ap-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ap-shadow-hover);
}

.ap-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.ap-card__link:hover {
	text-decoration: none;
	color: inherit;
}

.ap-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ap-bg-sub);
	overflow: hidden;
}

.ap-card__img,
.ap-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	border-radius: 0;
}

.ap-card__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%);
}

.ap-card__rank {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, .78);
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: 0;
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
}

.ap-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.ap-card__title {
	font-size: .98rem;
	line-height: 1.5;
	font-weight: 700;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--ap-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ap-card__title::before,
.ap-card__title::after { content: none; }

.ap-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-top: auto;
	padding-top: 6px;
	border-top: 1px solid var(--ap-line);
	font-size: .74rem;
	color: var(--ap-text-sub);
}

.ap-meta {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	white-space: nowrap;
}

.ap-meta__k {
	color: var(--ap-text-sub);
	opacity: .8;
}

/* ---------- 5. バッジ ---------- */
.ap-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ap-badge {
	display: inline-block;
	padding: .28em .7em;
	border-radius: var(--ap-radius-pill);
	font-size: .68rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
	white-space: nowrap;
}

.ap-badge--open    { background: var(--ap-green-bg);  color: var(--ap-green); }
.ap-badge--claim   { background: var(--ap-blue-bg);   color: var(--ap-accent); }
.ap-badge--listing { background: #f3eefe;             color: #5b34c9; }
.ap-badge--ended   { background: var(--ap-gray-bg);   color: var(--ap-text-sub); }
.ap-badge--urgent  { background: var(--ap-red-bg);    color: var(--ap-red); }
.ap-badge--soft    { background: var(--ap-bg-sub);    color: var(--ap-text-sub); }

/* ---------- 6. 星 ---------- */
.ap-stars {
	color: var(--ap-star);
	letter-spacing: .02em;
	font-size: .95em;
}

.ap-stars__off {
	color: var(--ap-line-strong);
}

/* ---------- 7. ヒーロー ---------- */
.ap-hero {
	background: var(--ap-bg-sub);
	border-radius: var(--ap-radius);
	padding: 28px 20px 26px;
	margin: 0 0 2.5rem;
	text-align: center;
}

.ap-hero__eyebrow {
	display: inline-block;
	margin: 0 0 .9rem;
	padding: .3em .9em;
	background: var(--ap-bg-card);
	border-radius: var(--ap-radius-pill);
	font-size: .72rem;
	font-weight: 600;
	color: var(--ap-text-sub);
	border: 1px solid var(--ap-line);
}

.ap-hero__title {
	font-size: 1.55rem;
	line-height: 1.35;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 .7rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--ap-text);
}

.ap-hero__title::before,
.ap-hero__title::after { content: none; }

.ap-hero__lead {
	font-size: .88rem;
	line-height: 1.85;
	color: var(--ap-text-sub);
	margin: 0 auto 1.4rem;
	max-width: 34em;
	text-align: left;
}

.ap-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

@media (min-width: 768px) {
	.ap-hero { padding: 48px 40px 44px; }
	.ap-hero__title { font-size: 2.2rem; }
	.ap-hero__lead { font-size: .95rem; text-align: center; }
}

/* ---------- 8. ボタン ---------- */
.ap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	padding: .85em 1.6em;
	border-radius: var(--ap-radius-pill);
	border: 1px solid var(--ap-line-strong);
	background: var(--ap-bg-card);
	color: var(--ap-text);
	font-size: .87rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
	transition: opacity .2s ease, background .2s ease;
}

.ap-btn:hover {
	text-decoration: none;
	color: var(--ap-text);
	background: var(--ap-bg-sub);
}

.ap-btn--primary {
	background: var(--ap-accent);
	border-color: var(--ap-accent);
	color: var(--ap-accent-ink);
}

.ap-btn--primary:hover {
	background: var(--ap-accent);
	color: var(--ap-accent-ink);
	opacity: .88;
}

/* ---------- 9. 案件データ表（記事内） ---------- */
.ap-spec {
	background: var(--ap-bg-card);
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow);
	padding: 20px 18px;
	margin: 0 0 2rem;
}

.ap-spec__head {
	margin-bottom: 16px;
}

.ap-spec__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: .6rem 0 .2rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--ap-text);
}

.ap-spec__title::before,
.ap-spec__title::after { content: none; }

.ap-spec__updated {
	font-size: .72rem;
	color: var(--ap-text-sub);
	margin: 0;
}

.ap-spec__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ap-line);
}

.ap-spec__item {
	display: grid;
	grid-template-columns: 6.5em 1fr;
	gap: 12px;
	align-items: start;
	padding: 11px 2px;
	border-bottom: 1px solid var(--ap-line);
	margin: 0;
}

.ap-spec__item dt {
	font-size: .78rem;
	font-weight: 600;
	color: var(--ap-text-sub);
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

.ap-spec__item dd {
	font-size: .88rem;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	word-break: break-word;
}

.ap-spec__item dd a {
	color: var(--ap-accent);
	text-decoration: none;
}

.ap-spec__item dd a:hover { text-decoration: underline; }

.ap-note {
	display: block;
	font-size: .74rem;
	color: var(--ap-text-sub);
	margin-top: 2px;
}

.ap-note.ap-is-urgent {
	color: var(--ap-red);
	font-weight: 700;
}

@media (min-width: 768px) {
	.ap-spec { padding: 26px 28px; }
	.ap-spec__grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
}

/* ---------- 10. 参加方法ステップ ---------- */
.ap-steps {
	margin-top: 20px;
	padding: 16px 16px 6px;
	background: var(--ap-bg-sub);
	border-radius: var(--ap-radius-sm);
}

.ap-steps__title {
	font-size: .92rem;
	font-weight: 700;
	margin: 0 0 .8rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--ap-text);
}

.ap-steps__title::before,
.ap-steps__title::after { content: none; }

.ap-steps__list {
	counter-reset: apstep;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-steps__list li {
	counter-increment: apstep;
	position: relative;
	padding: 0 0 14px 34px;
	margin: 0;
	font-size: .87rem;
	line-height: 1.7;
	list-style: none;
}

.ap-steps__list li::before {
	content: counter(apstep);
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ap-text);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
}

.ap-spec__cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}

@media (min-width: 600px) {
	.ap-spec__cta { flex-direction: row; }
	.ap-spec__cta .ap-btn { flex: 1; }
}

.ap-spec__disclaimer {
	margin: 16px 0 0;
	font-size: .72rem;
	line-height: 1.7;
	color: var(--ap-text-sub);
}

/* ---------- 11. FAQ ---------- */
.ap-faq {
	margin: 2.5rem 0;
}

.ap-faq__title {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 1rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--ap-text);
}

.ap-faq__title::before,
.ap-faq__title::after { content: none; }

.ap-faq__item {
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius-sm);
	background: var(--ap-bg-card);
	margin-bottom: 10px;
	overflow: hidden;
}

.ap-faq__item > summary {
	cursor: pointer;
	list-style: none;
	padding: 15px 44px 15px 16px;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.6;
	position: relative;
}

.ap-faq__item > summary::-webkit-details-marker { display: none; }

.ap-faq__item > summary::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--ap-text-sub);
	border-bottom: 2px solid var(--ap-text-sub);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}

.ap-faq__item[open] > summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.ap-faq__a {
	padding: 0 16px 14px;
	font-size: .86rem;
	line-height: 1.85;
	color: var(--ap-text-sub);
}

.ap-faq__a p { margin: 0 0 .8em; }

/* ---------- 12. ガイド導線カード ---------- */
.ap-guide {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0 0 2.5rem;
}

@media (min-width: 600px) {
	.ap-guide { grid-template-columns: repeat(2, 1fr); }
}

.ap-guide__item {
	display: block;
	padding: 16px 18px;
	background: var(--ap-bg-card);
	border: 1px solid var(--ap-line);
	border-radius: var(--ap-radius-sm);
	text-decoration: none;
	color: var(--ap-text);
	transition: background .2s ease;
}

.ap-guide__item:hover {
	background: var(--ap-bg-sub);
	text-decoration: none;
	color: var(--ap-text);
}

.ap-guide__label {
	display: block;
	font-size: .93rem;
	font-weight: 700;
	margin-bottom: 4px;
}

.ap-guide__desc {
	display: block;
	font-size: .76rem;
	line-height: 1.7;
	color: var(--ap-text-sub);
}

/* ---------- 13. 注意書きボックス ---------- */
.ap-notice {
	margin: 0 0 2rem;
	padding: 16px 18px;
	background: var(--ap-bg-sub);
	border-radius: var(--ap-radius-sm);
	font-size: .76rem;
	line-height: 1.9;
	color: var(--ap-text-sub);
}

.ap-notice strong {
	color: var(--ap-text);
}

/* ---------- 14. Cocoon 標準パーツの微調整 ---------- */
/* 新着記事ショートコード（[new_list]）の角丸をカードに合わせる */
.entry-content .new-entry-cards .a-wrap,
.entry-content .large-card-entry-cards .a-wrap {
	border-radius: var(--ap-radius-sm);
}

/* トップページの Cocoon 見出し装飾を無効化（.ap- 側の見出しを使うため） */
.home .entry-content > h2 {
	background: none;
}

/* 目次はモバイルで畳んでおくと「今日やること」に早く到達できる */
.toc {
	border-radius: var(--ap-radius-sm);
}