/* PPK LP Kit — 量産パーツのスタイル。SWELL等どのテーマでも崩れにくいよう自己完結。 */
:root {
	/* SWELLのメインカラー(--color_main)に追従。SWELL非導入時は既定のピンクにフォールバック。
	   → サイト別のカラー変更(color_main)だけで比較表・ボタン等のパーツも一括で色替わる。 */
	--ppk-accent: var(--color_main, #e8608a);
	--ppk-accent-dark: color-mix(in srgb, var(--color_main, #e8608a) 78%, #000);
	--ppk-gold: #e0a944;
	--ppk-silver: #9aa4ad;
	--ppk-bronze: #c08457;
	--ppk-ink: #33272a;
	--ppk-muted: #6f6469;
	--ppk-line: #f0dfe6;
	--ppk-bg-soft: #fdf5f8;
	--ppk-ok: #3fae7d;
	--ppk-ng: #e57373;
	--ppk-radius: 14px;
}

.ppk-cta,
.ppk-top3,
.ppk-compare-wrap,
.ppk-review,
.ppk-balloon,
.ppk-box { margin: 1.4em 0; }

/* ---- CTAボタン ---- */
.ppk-cta { text-align: center; }
.ppk-cta__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .3em;
	width: 100%; max-width: 420px; padding: .95em 1.4em;
	font-weight: 700; font-size: 1.05rem; line-height: 1.4;
	color: #fff; text-decoration: none;
	background: linear-gradient(180deg, var(--ppk-accent), var(--ppk-accent-dark));
	border-radius: 999px;
	box-shadow: 0 6px 0 var(--ppk-accent-dark), 0 10px 18px rgba(201,68,114,.28);
	transition: transform .08s ease, box-shadow .08s ease;
}
.ppk-cta__btn:hover { color: #fff; }
.ppk-cta__btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ppk-accent-dark), 0 6px 12px rgba(201,68,114,.28); }
.ppk-cta__arrow { font-weight: 700; }
.ppk-cta__note { margin: .5em 0 0; font-size: .82rem; color: var(--ppk-muted); }

/* ---- 上位3カード ---- */
.ppk-top3 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ppk-top3 { grid-template-columns: repeat(3, 1fr); } }
.ppk-card {
	position: relative; padding: 20px 16px 16px; background: #fff;
	border: 2px solid var(--ppk-line); border-radius: var(--ppk-radius);
	box-shadow: 0 4px 14px rgba(51,39,42,.06);
}
.ppk-card--rank1 { border-color: var(--ppk-gold); }
.ppk-card--rank2 { border-color: var(--ppk-silver); }
.ppk-card--rank3 { border-color: var(--ppk-bronze); }
.ppk-card__rank {
	position: absolute; top: -12px; left: 16px; padding: .2em .8em;
	font-weight: 700; font-size: .85rem; color: #fff; border-radius: 999px; background: var(--ppk-accent);
}
.ppk-card--rank1 .ppk-card__rank { background: var(--ppk-gold); }
.ppk-card--rank2 .ppk-card__rank { background: var(--ppk-silver); }
.ppk-card--rank3 .ppk-card__rank { background: var(--ppk-bronze); }
.ppk-card__head { display: flex; align-items: center; gap: 12px; margin: 4px 0 .9em; }
.ppk-card__headtext { flex: 1 1 auto; min-width: 0; }
.ppk-card__name { margin: 0 0 .15em; font-size: 1.15rem; line-height: 1.3; }
.ppk-card__catch { margin: 0; font-size: .85rem; color: var(--ppk-muted); line-height: 1.4; }
.ppk-card__spec { margin: 0 0 .9em; padding: .6em .8em; background: var(--ppk-bg-soft); border-radius: 10px; }
.ppk-card__spec > div { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; padding: .2em 0; }
.ppk-card__spec dt { color: var(--ppk-muted); margin: 0; }
.ppk-card__spec dd { margin: 0; font-weight: 700; }

