/* =============================================================
 * style-top.css — VPN比較Lab トップページ専用スタイル
 * 命名規則：BEM / カラー：ダークネイビー × シアン
 * ============================================================= */

/* ----- カスタムプロパティ ----- */
:root {
	--color-bg-primary:    #0a0e1a;
	--color-bg-secondary:  #0d1b2a;
	--color-bg-card:       #111d30;
	--color-bg-card-hover: #162036;
	--color-accent:        #00d4ff;
	--color-accent-dim:    #0099bb;
	--color-text-primary:  #e0e6f0;
	--color-text-secondary:#8fa3c0;
	--color-border:        #1e3050;
	--color-highlight:     rgba(0, 212, 255, 0.08);
	--color-gold:          #f5c400;
	--color-silver:        #9aa5b4;
	--color-bronze:        #cd7f32;
	--color-pros:          #00d4a0;
	--color-cons:          #ff5c6c;
	--font-base:           -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--radius-sm:           4px;
	--radius-md:           8px;
	--radius-lg:           12px;
	--transition:          0.2s ease;
	--max-width:           1400px;
	--section-padding:     80px 0;
}

/* ----- GeneratePress コンテナ幅を解除（トップページのみ） ----- */
body.home #page.grid-container,
body.home #content.site-content {
	max-width: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* ----- ヘッダー背景色 ----- */
body.home .site-header {
	background: #111d30;
	border-bottom: 1px solid var(--color-border);
}

body.home .site-header a,
body.home .site-header .site-title,
body.home .site-header .site-title a {
	color: var(--color-text-primary);
}

body.home .site-header .main-navigation a {
	color: var(--color-text-secondary);
}

body.home .site-header .main-navigation a:hover {
	color: var(--color-accent);
}

/* ----- ヘッダー・ナビをコンテンツ幅に揃える ----- */
body.home .inside-header.grid-container {
	width: 80%;
	max-width: var(--max-width);
	padding: 0;
}

/* ----- リセット・ベース ----- */
.top-page *,
.top-page *::before,
.top-page *::after {
	box-sizing: border-box;
}

.top-page {
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	font-family: var(--font-base);
	line-height: 1.7;
	width: 100%;
}

/* ---- 共通：セクション内幅 ---- */
.hero__inner,
.ranking__inner,
.vpn-about__inner,
.pros-cons__inner,
.use-cases__inner,
.personas__inner,
.protocol-compare__inner,
.faq__inner,
.cta-bottom__inner {
	width: 80%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--section-padding);
}

/* ---- 共通：セクションタイトル ---- */
.section-title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0 0 8px;
	letter-spacing: 0.02em;
}

.section-title::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--color-accent);
	margin-top: 10px;
	border-radius: 2px;
}

/* ---- 共通：ボタン ---- */
.btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background var(--transition), color var(--transition), transform var(--transition);
	cursor: pointer;
	border: none;
}

.btn--primary {
	background: var(--color-accent);
	color: #0a0e1a;
}

.btn--primary:hover {
	background: #33deff;
	transform: translateY(-1px);
}

.btn--secondary {
	background: transparent;
	color: var(--color-accent);
	border: 2px solid var(--color-accent);
}

.btn--secondary:hover {
	background: var(--color-highlight);
	transform: translateY(-1px);
}

.btn--outline {
	background: transparent;
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
	padding: 6px 14px;
	font-size: 0.8rem;
}

.btn--outline:hover {
	background: var(--color-highlight);
}

.btn--sm {
	padding: 6px 14px;
	font-size: 0.8rem;
}

.btn--lg {
	padding: 16px 36px;
	font-size: 1.05rem;
}


/* =============================================================
 * ① Hero
 * ============================================================= */
