@charset "UTF-8";
/* トップページ(front-page.php)— 公式サイト風レイアウト */

.sk-front { background: var(--sk-bg); }
.sk-front .l-container { max-width: 1080px; }

/* SWELL標準のメインビジュアル・記事スライダーは専用ヒーローと重複するため非表示
   (カスタマイザー「トップページ」でも「表示しない」に設定推奨 — README参照) */
.home .p-mainVisual,
.home .p-postSlider { display: none; }

/* ---- ヒーロー ---- */
.sk-hero {
	background:
		radial-gradient(ellipse 120% 80% at 85% -10%, rgba(255, 77, 166, 0.42), transparent 55%),
		radial-gradient(ellipse 90% 70% at 10% 110%, rgba(147, 51, 201, 0.5), transparent 60%),
		linear-gradient(155deg, #2a0e3d 0%, #46135f 45%, #6d1e86 100%);
	color: #fff;
	padding: 3.5rem 0 3rem;
	overflow: hidden;
}
.sk-hero__inner {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 2.5rem;
	align-items: center;
}
.sk-hero__eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: rgba(240, 180, 41, 0.16);
	color: #ffd977;
	border: 1px solid rgba(255, 217, 119, 0.45);
	border-radius: 999px;
	padding: 0.35em 1em;
	margin: 0 0 1rem;
}
.sk-hero__src { display: block; font-size: 10px; font-weight: 400; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }
.sk-hero__title {
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	line-height: 1.15;
	letter-spacing: 0.03em;
	margin: 0 0 1rem;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.sk-hero__title-sub {
	display: block;
	font-size: 0.32em;
	font-weight: 700;
	letter-spacing: 0.45em;
	color: #ffb3e2;
	margin-top: 0.6em;
}
.sk-hero__lead { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, 0.88); margin: 0 0 1.2rem; }
.sk-hero__badges {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 0;
	margin: 0 0 1.5rem;
}
.sk-hero__badges li {
	font-size: 12px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	padding: 0.35em 0.8em;
}
.sk-hero__badges strong { color: #ffd977; }
.sk-hero__cta { display: flex; flex-wrap: wrap; gap: 0.8em; }
.sk-hero__cta .sk-btn--primary {
	background: linear-gradient(135deg, #f0b429, #e8842c);
	color: #23150a;
	font-size: 16px;
	padding: 0.9em 1.6em;
	box-shadow: 0 6px 20px rgba(240, 180, 41, 0.35);
}
.sk-hero__cta .sk-btn--secondary {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff;
}
.sk-hero__note { font-size: 11px; color: rgba(255, 255, 255, 0.55); margin: 0.9rem 0 0; }

.sk-hero__visual { text-align: center; }
.sk-hero__cover {
	max-width: 320px;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
	transform: rotate(2deg);
}
.sk-hero__cover--placeholder {
	aspect-ratio: 3 / 4;
	max-width: 300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-weight: 700;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}
.sk-hero__visual-cap { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 0.9rem; }

@media (max-width: 820px) {
	.sk-hero { padding: 2.2rem 0; }
	.sk-hero__inner { grid-template-columns: 1fr; gap: 1.6rem; }
	.sk-hero__visual { order: -1; }
	.sk-hero__cover { max-width: 200px; transform: none; }
	.sk-hero__cta .sk-btn { width: 100%; justify-content: center; }
}

/* ---- 実績バー ---- */
.sk-stats { background: #2a0e3d; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #fff; }
.sk-stats__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, 0.08);
}
.sk-stat {
	background: #2a0e3d;
	text-align: center;
	padding: 1.2rem 0.5rem;
}
.sk-stat__num { display: block; font-size: 2rem; font-weight: 800; color: #ffd977; line-height: 1.1; }
.sk-stat__num small { font-size: 0.45em; margin-left: 2px; }
.sk-stat__label { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; margin-top: 0.4em; }
@media (max-width: 640px) {
	.sk-stats__inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 汎用セクション ---- */
.sk-section { padding: 3.2rem 0; }
.sk-section--soft { background: var(--sk-bg-soft); }
.sk-section--dark {
	background: linear-gradient(160deg, #46135f, #2a0e3d);
	color: #fff;
}
.sk-section--dark a { color: #ffb3e2; }
.sk-section__title {
	font-size: 1.6rem;
	margin: 0 0 0.4em;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
}
.sk-section__title span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.35em;
	color: var(--sk-accent);
	margin-top: 0.3em;
}
.sk-section--dark .sk-section__title span { color: #ffd977; }
.sk-section__lead { font-size: 14px; color: inherit; opacity: 0.85; margin: 0 0 1.6rem; }
.sk-section__cta { text-align: center; margin: 1.6rem 0 0; }

/* ---- ラインナップ ---- */
.sk-lineup { display: grid; gap: 1rem; }

/* ---- キャラクター ---- */
.sk-chars {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 0.9rem;
}
.sk-char {
	display: flex;
	gap: 0.9em;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius);
	padding: 1em;
	box-shadow: var(--sk-shadow);
}
.sk-char__avatar {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(150deg, var(--sk-primary), var(--sk-accent));
}
.sk-char:nth-child(2n) .sk-char__avatar { background: linear-gradient(150deg, #7c3aad, #c04b7c); }
.sk-char:nth-child(3n) .sk-char__avatar { background: linear-gradient(150deg, #b76b1f, #f0b429); }
.sk-char__name { font-weight: 800; margin: 0 0 0.2em; }
.sk-char__vol {
	font-size: 10px;
	font-weight: 700;
	color: var(--sk-accent);
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 1px 6px;
	margin-left: 0.6em;
	vertical-align: 1px;
}
.sk-char__desc { font-size: 13px; color: var(--sk-text-weak); margin: 0; }

/* ---- 世界観 ---- */
.sk-section--world {
	background:
		linear-gradient(rgba(42, 14, 61, 0.85), rgba(42, 14, 61, 0.85)),
		linear-gradient(120deg, #7a1f5c, #9333c9);
	color: #fff;
}
.sk-world__text { max-width: 640px; }
.sk-world__text p { line-height: 2; }

/* ---- ガイド2カラム ---- */
.sk-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sk-guide__col {
	background: #fff;
	border: 1px solid var(--sk-border);
	border-top: 4px solid var(--sk-accent);
	border-radius: var(--sk-radius);
	padding: 1.4em 1.5em;
	box-shadow: var(--sk-shadow);
}
.sk-guide__col:last-child { border-top-color: #f0b429; }
.sk-guide__col h3 { margin: 0 0 0.6em; font-size: 1.05rem; }
.sk-guide__col p { font-size: 14px; }
@media (max-width: 700px) {
	.sk-guide { grid-template-columns: 1fr; }
}

/* ---- ニュース ---- */
.sk-newslist { list-style: none; padding: 0; margin: 0 0 1rem; }
.sk-newslist li {
	display: flex;
	gap: 1em;
	padding: 0.7em 0.2em;
	border-bottom: 1px solid var(--sk-border);
	font-size: 14px;
}
.sk-newslist time { color: var(--sk-text-weak); flex: 0 0 auto; font-size: 13px; }

/* ---- クロージングCTA ---- */
.sk-band {
	background: linear-gradient(135deg, #46135f, #9333c9);
	color: #fff;
	padding: 2.6rem 0;
	text-align: center;
}
.sk-band__title { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.3em; }
.sk-band__sub { font-size: 13px; opacity: 0.8; margin: 0 0 1.2rem; }
.sk-band .sk-btn--primary {
	background: linear-gradient(135deg, #f0b429, #e8842c);
	color: #23150a;
	font-size: 16px;
	padding: 0.9em 2em;
}

/* ---- ヒーローのきらめき装飾(エロゲ公式サイト風) ---- */
.sk-hero { position: relative; }
.sk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle 2px at 12% 22%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
		radial-gradient(circle 1.5px at 28% 68%, rgba(255, 214, 245, 0.8) 0 1px, transparent 2px),
		radial-gradient(circle 2.5px at 46% 14%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2.5px),
		radial-gradient(circle 1.5px at 64% 82%, rgba(255, 200, 240, 0.7) 0 1px, transparent 2px),
		radial-gradient(circle 2px at 78% 30%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
		radial-gradient(circle 1.5px at 90% 60%, rgba(255, 214, 245, 0.9) 0 1px, transparent 2px),
		radial-gradient(circle 3px at 55% 45%, rgba(255, 255, 255, 0.35) 0 1.5px, transparent 3px);
}
.sk-hero__inner { position: relative; z-index: 1; }

/* セクション見出しの装飾強化 */
.sk-section__title span {
	background: linear-gradient(90deg, #c2247f, #9333c9);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sk-section--dark .sk-section__title span {
	background: linear-gradient(90deg, #ffd977, #ffb3e2);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}