/*
Theme Name: Luna Rose Fortune Salon
Theme URI: https://example.com/
Author: OpenAI
Author URI: https://openai.com/
Description: 女性向け占いサイト用のWordPressテーマ。Part 1 / 5: style.css
Version: 1.0.0
Text Domain: luna-rose-fortune
*/
:root {
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
	color: var(--text);
	line-height: 1.75;
	background: radial-gradient(circle at top left, rgba(246, 155, 193, 0.22), transparent 28%), radial-gradient(circle at 90% 10%, rgba(236, 217, 255, 0.35), transparent 22%), linear-gradient(180deg, #fffafd 0%, #fff2f8 45%, #fff9fc 100%);
	overflow-x: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

button,
input,
select,
textarea {
	font: inherit;
}

.site-wrap {
	min-height: 100vh;
}

.container {
	width: min(var(--max), calc(100% - 32px));
	margin: 0 auto;
}

.section {
	padding: 82px 0;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.78);
	color: var(--accent-deep);
	border: 1px solid var(--line);
	font-size: .92rem;
	box-shadow: var(--shadow-soft);
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 18px;
	margin-bottom: 28px;
}

.section-head h2 {
	margin: 10px 0 0;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.2;
}

.section-head p,
.muted {
	color: var(--sub);
}

.card {
	background: var(--card);
	border: 1px solid rgba(255, 255, 255, 0.95);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.grid-2,
.grid-3,
.grid-4,
.pricing-grid,
.business-grid,
.highlight-strip,
.form-grid,
.hero-wrap,
.fortune-layout,
.profile-layout,
.booking-layout {
	display: grid;
	gap: 22px;
}

.grid-2,
.form-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3,
.highlight-strip,
.business-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4,
.pricing-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero-wrap {
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
}

.fortune-layout {
	grid-template-columns: 0.95fr 1.05fr;
	align-items: start;
}

.profile-layout {
	grid-template-columns: 0.85fr 1.15fr;
	align-items: stretch;
}

.booking-layout {
	grid-template-columns: 1.05fr 0.95fr;
	align-items: start;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 12px 22px;
	border-radius: 999px;
	border: none;
	font-weight: 700;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn-primary {
	color: #fff;
	background: linear-gradient(135deg, var(--accent), var(--accent-strong));
	box-shadow: 0 14px 28px rgba(236, 95, 162, 0.22);
}

.btn-secondary {
	color: var(--accent-deep);
	background: rgba(255, 255, 255, 0.76);
	border: 1px solid var(--line);
}

.btn-line {
	color: #fff;
	background: linear-gradient(135deg, #ff8dbd, #ff62a5);
}

.btn-paypay {
	color: #fff;
	background: linear-gradient(135deg, #f05c8a, #d13e72);
}

.topbar {
	background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(255,240,247,0.96));
	border-bottom: 1px solid var(--line);
	text-align: center;
	padding: 10px 16px;
	font-size: .94rem;
	color: var(--accent-deep);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 250, 253, 0.78);
	border-bottom: 1px solid rgba(230, 151, 189, 0.18);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 78px;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 800;
	color: var(--accent-deep);
	letter-spacing: .04em;
}

.brand-mark {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ffd3e7, #f69bc1);
	display: grid;
	box-shadow: var(--shadow-soft);
	font-size: 1.2rem;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	color: var(--sub);
	font-size: .96rem;
}

.hero {
	padding: 78px 0 42px;
}

.hero-copy h1 {
	font-size: clamp(2.6rem, 6vw, 4.8rem);
	line-height: 1.08;
	margin: 18px 0;
	letter-spacing: .02em;
}

.hero-copy p {
	color: var(--sub);
	font-size: 1.05rem;
	max-width: 680px;
	margin-bottom: 24px;
}

.hero-actions,
.hero-trust,
.payment-row,
.fortune-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero-trust {
	margin-top: 20px;
}

.trust-chip,
.fortune-tag,
.line-id {
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,0.8);
	border: 1px solid var(--line);
	color: var(--accent-deep);
	font-size: .92rem;
	font-weight: 700;
}

.hero-panel,
.profile-visual {
	padding: 24px;
	border-radius: var(--radius-xl);
	background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.72)), linear-gradient(135deg, rgba(255,211,231,0.4), rgba(236,217,255,0.35));
	border: 1px solid rgba(255,255,255,0.95);
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;
}

.moon-visual {
	width: 140px;
	height: 140px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fffdfd, #ffdce9 50%, #f6a0c4 75%, #e57aaa 100%);
	box-shadow: 0 0 35px rgba(236, 95, 162, 0.22);
}

