@charset "utf-8";
/* ==========================================================================================================
   ksp-home — トップページ本文エリア専用スタイルシート（新規・独立）
   common/css/base.css には依存しない。html の rem/ブレークポイント基盤は
   css/header-footer.css と同じ方式でこのファイル内にも独立して定義している。
   ========================================================================================================== */

:root {
	--ksp-color-accent: #1c6eae;
	--ksp-color-accent-dark: #124d78;
	--ksp-color-text: #222222;
	--ksp-color-text-muted: #6b6b6b;
	--ksp-color-border: #e6e6e6;
	--ksp-color-bg: #f5f6f7;
	--ksp-radius-md: 1rem;
	--ksp-radius-lg: 1.6rem;
	--ksp-shadow-sm: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
	--ksp-shadow-md: 0 0.8rem 2rem rgba(0, 0, 0, 0.1);
}

html { font-size: 62.5%; scroll-behavior: smooth; }
@media screen and (max-width: 1300px) and (min-width: 751px) {
	html { font-size: 0.75vw; }
}
@media screen and (max-width: 750px) {
	html { font-size: 62.5%; }
}

.ksp-home,
.ksp-home * { box-sizing: border-box; }

.ksp-home { display: block; background: #fff; color: var(--ksp-color-text); font-family: 'Noto Sans JP', sans-serif; }
.ksp-home__inner { max-width: 100rem; margin: 0 auto; padding: 0 2rem; }

.ksp-home__tagline { margin: 0; padding: 2rem 0; border-bottom: 0.1rem solid var(--ksp-color-border); color: var(--ksp-color-text-muted); font-size: 1.4rem; font-weight: 500; text-align: center; }

.ksp-ad-slot { margin: 2.4rem 0; text-align: center; overflow: hidden; }

.ksp-home__layout { display: flex; align-items: flex-start; gap: 4rem; padding: 3.2rem 0 6rem; }
.ksp-home__main { flex: 1 1 auto; min-width: 0; }
.ksp-home__sidebar { flex: 0 0 auto; width: 32rem; }

.ksp-home__section { margin-bottom: 5.6rem; }
.ksp-home__section-title { margin: 0 0 2.4rem; font-size: 2.2rem; font-weight: 700; color: var(--ksp-color-text); }

/* 最新記事 */
.ksp-home__posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.ksp-home__post-card { display: block; min-width: 0; }
.ksp-home__post-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.ksp-home__post-thumb { display: block; aspect-ratio: 1 / 1; border-radius: var(--ksp-radius-md); overflow: hidden; background: var(--ksp-color-bg); }
.ksp-home__post-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.ksp-home__post-card a:hover .ksp-home__post-thumb img { transform: scale(1.05); }
.ksp-home__post-date { margin-top: 1rem; font-size: 1.2rem; color: var(--ksp-color-text-muted); }
.ksp-home__post-title { margin: 0.4rem 0 0; font-size: 1.4rem; font-weight: 600; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s ease; }
.ksp-home__post-card a:hover .ksp-home__post-title { color: var(--ksp-color-accent); }

/* おすすめ記事 */
.ksp-home__pickup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.ksp-home__pickup-card { display: flex; min-width: 0; gap: 1.6rem; padding: 1.6rem; border: 0.1rem solid var(--ksp-color-border); border-radius: var(--ksp-radius-lg); text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.ksp-home__pickup-card:hover { box-shadow: var(--ksp-shadow-md); transform: translateY(-0.2rem); }
.ksp-home__pickup-thumb { flex: 0 0 auto; width: 9.6rem; height: 9.6rem; border-radius: var(--ksp-radius-md); overflow: hidden; background: var(--ksp-color-bg); }
.ksp-home__pickup-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ksp-home__pickup-body { flex: 1 1 auto; min-width: 0; }
.ksp-home__pickup-title { margin: 0 0 0.6rem; font-size: 1.5rem; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ksp-home__pickup-text { margin: 0; font-size: 1.3rem; line-height: 1.6; color: var(--ksp-color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* レビュー一覧（ps4review_img() が出力する既存マークアップを、このセクション内だけでスタイリング） */
.ksp-home__reviews ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.ksp-home__reviews li.item { min-width: 0; border: 0.1rem solid var(--ksp-color-border); border-radius: var(--ksp-radius-lg); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.ksp-home__reviews li.item:hover { box-shadow: var(--ksp-shadow-md); transform: translateY(-0.2rem); }
.ksp-home__reviews .entry-item { display: flex; align-items: center; gap: 1.6rem; padding: 1.2rem; text-decoration: none; color: inherit; }
.ksp-home__reviews .eyecatch { flex: 0 0 auto; width: 8rem; height: 8rem; border-radius: var(--ksp-radius-md); overflow: hidden; background: var(--ksp-color-bg); }
.ksp-home__reviews .eyecatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ksp-home__reviews .title { flex: 1 1 auto; min-width: 0; font-size: 1.4rem; }
.ksp-home__reviews .title .text { display: block; margin-bottom: 0.4rem; font-weight: 700; line-height: 1.5; }
.ksp-home__reviews .title .score { display: inline-block; padding: 0.3rem 1rem; border-radius: 999rem; background: var(--ksp-color-accent); color: #fff; font-size: 1.2rem; font-weight: 600; }

.ksp-home__more-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; }
.ksp-home__more-link { display: inline-flex; align-items: center; height: 4rem; padding: 0 2rem; border-radius: 999rem; background: var(--ksp-color-accent); color: #fff; text-decoration: none; font-size: 1.3rem; font-weight: 600; transition: background .2s ease; }
.ksp-home__more-link:hover { background: var(--ksp-color-accent-dark); color: #fff; text-decoration: none; }

/* サイドバー（Amazon商品ウィジェット = amazonjs。見出しのみここでスタイリングし、カード自体はamazonjs.css側の見た目をそのまま使う） */
.ksp-home__sidebar h2 { margin: 0 0 2rem; font-size: 1.8rem; font-weight: 700; }

@media screen and (max-width: 1024px) and (min-width: 751px) {
	.ksp-home__sidebar { width: 26rem; }
}

@media screen and (max-width: 750px) {
	.ksp-home__inner { padding: 0 1.6rem; }
	.ksp-home__layout { flex-direction: column; align-items: stretch; gap: 4.8rem; padding: 2.4rem 0 4rem; }
	.ksp-home__sidebar { width: 100%; }
	.ksp-home__section { margin-bottom: 4rem; }
	.ksp-home__section-title { font-size: 1.9rem; margin-bottom: 1.6rem; }
	.ksp-home__posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
	.ksp-home__post-title { font-size: 1.3rem; }
	.ksp-home__pickup-grid { grid-template-columns: 1fr; }
	.ksp-home__reviews ul { grid-template-columns: 1fr; }
}