.hero {
	background: linear-gradient(135deg, #06101e 0%, #0d1b2a 60%, #0a2040 100%);
	border-bottom: 1px solid var(--color-border);
}

.hero__inner {
	padding: 100px 0 80px;
}

.hero__headline {
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 16px;
	color: #fff;
	letter-spacing: -0.01em;
}

.hero__headline span {
	color: var(--color-accent);
}

.hero__sub {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: var(--color-text-secondary);
	margin: 0 0 32px;
}

.hero__cta {
	font-size: 1.05rem;
}

.hero__trust {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	font-size: 0.85rem;
	color: var(--color-text-secondary);
}

.hero__trust-divider {
	opacity: 0.4;
}


/* =============================================================
 * ② VPNランキング
 * ============================================================= */
.ranking {
	background: var(--color-bg-secondary);
}

.ranking__lead {
	color: var(--color-text-secondary);
	margin: 0 0 32px;
}

.ranking__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}

.ranking__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.ranking__table-head {
	background: #0d1b2a;
}

.ranking__table-head .ranking__table-cell {
	color: var(--color-accent);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
}

.ranking__table-row {
	border-bottom: 1px solid var(--color-border);
	transition: background var(--transition);
}

.ranking__table-row:last-child {
	border-bottom: none;
}

.ranking__table-row:hover {
	background: var(--color-bg-card-hover);
}

.ranking__table-row--highlight {
	background: var(--color-highlight);
}

.ranking__table-cell {
	padding: 14px 16px;
	vertical-align: middle;
}

.ranking__table-cell--rank {
	text-align: center;
	width: 60px;
}

.ranking__table-cell--name {
	font-weight: 600;
	white-space: nowrap;
}

/* 順位バッジ */
.ranking__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.85rem;
	background: var(--color-bg-card);
	color: var(--color-text-secondary);
}

.ranking__badge--1 {
	background: var(--color-gold);
	color: #1a1000;
}

.ranking__badge--2 {
	background: var(--color-silver);
	color: #1a1a1a;
}

.ranking__badge--3 {
	background: var(--color-bronze);
	color: #fff;
}


/* =============================================================
 * ③ VPNとは
 * ============================================================= */
.vpn-about {
	background: var(--color-bg-primary);
}

.vpn-about__body {
	max-width: 780px;
	margin-top: 32px;
}

.vpn-about__paragraph {
	color: var(--color-text-secondary);
	margin: 0 0 20px;
	font-size: 0.95rem;
}

.vpn-about__link {
	color: var(--color-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition);
}

.vpn-about__link:hover {
	border-bottom-color: var(--color-accent);
}


/* =============================================================
 * ④ メリット・デメリット
 * ============================================================= */
.pros-cons {
	background: var(--color-bg-secondary);
}

.pros-cons__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 40px;
}

.pros-cons__col {
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	padding: 28px;
	border: 1px solid var(--color-border);
}

.pros-cons__col--pros {
	border-top: 3px solid var(--color-pros);
}

.pros-cons__col--cons {
	border-top: 3px solid var(--color-cons);
}

.pros-cons__col-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 20px;
	color: var(--color-text-primary);
}

.pros-cons__col--pros .pros-cons__col-title {
	color: var(--color-pros);
}

.pros-cons__col--cons .pros-cons__col-title {
	color: var(--color-cons);
}

.pros-cons__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pros-cons__item {
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
}

.pros-cons__item:last-child {
	margin-bottom: 0;
}

.pros-cons__icon {
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 2px;
	font-style: normal;
}

.pros-cons__icon--pro {
	color: var(--color-pros);
}

.pros-cons__icon--con {
	color: var(--color-cons);
}

.pros-cons__item-title {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 4px;
}

.pros-cons__item-desc {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}


/* =============================================================
 * ⑤ 使用例カード
 * ============================================================= */
.use-cases {
	background: var(--color-bg-primary);
}

.use-cases__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
}

.use-case-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 28px;
	transition: border-color var(--transition), transform var(--transition);
}

.use-case-card:hover {
	border-color: var(--color-accent);
	transform: translateY(-3px);
}

.use-case-card__icon {
	font-size: 2rem;
	margin-bottom: 14px;
}

.use-case-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.use-case-card__desc {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin: 0;
}


/* =============================================================
 * ⑥ ペルソナ別カード
 * ============================================================= */
.personas {
	background: var(--color-bg-secondary);
}

.personas__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
}