.mini-stack,
.faq-list {
	display: grid;
	gap: 12px;
}

.mini-card,
.highlight-box,
.line-box,
.result-box,
.booking-status {
	padding: 16px 18px;
	border-radius: 18px;
	background: rgba(255,255,255,0.8);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-soft);
}

.icon-bubble {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	display: grid;
	margin-bottom: 16px;
	background: linear-gradient(135deg, rgba(255,211,231,0.9), rgba(236,217,255,0.88));
	color: var(--accent-deep);
	font-size: 1.4rem;
	box-shadow: var(--shadow-soft);
}

.service-card,
.feature-card,
.review-card,
.flow-card,
.business-card,
.line-card,
.pricing-card,
.fortune-card,
.profile-card,
.booking-card,
.faq-item {
	padding: 24px;
}

.service-card ul,
.pricing-card ul,
.business-card ul,
.line-card ul,
.profile-card ul,
.booking-card ul {
	list-style: none;
	display: grid;
	gap: 10px;
	margin-top: 16px;
	padding: 0;
}

.service-card li::before,
.pricing-card li::before,
.business-card li::before,
.line-card li::before,
.profile-card li::before,
.booking-card li::before {
	content: "♡ ";
	color: var(--accent-strong);
	font-weight: 700;
}

.field,
input,
select,
textarea {
	width: 100%;
	min-height: 50px;
	border-radius: 16px;
	border: 1px solid var(--line-strong);
	background: rgba(255,255,255,0.88);
	padding: 12px 16px;
	color: var(--text);
	outline: none;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

.form-full {
	grid-column: 1 / -1;
}

.price {
	font-size: 2rem;
	font-weight: 800;
	margin: 12px 0 10px;
	color: var(--accent-deep);
}

.price span {
	font-size: .95rem;
	font-weight: 500;
	color: var(--sub);
}

.popular-tag {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 6px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--accent), var(--accent-strong));
	color: #fff;
	font-size: .82rem;
	font-weight: 700;
}

.review-meta,
.payment-note {
	color: var(--sub);
	font-size: .92rem;
}

.cta-band {
	padding: 34px;
	text-align: center;
	background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,232,243,0.95));
	border-radius: var(--radius-xl);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

.site-footer {
	padding: 46px 0 56px;
	color: var(--sub);
}