/* ---- 比較表（PCでも横スクロールを基本挙動に） ---- */
.ppk-compare__hint { margin: 0 0 6px; font-size: .78rem; color: var(--ppk-muted); text-align: right; }
.ppk-compare-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ppk-radius); border: 1px solid var(--ppk-line); }
/* 列幅を確保して、記事幅（PC約700px）でも自然に横スクロールが出るようにする */
.ppk-compare { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff; }
.ppk-compare th, .ppk-compare td { padding: .7em .9em; border: 1px solid var(--ppk-line); text-align: center; vertical-align: middle; min-width: 8em; }
.ppk-compare th.ppk-compare__rank, .ppk-compare td.ppk-compare__rank { min-width: 4.6em; }
.ppk-compare th.ppk-compare__name, .ppk-compare td.ppk-compare__name { min-width: 9.5em; }
.ppk-compare thead th { background: var(--ppk-accent); color: #fff; font-weight: 700; white-space: nowrap; }
.ppk-compare tbody tr:nth-child(even) { background: var(--ppk-bg-soft); }
/* アイコン＋アプリ名は常に2段（アイコン上・名前下）で統一 */
.ppk-app-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.ppk-app-cell img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; margin: 0; }
.ppk-app-cell a { font-weight: 700; color: var(--ppk-accent-dark); text-decoration: none; white-space: nowrap; line-height: 1.25; }