.persona-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 28px;
	transition: border-color var(--transition), transform var(--transition);
}

.persona-card:hover {
	border-color: var(--color-accent);
	transform: translateY(-3px);
}

.persona-card__icon {
	font-size: 2rem;
	margin-bottom: 14px;
}

.persona-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.persona-card__desc {
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	margin: 0;
}


/* =============================================================
 * ⑦ プロトコル比較テーブル
 * ============================================================= */
.protocol-compare {
	background: var(--color-bg-primary);
}

.protocol-compare__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	margin-top: 32px;
}

.protocol-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.protocol-compare__table-head .protocol-compare__cell {
	background: #0d1b2a;
	color: var(--color-accent);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
}

.protocol-compare__cell {
	padding: 14px 20px;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
}

.protocol-compare__row:last-child .protocol-compare__cell {
	border-bottom: none;
}

.protocol-compare__row--recommended {
	background: var(--color-highlight);
}

.protocol-compare__cell--name {
	font-weight: 600;
	white-space: nowrap;
}

.protocol-compare__badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 0.7rem;
	border-radius: 20px;
	background: var(--color-accent);
	color: #0a0e1a;
	font-weight: 700;
	vertical-align: middle;
}

/* 星評価 */
.rating {
	color: var(--color-accent);
	letter-spacing: 1px;
	font-size: 0.9rem;
}

.protocol-compare__note {
	margin-top: 16px;
	font-size: 0.875rem;
	color: var(--color-text-secondary);
}

.protocol-compare__link {
	color: var(--color-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition);
}

.protocol-compare__link:hover {
	border-bottom-color: var(--color-accent);
}


/* =============================================================
 * ⑧ FAQ
 * ============================================================= */
.faq {
	background: var(--color-bg-secondary);
}

.faq__list {
	margin-top: 40px;
	max-width: 780px;
}

.faq__item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	margin-bottom: 12px;
	overflow: hidden;
}

.faq__question {
	margin: 0;
}

.faq__question-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	background: var(--color-bg-card);
	color: var(--color-text-primary);
	font-size: 0.95rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: background var(--transition);
	gap: 12px;
}

.faq__question-btn:hover {
	background: var(--color-bg-card-hover);
}

.faq__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1;
	transition: transform var(--transition);
}

.faq__icon::before {
	content: '+';
}

.faq__question-btn[aria-expanded="true"] .faq__icon {
	transform: rotate(45deg);
}

.faq__answer {
	padding: 0 20px 20px;
	background: var(--color-bg-card);
	color: var(--color-text-secondary);
	font-size: 0.9rem;
}

.faq__answer p {
	margin: 0;
}

/* hidden属性のデフォルト表示を上書き */
.faq__answer[hidden] {
	display: none;
}


/* =============================================================
 * ⑨ CTA（下部）
 * ============================================================= */
.cta-bottom {
	background: linear-gradient(135deg, #06101e 0%, #0d1b2a 100%);
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.cta-bottom__title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	margin: 0 0 12px;
}

.cta-bottom__lead {
	color: var(--color-text-secondary);
	margin: 0 0 36px;
}

.cta-bottom__buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}


/* =============================================================
 * レスポンシブ
 * ============================================================= */
@media (max-width: 900px) {
	.pros-cons__columns {
		grid-template-columns: 1fr;
	}

	.use-cases__grid,
	.personas__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	:root {
		--section-padding: 56px 0;
	}

	.hero__inner,
	.ranking__inner,
	.vpn-about__inner,
	.pros-cons__inner,
	.use-cases__inner,
	.personas__inner,
	.protocol-compare__inner,
	.faq__inner,
	.cta-bottom__inner {
		width: 92%;
	}

	.hero__inner {
		padding: 72px 0 56px;
	}

	.use-cases__grid,
	.personas__grid {
		grid-template-columns: 1fr;
	}

	.cta-bottom__buttons {
		flex-direction: column;
		align-items: center;
	}

	.ranking__table {
		font-size: 0.8rem;
	}

	.ranking__table-cell {
		padding: 10px 10px;
	}
}