.footer-wrap {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	align-items: center;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

@media (max-width: 1080px) {
	.grid-4,
					  .pricing-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	
	.hero-wrap,
					  .fortune-layout,
					  .profile-layout,
					  .booking-layout,
					  .business-grid,
					  .grid-3,
					  .highlight-strip {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.section {
		padding: 62px 0;
	}
	
	.header-inner {
		align-items: flex-start;
		min-height: auto;
		padding: 14px 0;
		flex-direction: column;
	}
	
	.main-navigation ul {
		gap: 12px;
	}
	
	.hero {
		padding-top: 54px;
	}
	
	.hero-copy h1 {
		font-size: 2.35rem;
	}
	
	.grid-2,
					  .grid-3,
					  .grid-4,
					  .pricing-grid,
					  .form-grid {
		grid-template-columns: 1fr;
	}
	
	.section-head {
		align-items: start;
		flex-direction: column;
	}
	
	.cta-band {
		padding: 26px 20px;
	}
}

/* ===================================
   全体デザイン（カラー・基本設定）
=================================== */
:root {
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	color: var(--text);
	background: radial-gradient(circle at top left, rgba(255, 215, 235, 0.55), transparent 30%), radial-gradient(circle at top right, rgba(214, 207, 255, 0.42), transparent 28%), linear-gradient(180deg, #fffafd 0%, #fff7fb 45%, #fffdfd 100%);
	line-height: 1.8;
	letter-spacing: .02em;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

.container {
	width: min(var(--max), calc(100% - 32px));
	margin: 0 auto;
}

.site-main {
	overflow: hidden;
}

.section {
	padding: 88px 0;
	position: relative;
}

.section-head {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 28px;
	align-items: end;
	margin-bottom: 36px;
}

.section-head h2,
.hero-copy h1 {
	margin: 0;
	line-height: 1.25;
	letter-spacing: .03em;
}

.section-head h2 {
	font-size: clamp(28px, 4vw, 42px);
}

.section-head p,
.hero-copy p,
.hero-panel p,
.card p,
.payment-note {
	color: var(--muted);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	background: linear-gradient(135deg, #fff, #ffe8f3);
	border: 1px solid rgba(217, 106, 167, 0.18);
	box-shadow: 0 8px 20px rgba(217, 106, 167, 0.08);
	color: var(--primary-dark);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 18px;
}

.hero {
	padding: 80px 0 72px;
	position: relative;
}

.hero::before,
.hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(20px);
	z-index: 0;
}

.hero::before {
	width: 260px;
	height: 260px;
	background: rgba(255, 205, 229, 0.35);
	top: -40px;
	left: -80px;
}

.hero::after {
	width: 280px;
	height: 280px;
	background: rgba(204, 192, 255, 0.28);
	right: -90px;
	top: 10px;
}

.hero-wrap {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 34px;
	align-items: center;
}

.hero-copy h1 {
	font-size: clamp(34px, 5vw, 62px);
	margin-bottom: 18px;
}

.hero-copy p {
	font-size: 16px;
	margin-bottom: 22px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 26px 0 24px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 22px;
	border-radius: 999px;
	font-weight: 700;
	transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
	box-shadow: 0 10px 24px rgba(120, 76, 104, 0.12);
}

.btn:hover {
	transform: translateY(-2px);
	opacity: .95;
}

.btn-primary {
	background: linear-gradient(135deg, var(--primary), #ef8cc2);
	color: #fff;
}

.btn-secondary {
	background: #fff;
	color: var(--primary-dark);
	border: 1px solid rgba(217, 106, 167, 0.2);
}

.btn-line {
	background: linear-gradient(135deg, #3ad16b, #19b957);
	color: #fff;
}

.btn-paypay {
	background: linear-gradient(135deg, #ff5a7a, #ff6f9d);
	color: #fff;
}

.hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 26px;
}

.trust-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(217, 106, 167, 0.14);
	color: var(--primary-dark);
	font-size: 13px;
}

.highlight-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.highlight-box {
	background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,243,248,0.9));
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	border-radius: var(--radius-sm);
	padding: 18px;
	font-size: 14px;
}

.highlight-box strong {
	display: block;
	margin-bottom: 6px;
	color: var(--primary-dark);
}

.hero-panel,
.card {
	background: var(--card);
	border: 1px solid rgba(255,255,255,0.8);
	box-shadow: var(--shadow);
}

.hero-panel {
	border-radius: 32px;
	padding: 28px;
	position: relative;
	overflow: hidden;
}

.hero-panel::before {
	content: "";
	position: absolute;
	background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
	pointer-events: none;
}

.hero-panel h2 {
	margin: 0 0 10px;
	font-size: 28px;
}

.moon-visual {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	margin-bottom: 18px;
	background: radial-gradient(circle at 35% 35%, #fffdf6 0%, #fff1c8 26%, #f5d8f0 60%, #c7b6ff 100%);
	box-shadow: 0 0 0 16px rgba(255,255,255,0.35), 0 0 60px rgba(222, 175, 214, 0.45);
}

.mini-stack {
	display: grid;
	gap: 12px;
	margin-top: 18px;
}

.mini-card {
	padding: 14px 16px;
	border-radius: 18px;
	background: rgba(255,255,255,0.78);
	border: 1px solid rgba(217,106,167,0.12);
	font-size: 14px;
}

.grid-4,
.grid-3,
.pricing-grid {
	display: grid;
	gap: 20px;
}

.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.pricing-grid {
	grid-template-columns: repeat(4, 1fr);
}

.card {
	border-radius: var(--radius);
	padding: 26px;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 50px rgba(164, 96, 136, 0.18);
}

.card h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 22px;
}

.card ul {
	padding-left: 18px;
	margin: 16px 0 0;
	color: var(--muted);
}

.card li + li {
	margin-top: 6px;
}

.icon-bubble {
	width: 52px;
	height: 52px;
	border-radius: 18px;
	display: grid;
	font-size: 22px;
	margin-bottom: 16px;
	background: linear-gradient(135deg, #ffe8f3, #f1e7ff);
	color: var(--primary-dark);
	box-shadow: 0 8px 20px rgba(217, 106, 167, 0.12);
}

.feature-card {
	text-align: left;
}

.fortune-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.fortune-card h3 {
	margin-bottom: 8px;
}

.fortune-generator {
	display: grid;
	gap: 16px;
	margin-top: 18px;
}

.fortune-generator label {
	display: grid;
	gap: 8px;
	font-weight: 700;
	color: var(--primary-dark);
}

.fortune-generator input,
.fortune-generator select {
	width: 100%;
	min-height: 52px;
	padding: 0 14px;
	border: 1px solid rgba(217,106,167,0.18);
	border-radius: 14px;
	background: rgba(255,255,255,0.92);
	color: var(--text);
	font-size: 15px;
}

.fortune-generator input:focus,
.fortune-generator select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(217,106,167,0.12);
}

.result-box {
	margin-top: 18px;
	padding: 22px;
	border-radius: 20px;
	background: linear-gradient(180deg, #fff, #fff3f8);
	border: 1px solid var(--line);
}

.result-box h4 {
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 22px;
}

.fortune-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.fortune-tag {
	padding: 8px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(217,106,167,0.16);
	color: var(--primary-dark);
	font-size: 13px;
	font-weight: 700;
}

.pricing-card {
	position: relative;
}

.pricing-card .price {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
	margin: 14px 0;
	color: var(--primary-dark);
}

.pricing-card .price span {
	font-size: 15px;
	color: var(--muted);
	font-weight: 600;
}

.pricing-card.featured {
	background: linear-gradient(180deg, rgba(255, 245, 251, 0.98), rgba(255,255,255,0.92));
	border: 1.5px solid rgba(217,106,167,0.28);
	transform: translateY(-8px);
}

.popular-tag {
	position: absolute;
	top: 18px;
	right: 18px;
	background: linear-gradient(135deg, var(--primary), #ed88c0);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	padding: 8px 12px;
	border-radius: 999px;
	box-shadow: 0 10px 20px rgba(217,106,167,0.18);
}

.payment-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.payment-note {
	margin-top: 12px;
	font-size: 14px;
}

@media (max-width: 1100px) {
	.grid-4,
				  .pricing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.hero-wrap,
				  .section-head,
				  .fortune-layout {
		grid-template-columns: 1fr;
	}
	
	.highlight-strip {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.section {
		padding: 64px 0;
	}
	
	.container {
		width: min(100% - 20px, var(--max));
	}
	
	.hero {
		padding-top: 44px;
	}
	
	.hero-copy h1 {
		font-size: 34px;
	}
	
	.hero-panel {
		padding: 22px;
	}
	
	.grid-4,
				  .grid-3,
				  .pricing-grid {
		grid-template-columns: 1fr;
	}
	
	.card {
		padding: 22px;
	}
	
	.btn {
		width: 100%;
	}
	
	.payment-row {
		flex-direction: column;
	}
	
	.popular-tag {
		position: static;
		display: inline-block;
		margin-bottom: 12px;
	}
}

/* ===================================
 全体
=================================== */
body {
	margin: 0;
	font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
	background: #fff7fb;
	color: #4a3142;
}

/* 幅調整（WordPress対策） */
.site-main {
	max-width: 1200px;
	margin: 0 auto;
}

/* ===================================
 共通
=================================== */
.container {
	padding: 0 20px;
}

.section {
	padding: 60px 0;
}

/* ===================================
 ボタン
=================================== */
.btn {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 30px;
	font-weight: bold;
}

.btn-primary {
	background: #d96aa7;
	color: white;
}

.btn-secondary {
	background: white;
	border: 1px solid #d96aa7;
	color: #d96aa7;
}

.btn-line {
	background: #06c755;
	color: white;
}

/* ===================================
 ヒーロー
=================================== */
.hero {
	padding: 60px 0;
	background: linear-gradient(180deg, #fff0f6, #ffffff);
}

.hero-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.hero-copy {
	flex: 1;
}

.hero-copy h1 {
	font-size: 32px;
}

.hero-panel {
	flex: 1;
	background: white;
	padding: 20px;
	border-radius: 20px;
}

/* ===================================
 カード
=================================== */
.card {
	background: white;
	padding: 20px;
	border-radius: 16px;
	margin-bottom: 20px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* ===================================
 グリッド（重要：ここで崩れる人多い）
=================================== */
.grid-4 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.pricing-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

/* PC表示 */
@media (min-width: 768px) {
	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.pricing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===================================
 強調カード
=================================== */
.featured {
	border: 2px solid #d96aa7;
}

/* ===================================
 アイコン
=================================== */
.icon-bubble {
	font-size: 24px;
	margin-bottom: 10px;
}

/* ===================================
 料金
=================================== */
.price {
	font-size: 28px;
	font-weight: bold;
	color: #d96aa7;
}

/* ===================================
 フォーム
=================================== */
input, select {
	width: 100%;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

/* ===================================
 支払いボタン
=================================== */
.payment-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ===================================
  固定ページ専用
=================================== */
.fortune-page {
	background: linear-gradient(180deg, #fff0f6 0%, #fff7fb 45%, #ffffff 100%);
	color: #4a3142;
	font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
	padding: 0;
}

.fortune-page * {
	box-sizing: border-box;
}

.fortune-page a {
	text-decoration: none;
}

.fortune-page .site-main {
	max-width: 1200px;
	margin: 0 auto;
}

.fortune-page .container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.fortune-page .section {
	padding: 64px 0;
}

.fortune-page .badge {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #f2c5dd;
	color: #c25d93;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 16px;
}

.fortune-page .hero {
	padding: 56px 0;
	background: linear-gradient(180deg, #fff0f6, #ffffff);
}

.fortune-page .hero-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.fortune-page .hero-copy h1 {
	margin: 0 0 16px;
	font-size: 32px;
	line-height: 1.35;
	color: #4a3142;
}

.fortune-page .hero-copy p,
.fortune-page .section-head p,
.fortune-page .card p,
.fortune-page .payment-note {
	color: #7a6071;
	line-height: 1.8;
}

.fortune-page .hero-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 22px 0;
}

.fortune-page .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 18px;
	border-radius: 999px;
	font-weight: 700;
}

.fortune-page .btn-primary {
	background: #d96aa7;
	color: #fff;
}

.fortune-page .btn-secondary {
	background: #fff;
	color: #d96aa7;
	border: 1px solid #d96aa7;
}

.fortune-page .btn-line {
	background: #06c755;
	color: #fff;
}

.fortune-page .btn-paypay {
	background: #ff5a7a;
	color: #fff;
}

.fortune-page .hero-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.fortune-page .trust-chip {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid #f0d7e5;
	color: #b84d87;
	font-size: 13px;
}

.fortune-page .highlight-strip {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.fortune-page .highlight-box,
.fortune-page .card,
.fortune-page .hero-panel {
	background: #fff;
	border-radius: 18px;
	padding: 20px;
	box-shadow: 0 8px 24px rgba(120, 76, 104, 0.08);
}

.fortune-page .highlight-box strong {
	display: block;
	margin-bottom: 6px;
	color: #b84d87;
}

.fortune-page .hero-panel h2 {
	margin-top: 0;
}

.fortune-page .moon-visual {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	margin-bottom: 16px;
	background: radial-gradient(circle at 35% 35%, #fffdf6 0%, #fff1c8 28%, #f3d7eb 62%, #d6cfff 100%);
}

.fortune-page .mini-stack {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

.fortune-page .mini-card {
	padding: 12px 14px;
	border-radius: 14px;
	background: #fff7fb;
	border: 1px solid #f3dbe8;
	font-size: 14px;
}

.fortune-page .section-head {
	margin-bottom: 28px;
}

.fortune-page .section-head h2 {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.4;
}

.fortune-page .grid-4,
.fortune-page .grid-3,
.fortune-page .pricing-grid,
.fortune-page .fortune-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.fortune-page .card h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

.fortune-page .card ul {
	padding-left: 18px;
	margin: 14px 0 0;
	color: #7a6071;
}

.fortune-page .icon-bubble {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: grid;
	margin-bottom: 14px;
	font-size: 22px;
	background: #fff0f6;
}

.fortune-page .fortune-generator {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}

.fortune-page .fortune-generator label {
	display: grid;
	gap: 8px;
	font-weight: 700;
	color: #b84d87;
}

.fortune-page input,
.fortune-page select {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid #ead2df;
	border-radius: 10px;
	background: #fff;
}

.fortune-page .result-box {
	margin-top: 16px;
	padding: 18px;
	border-radius: 16px;
	background: #fff7fb;
	border: 1px solid #f0d7e5;
}

.fortune-page .fortune-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.fortune-page .fortune-tag {
	display: inline-block;
	padding: 7px 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #f0d7e5;
	color: #b84d87;
	font-size: 12px;
	font-weight: 700;
}

.fortune-page .price {
	font-size: 30px;
	font-weight: 800;
	color: #d96aa7;
	margin: 12px 0;
}

.fortune-page .price span {
	font-size: 14px;
	color: #7a6071;
	font-weight: 600;
}

.fortune-page .featured {
	border: 2px solid #efb9d2;
}

.fortune-page .popular-tag {
	display: inline-block;
	margin-bottom: 12px;
	padding: 7px 10px;
	border-radius: 999px;
	background: #d96aa7;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.fortune-page .payment-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 24px;
}

@media (min-width: 768px) {
	.fortune-page .hero-wrap {
		grid-template-columns: 1.2fr 0.8fr;
		align-items: center;
	}
	
	.fortune-page .hero-actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.fortune-page .grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.fortune-page .grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.fortune-page .pricing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.fortune-page .fortune-layout {
		grid-template-columns: 1fr 1fr;
	}
	
	.fortune-page .highlight-strip {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.fortune-page .section-head {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 24px;
		align-items: end;
	}
}