/* 順位メダル（金・銀・銅／以降テーマ色） */
.ppk-medal { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; font-weight: 800; font-size: 1.1rem; line-height: 1; color: #fff; background: var(--ppk-accent); box-shadow: 0 2px 5px rgba(51,39,42,.22); border: 2px solid rgba(255,255,255,.7); }
.ppk-medal__num { transform: translateY(-.5px); }
.ppk-medal--1 { background: linear-gradient(150deg,#f7dd88,#e0a944); color: #6b531b; }
.ppk-medal--2 { background: linear-gradient(150deg,#e5eaee,#9aa4ad); color: #3a4147; }
.ppk-medal--3 { background: linear-gradient(150deg,#e6b98c,#c08457); color: #55351d; }
.ppk-badge { display: inline-block; min-width: 2.2em; padding: .1em .5em; font-weight: 700; color: #fff; background: var(--ppk-accent); border-radius: 999px; }

/* ---- アプリ画像 ---- */
.ppk-review__img { margin: 0 0 1em; }
.ppk-review__img img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ppk-card__logo { flex: 0 0 auto; margin: 0; }
.ppk-card__logo img { display: block; width: 60px; height: 60px; border-radius: 14px; object-fit: cover; box-shadow: 0 2px 8px rgba(51,39,42,.12); }
.ppk-logo-sm { border-radius: 6px; object-fit: cover; vertical-align: middle; margin-right: 6px; }

/* ---- 個別レビュー ---- */
.ppk-review { padding: 16px; background: #fff; border: 1px solid var(--ppk-line); border-radius: var(--ppk-radius); }
.ppk-review__info { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: .9rem; }
.ppk-review__info th, .ppk-review__info td { padding: .6em .7em; border: 1px solid var(--ppk-line); text-align: left; }
.ppk-review__info th { width: 34%; background: var(--ppk-bg-soft); color: var(--ppk-muted); font-weight: 700; white-space: nowrap; }
.ppk-review__safety { margin: 0 0 1em; padding: .9em 1em; background: #f3faf6; border: 1px solid #d6efe2; border-radius: 10px; }
.ppk-review__safety-title { margin: 0 0 .4em; font-weight: 700; color: var(--ppk-ok); }
.ppk-review__safety ul { margin: 0; padding: 0; list-style: none; }
.ppk-review__safety li { padding: .2em 0; font-size: .9rem; }
.ppk-review__safety li span { display: inline-block; min-width: 6.5em; font-weight: 700; color: var(--ppk-muted); }
.ppk-review__reco { margin: 1em 0; padding: .8em 1em; background: var(--ppk-bg-soft); border-radius: 10px; font-size: .92rem; }
.ppk-review__reco span { display: block; font-weight: 700; color: var(--ppk-accent-dark); margin-bottom: .2em; }

/* ---- メリット・デメリット ---- */
.ppk-proscons { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0 0 1em; }
@media (min-width: 600px) { .ppk-proscons { grid-template-columns: 1fr 1fr; } }
.ppk-proscons__col { padding: .9em 1em; border-radius: 10px; }
.ppk-proscons__pros { background: #f3faf6; border: 1px solid #d6efe2; }
.ppk-proscons__cons { background: #fdf4f4; border: 1px solid #f4d9d9; }
.ppk-proscons__head { margin: 0 0 .4em; font-weight: 700; }
.ppk-proscons__pros .ppk-proscons__head { color: var(--ppk-ok); }
.ppk-proscons__cons .ppk-proscons__head { color: var(--ppk-ng); }
.ppk-proscons ul { margin: 0; padding-left: 1.2em; }
.ppk-proscons li { padding: .15em 0; font-size: .9rem; }

/* ---- 吹き出し ---- */
.ppk-balloon { display: flex; align-items: flex-start; gap: 12px; }
.ppk-balloon--right { flex-direction: row-reverse; }
.ppk-balloon__icon { flex: 0 0 auto; width: 60px; text-align: center; }
.ppk-balloon__icon img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ppk-line); }
.ppk-balloon__name { display: block; margin-top: .2em; font-size: .72rem; color: var(--ppk-muted); }
.ppk-balloon__body { position: relative; flex: 1; padding: .9em 1.1em; background: var(--ppk-bg-soft); border: 1px solid var(--ppk-line); border-radius: 14px; }
.ppk-balloon__body p:last-child { margin-bottom: 0; }
.ppk-balloon__body::before { content: ""; position: absolute; top: 18px; width: 0; height: 0; border: 8px solid transparent; }
.ppk-balloon--left .ppk-balloon__body::before { left: -15px; border-right-color: var(--ppk-bg-soft); }
.ppk-balloon--right .ppk-balloon__body::before { right: -15px; border-left-color: var(--ppk-bg-soft); }

/* ---- 注意/ポイントボックス ---- */
.ppk-box { padding: 1em 1.1em 1em; border-radius: 10px; border: 1px solid var(--ppk-line); background: #fff; }
.ppk-box__title { margin: 0 0 .4em; font-weight: 700; }
.ppk-box__body p:last-child { margin-bottom: 0; }
.ppk-box--warning { background: #fdf4f4; border-color: #f4d9d9; }
.ppk-box--warning .ppk-box__title { color: var(--ppk-ng); }
.ppk-box--point { background: var(--ppk-bg-soft); border-color: var(--ppk-line); }
.ppk-box--point .ppk-box__title { color: var(--ppk-accent-dark); }
.ppk-box--info { background: #f4f8fc; border-color: #d9e6f2; }
.ppk-box--info .ppk-box__title { color: #4a7bb0; }

/* ---- 用語集テーブル ---- */
.ppk-glossary { width: 100%; border-collapse: collapse; }
.ppk-glossary th, .ppk-glossary td { padding: .6em .8em; border: 1px solid var(--ppk-line); text-align: left; font-size: .9rem; }
.ppk-glossary th { width: 30%; background: var(--ppk-bg-soft); font-weight: 700; white-space: nowrap; }

/* ---- 著者ボックス ---- */
.ppk-author { padding: 1.2em 1.3em; background: var(--ppk-bg-soft); border: 1px solid var(--ppk-line); border-radius: var(--ppk-radius); }

/* ---- FAQ details ---- */
.wp-block-details.wp-block-details { margin: .6em 0; padding: .2em 1em; background: #fff; border: 1px solid var(--ppk-line); border-radius: 10px; }
.wp-block-details > summary { padding: .7em 0; font-weight: 700; cursor: pointer; }