/* ============================================================
 * トップページ専用スタイル
 *
 * Source: docs/screens/screens/top-pc.html / top-sp.html
 * .pmn-top スコープ配下に閉じる。
 * ============================================================ */

.pmn-top {
	background: var(--pm-base);
	color: var(--pm-text);
	font-family: var(--pm-font-body);
}

.pmn-top .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}
@media (max-width: 767px) {
	.pmn-top .container { padding: 0 16px; }
}

/* ---- Section base ---- */
.pmn-top section { padding: 80px 0; }
.pmn-top section.seasons-section,
.pmn-top section.cols-section { padding-top: 0; }
@media (max-width: 767px) {
	.pmn-top section { padding: 48px 0; }
}

.pmn-top .sec-head { text-align: center; margin-bottom: 40px; }
.pmn-top .sec-head .eyebrow {
	display: inline-block;
	font-size: 12px;
	color: var(--pm-primary);
	letter-spacing: 0.12em;
	font-family: var(--pm-font-num);
	font-weight: 600;
	margin-bottom: 8px;
	text-transform: uppercase;
}
.pmn-top .sec-head h2 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 28px;
	margin: 0 0 8px;
	color: var(--pm-text);
}
.pmn-top .sec-head p { color: var(--pm-text-sub); font-size: 14px; margin: 0; }
@media (max-width: 767px) {
	.pmn-top .sec-head { margin-bottom: 24px; }
	.pmn-top .sec-head h2 { font-size: 22px; }
}

/* ---- Buttons ---- */
.pmn-top .btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 56px;
	padding: 0 32px;
	border-radius: var(--pm-radius-btn);
	font-family: var(--pm-font-heading);
	font-weight: 600;
	font-size: 16px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--pm-dur-1) var(--pm-ease), transform var(--pm-dur-1) var(--pm-ease);
}
.pmn-top .btn:hover { transform: translateY(-1px); }
.pmn-top .btn-primary { background: var(--pm-primary); color: var(--pm-text-on-primary); }
.pmn-top .btn-primary:hover { background: var(--pm-primary-hover); }
.pmn-top .btn-secondary { background: var(--pm-surface); color: var(--pm-primary); border: 1.5px solid var(--pm-primary); }
.pmn-top .btn-secondary:hover { background: var(--pm-primary-soft); }
.pmn-top .btn-cta { height: 60px; padding: 0 40px; font-size: 17px; }
@media (max-width: 767px) {
	.pmn-top .btn { height: 52px; font-size: 15px; }
}

/* ---- Hero ---- */
.pmn-top .hero {
	background: linear-gradient(180deg, #E3F0F7 0%, var(--pm-base) 100%);
	padding: 64px 0 96px;
	position: relative;
	overflow: hidden;
}
@media (max-width: 767px) { .pmn-top .hero { padding: 32px 0 64px; } }

.pmn-top .hero-grid {
	display: grid;
	grid-template-columns: 1fr 480px;
	gap: 48px;
	align-items: center;
}
@media (max-width: 1023px) {
	.pmn-top .hero-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.pmn-top .hero h1 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.4;
	margin: 0 0 20px;
	letter-spacing: 0.02em;
	color: var(--pm-text);
}
.pmn-top .hero h1 em {
	font-style: normal;
	color: var(--pm-primary);
	background: linear-gradient(transparent 65%, rgba(249, 207, 123, 0.5) 65%);
	padding: 0 4px;
}
@media (max-width: 767px) {
	.pmn-top .hero h1 { font-size: 28px; line-height: 1.45; }
}

.pmn-top .hero p.lead {
	font-size: 17px;
	line-height: 1.9;
	color: var(--pm-text);
	margin: 0 0 28px;
	max-width: 520px;
}
@media (max-width: 767px) {
	.pmn-top .hero p.lead { font-size: 14px; line-height: 1.85; }
}

.pmn-top .hero-cta {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 24px;
	flex-wrap: wrap;
}
@media (max-width: 767px) {
	.pmn-top .hero-cta { flex-direction: column; gap: 10px; align-items: stretch; }
	.pmn-top .hero-cta .btn { width: 100%; }
}

.pmn-top .trust {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--pm-text-sub);
}
.pmn-top .trust span { display: inline-flex; align-items: center; gap: 6px; }
.pmn-top .trust i { color: var(--pm-success); font-weight: 700; font-style: normal; }
@media (max-width: 767px) { .pmn-top .trust { font-size: 12px; gap: 12px; } }

