:root {
	--primary-color: #ff4b4b;
	--gradient-start: #fff7f6;
	--gradient-end: #ffdcda;
	--text-color: #333333;
	--container-width: 1200px;
}

/* Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
	color: var(--text-color);
	background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
	line-height: 1.6;
	min-height: 100vh;
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* Hero Section */
.hero {
	padding: 60px 0 0;
	text-align: center;
}

/* Logo */
.logo {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
}

.logo-image {
	width: 120px;
	height: 120px;
	object-fit: contain;
	display: block;
	border-radius: 22.222px;
	border: 1.5px solid #fff;
	background: rgba(241, 241, 241, 0.04);
	box-shadow: 8px 89px 25px 0px rgba(135, 135, 135, 0), 5px 57px 23px 0px rgba(135, 135, 135, 0.01), 3px 32px 19px 0px rgba(135, 135, 135, 0.02),
		1px 14px 14px 0px rgba(135, 135, 135, 0.04), 0px 4px 8px 0px rgba(135, 135, 135, 0.05);
}

/* Bubble Speech */
.sub-catch {
	margin-top: 16px;
	text-align: center;
}

.bubble-speech {
	max-width: 300px;
	height: auto;
}

/* App Title */
.app-title {
	text-align: center;
	color: var(--primary-color);
	line-height: 1.3;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4px;
}

.app-name-en {
	font-family: "Asap", sans-serif;
	font-weight: 700;
	font-size: 30px;
	display: inline-block;
}

.app-name-jp {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 900;
	font-size: 22px;
	display: inline-block;
}

/* Subtitle */
.subtitle {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--primary-color);
}

.subtitle :is(.kanji, .english) {
	font-size: 16px;
	font-style: normal;
}

/* App Store Button */
.app-download {
	margin-top: 16px;
}

.app-store-button img {
	height: 50px;
	transition: transform 0.3s ease;
}

.app-store-button:hover img {
	transform: scale(1.05);
}

/* Footer */
footer {
	padding: 32px 0 64px;
}

.footer-links {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.footer-links a {
	color: var(--primary-color);
	text-decoration: none;
	font-size: 0.9rem;
}

.footer-links a:hover {
	color: var(--primary-color);
}

.social-links {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.social-link img {
	width: 24px;
	height: 24px;
}

/* Responsive Design */
@media (max-width: 768px) {
	.features .container {
		grid-template-columns: 1fr;
	}

	.footer-links {
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}
}

/* Slider Section */
.slider-section {
	max-width: 840px;
	margin: 40px auto 0;
	overflow: hidden;
	padding: 0 20px;
}

.slider-container {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

.slider-container::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

.slider-wrapper {
	display: flex;
	gap: 20px;
	padding-right: calc(100% - 283px - 40px);
}

.slide-image {
	width: 283px;
	flex-shrink: 0;
	border-radius: 36px;
	border: 2px solid #fff;
	object-fit: cover;
}

/* Policy Pages */
.policy-container {
	padding: 60px 0;
	font-family: "Noto Sans JP", sans-serif;
}

.policy-container h1 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 40px;
	text-align: center;
}

.policy-content {
	background: white;
	border-radius: 16px;
	padding: 32px;
	margin-bottom: 32px;
}

.policy-content section {
	margin-bottom: 32px;
}

.policy-content section:last-child {
	margin-bottom: 0;
}

.policy-content .policy-intro {
	margin-bottom: 40px;
}

.policy-content h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 16px;
}

.policy-content p {
	margin-bottom: 16px;
	line-height: 1.8;
}

.policy-content p:last-child {
	margin-bottom: 0;
}

.policy-content ul,
.policy-content ol {
	list-style-type: none;
	padding-left: 24px;
	margin-bottom: 16px;
}

.policy-content ul:last-child,
.policy-content ol:last-child {
	margin-bottom: 0;
}

.policy-content li {
	margin-bottom: 8px;
	position: relative;
	line-height: 1.6;
}

.policy-content li:last-child {
	margin-bottom: 0;
}

.policy-content ul > li::before {
	content: "•";
	color: var(--primary-color);
	position: absolute;
	left: -20px;
}

.policy-content ol {
	counter-reset: item;
	padding-left: 24px;
	margin-bottom: 16px;
}

.policy-content ol > li {
	counter-increment: item;
	margin-bottom: 8px;
	position: relative;
}

.policy-content ol > li::before {
	content: counter(item) ".";
	color: var(--primary-color);
	position: absolute;
	left: -24px;
	font-weight: 700;
}

.policy-content ol ol {
	counter-reset: subitem;
	margin-top: 8px;
	margin-bottom: 0;
}

.policy-content ol ol > li {
	counter-increment: subitem;
	padding-left: 16px;
}

.policy-content ol ol > li::before {
	content: counter(subitem, lower-alpha) ".";
	left: -8px;
}

.back-to-home {
	text-align: center;
}

.back-to-home a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 700;
}

.back-to-home a:hover {
	text-decoration: underline;
}