.pmn-top .hero-art {
	width: 480px;
	height: 380px;
	position: relative;
}
@media (max-width: 1023px) {
	.pmn-top .hero-art { width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
	.pmn-top .hero-art svg { width: 100%; height: auto; }
}
@media (max-width: 767px) { .pmn-top .hero-art { display: none; } }

/* ---- Quick search ---- */
.pmn-top .quick {
	margin-top: -56px;
	position: relative;
	z-index: 5;
	margin-bottom: 32px;
}
@media (max-width: 1023px) { .pmn-top .quick { margin-top: -32px; } }
@media (max-width: 767px)  { .pmn-top .quick { margin-top: -24px; margin-bottom: 16px; } }

/* デザイン共通の search-form コンポーネント（search-form.css）が描画する。
 * その上でホスト要素に余白などの調整を加える。 */
.pmn-top .quick-form-host { /* placeholder for search-form.js mount */ }
@media (max-width: 767px) {
	/* SP では stacked レイアウトに自動切替（search-form.js が data-layout を見る） */
	.pmn-top .quick-form-host [data-search-form] { /* layout switched by JS */ }
}

/* ---- Ranking ---- */
.pmn-top .ranking-section { padding-top: 32px; }
@media (max-width: 767px) { .pmn-top .ranking-section { padding-top: 16px; } }

.pmn-top .tabs {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 32px;
}
.pmn-top .tabs button {
	padding: 10px 24px;
	border-radius: var(--pm-radius-pill);
	border: 1px solid var(--pm-border);
	background: var(--pm-surface);
	font-family: var(--pm-font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--pm-text-sub);
	cursor: pointer;
	transition: all var(--pm-dur-1) var(--pm-ease);
}
.pmn-top .tabs button:hover { border-color: var(--pm-primary); color: var(--pm-primary); }
.pmn-top .tabs button.on {
	background: var(--pm-primary);
	color: var(--pm-text-on-primary);
	border-color: var(--pm-primary);
}

.pmn-top .rank-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}
@media (max-width: 1023px) { .pmn-top .rank-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .pmn-top .rank-grid { grid-template-columns: repeat(2, 1fr); } }

/* HTML 仕様の hidden 属性を強制有効化（display:grid に勝つ） */
.pmn-top [hidden] { display: none !important; }

.pmn-top .rk {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	box-shadow: var(--pm-shadow-1);
	padding: 20px 18px;
	position: relative;
	transition: transform var(--pm-dur-2) var(--pm-ease), box-shadow var(--pm-dur-2) var(--pm-ease);
	text-decoration: none;
	color: inherit;
	display: block;
}
.pmn-top .rk:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-2); }
.pmn-top .rk-num {
	position: absolute;
	top: -12px;
	left: 18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pm-font-num);
	font-weight: 700;
	font-size: 15px;
	color: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.pmn-top .rk-num.gold   { background: linear-gradient(135deg, #E8C76A, #D4AB44); }
.pmn-top .rk-num.silver { background: linear-gradient(135deg, #BFC4CA, #9DA4AC); }
.pmn-top .rk-num.bronze { background: linear-gradient(135deg, #C99672, #A87655); }
.pmn-top .rk-num.plain {
	background: var(--pm-surface);
	color: var(--pm-text-sub);
	border: 1px solid var(--pm-border);
	box-shadow: none;
}
.pmn-top .rk .kj {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 28px;
	margin: 14px 0 4px;
	text-align: center;
	color: var(--pm-text);
}
.pmn-top .rk .rd { text-align: center; font-size: 13px; color: var(--pm-text-sub); margin-bottom: 12px; }
.pmn-top .rk .meta { display: flex; justify-content: center; gap: 10px; font-size: 11px; color: var(--pm-text-sub); }
.pmn-top .rk .meta b { color: var(--pm-text); margin-left: 3px; }
.pmn-top .rk .meta svg,
.pmn-top .rk .meta i { width: 14px; height: 14px; flex-shrink: 0; }

.pmn-top .rk-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 32px 16px;
	color: var(--pm-text-sub);
	background: var(--pm-base);
	border: 1px dashed var(--pm-border);
	border-radius: var(--pm-radius-card);
	font-size: 13px;
}

.pmn-top .more-link { text-align: center; margin-top: 32px; }
.pmn-top .more-link a {
	color: var(--pm-primary);
	text-decoration: none;
	font-weight: 600;
	font-family: var(--pm-font-heading);
}
.pmn-top .more-link a:hover { text-decoration: underline; }

/* ---- Seasons ---- */
.pmn-top .seasons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 767px) { .pmn-top .seasons { grid-template-columns: 1fr 1fr; gap: 12px; } }

.pmn-top .season-card {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	padding: 32px 24px;
	text-align: center;
	cursor: pointer;
	transition: transform var(--pm-dur-2) var(--pm-ease), box-shadow var(--pm-dur-2) var(--pm-ease);
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: block;
}
.pmn-top .season-card:hover { transform: scale(1.02); box-shadow: var(--pm-shadow-2); }
.pmn-top .season-card .ico {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	background: var(--pm-primary-soft);
	color: var(--pm-primary);
}
.pmn-top .season-card .ico svg,
.pmn-top .season-card .ico i { width: 28px; height: 28px; }
.pmn-top .season-card.spr { background: linear-gradient(160deg, var(--pm-secondary-soft), var(--pm-surface)); }
.pmn-top .season-card.sum { background: linear-gradient(160deg, var(--pm-accent-soft), var(--pm-surface)); }
.pmn-top .season-card.aut { background: linear-gradient(160deg, var(--pm-warning-soft), var(--pm-surface)); }
.pmn-top .season-card.win { background: linear-gradient(160deg, var(--pm-info-soft), var(--pm-surface)); }
.pmn-top .season-card h3 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 8px;
	color: var(--pm-text);
}
.pmn-top .season-card p { font-size: 13px; color: var(--pm-text-sub); margin: 0; }
@media (max-width: 767px) {
	.pmn-top .season-card { padding: 20px 12px; }
	.pmn-top .season-card h3 { font-size: 16px; }
	.pmn-top .season-card p { font-size: 11px; }
}

/* ---- Columns ---- */
.pmn-top .cols-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 1023px) { .pmn-top .cols-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .pmn-top .cols-grid { grid-template-columns: 1fr; } }

.pmn-top .col-card {
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius-card);
	overflow: hidden;
	cursor: pointer;
	transition: transform var(--pm-dur-2) var(--pm-ease), box-shadow var(--pm-dur-2) var(--pm-ease);
	text-decoration: none;
	color: inherit;
	display: block;
}
.pmn-top .col-card:hover { transform: translateY(-3px); box-shadow: var(--pm-shadow-2); }
.pmn-top .col-img {
	height: 180px;
	background: linear-gradient(135deg, #E3F0F7, var(--pm-secondary-soft));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--pm-font-heading);
	font-size: 24px;
	font-weight: 700;
	position: relative;
}
.pmn-top .col-img.b { background: linear-gradient(135deg, var(--pm-accent-soft), var(--pm-warning-soft)); }
.pmn-top .col-img.c { background: linear-gradient(135deg, var(--pm-either-soft), #E3F0F7); }
.pmn-top .col-cat {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--pm-surface);
	color: var(--pm-primary);
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--pm-radius-pill);
}
.pmn-top .col-body { padding: 18px 20px; }
.pmn-top .col-body h3 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.5;
	margin: 0 0 8px;
	color: var(--pm-text);
}
.pmn-top .col-body p {
	font-size: 13px;
	color: var(--pm-text-sub);
	line-height: 1.7;
	margin: 0 0 12px;
}
.pmn-top .col-foot {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--pm-text-sub);
	font-family: var(--pm-font-num);
}

/* ---- Features ---- */
.pmn-top .features-section {
	background: var(--pm-surface-2);
	padding: 80px 0;
}
@media (max-width: 767px) { .pmn-top .features-section { padding: 48px 0; } }

.pmn-top .feat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
@media (max-width: 1023px) { .pmn-top .feat-grid { grid-template-columns: 1fr; gap: 24px; } }

.pmn-top .feat { text-align: center; padding: 0 12px; }
.pmn-top .feat .ico {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--pm-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	box-shadow: 0 4px 12px rgba(111, 179, 210, 0.15);
	color: var(--pm-primary);
}
.pmn-top .feat .ico svg,
.pmn-top .feat .ico i { width: 40px; height: 40px; }
.pmn-top .feat h3 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 10px;
	color: var(--pm-text);
}
.pmn-top .feat p {
	font-size: 14px;
	color: var(--pm-text-sub);
	line-height: 1.8;
	margin: 0;
}

/* ---- SEO block ---- */
.pmn-top .seo-section {
	padding: 64px 0;
	background: var(--pm-base);
}
.pmn-top .seo-body {
	max-width: 880px;
	margin: 0 auto;
	color: var(--pm-text);
	font-size: 14px;
	line-height: 1.9;
}
.pmn-top .seo-body p { margin: 0 0 14px; }
.pmn-top .seo-body h2 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 18px;
	margin: 0 0 18px;
	color: var(--pm-text-sub);
}
.pmn-top .seo-body h2.seo-h2-2 { margin-top: 24px; }
.pmn-top .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}
.pmn-top .tagcloud a {
	padding: 6px 14px;
	border-radius: var(--pm-radius-pill);
	background: var(--pm-surface);
	border: 1px solid var(--pm-border);
	font-size: 12px;
	color: var(--pm-text);
	text-decoration: none;
}
.pmn-top .tagcloud a:hover {
	background: var(--pm-primary-soft);
	color: var(--pm-primary);
	border-color: var(--pm-primary);
}

/* ---- Bottom CTA ---- */
.pmn-top .cta-section {
	background: linear-gradient(135deg, #E3F0F7, var(--pm-secondary-soft));
	padding: 80px 0;
	text-align: center;
}
.pmn-top .cta-section h2 {
	font-family: var(--pm-font-heading);
	font-weight: 700;
	font-size: 30px;
	margin: 0 0 12px;
	line-height: 1.5;
	color: var(--pm-text);
}
.pmn-top .cta-section p {
	font-size: 14px;
	color: var(--pm-text-sub);
	margin: 0 0 32px;
}
@media (max-width: 767px) {
	.pmn-top .cta-section { padding: 48px 16px; }
	.pmn-top .cta-section h2 { font-size: 22px; }
}