:root {
	--primary-color: #009e8a;
	/* Dark Gray / Text */
	--secondary-color: #000000;
	/* Euglena Green / Accent */
	--background-sub: #EE8AAA;
	/* Light Gray for Sections */
	--white: #FFFFFF;
	--font-heading: 'Montserrat', sans-serif;
	--font-body: 'Lato', sans-serif;
	--transition: all 0.3s ease;
}

body {
	font-family: var(--font-body);
	color: var(--primary-color);
	line-height: 1.6;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	line-height: 1.2;
}

/* 共通コンポーネント: ボタン */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	transition: var(--transition);
	border-radius: 4px;
	letter-spacing: 0.05em;
	cursor: pointer;
	text-decoration: none;
}

.btn.btn-primary {
	background-color: var(--background-sub);
	color: var(--white);
	border: 2px solid var(--background-sub);
}

.btn.btn-primary:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(111, 160, 70, 0.3);
}

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

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

.btn.btn-sm {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.btn.btn-lg {
	padding: 1rem 2.5rem;
	font-size: 1.125rem;
}

/* セクション設定: 重要 (margin禁止、paddingで間隔調整) */
section {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	width: 100%;
}

section.bg-gray-light {
	background-color: var(--background-sub);
}

/* タイトルスタイル */
.section-headline {
	text-align: center;
	margin-bottom: 3rem;
}

.section-headline .subtitle {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.5rem;
}

.section-headline h2 {
	font-size: 2.25rem;
	font-weight: 700;
}

@media(min-width: 768px) {
	.section-headline h2 {
		font-size: 3rem
	}
}

/* ユーティリティ */
.container-custom {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

[x-cloak] {
	display: none !important;
}

/* ./parts/common-header.html */

header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 50;
	background-color: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


header .header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
	padding: 0 1.5rem;
	margin: 0 auto;
}

header .logo {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--primary-color);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 60;
}

header .logo img {
	height: 50px;
	width: auto;
}

@media (max-width: 1023px) {
	header .header-actions {
		display: none;
	}

	.mobile-menu-actions {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		margin-top: 2rem;
		width: 100%;
		padding: 0 2rem;

	}

	.mobile-menu-actions .lang-switch {
		font-weight: 600;
		color: var(--primary-color);
		font-size: 0.9rem;
	}

}

@media (min-width: 1024px) {
	.mobile-menu-actions {
		display: none;
	}

	.header-actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
	}

	.header-actions .lang-switch {
		font-weight: 600;
		color: #000000;
		font-size: 0.9rem;
	}
}

nav.desktop-nav {
	display: none;
}

@media(min-width: 1024px) {
	nav.desktop-nav {
		display: flex;
		align-items: center;
		gap: 2rem;
	}
}

nav.desktop-nav a {
	text-decoration: none;
	color: #000000;
	font-weight: 500;
	font-size: 0.95rem;
	position: relative;
	padding-bottom: 4px;
}

nav.desktop-nav a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--secondary-color);
	transition: width 0.3s ease;
}

nav.desktop-nav a:hover::after,
nav.desktop-nav a.active::after {
	width: 100%;
}

nav.desktop-nav a.active {
	color: var(--secondary-color);
}

/* ドロップダウン関係のスタイルを独立させる */
@media(min-width: 1024px) {
	.nav-item-has-children {
		position: relative;
		padding-bottom: 20px;
		margin-bottom: -20px;
	}

	.nav-item-has-children>a[href^="javascript"] {
		cursor: default;
	}



	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background: white;
		min-width: 200px;
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		padding: 1rem 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: all 0.3s ease;
	}

	.nav-item-has-children:hover .dropdown-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.dropdown-menu a {
		display: block;
		padding: 0.5rem 1.5rem;
		width: 100%;
		text-decoration: none;
	}

	.dropdown-menu a:hover {
		background-color: #f8fafc;
	}

	.dropdown-menu a::after {
		display: none;
	}
}

/* Mobile Nav */
.mobile-nav-toggle {
	display: block;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 60;
	padding: 5px;
}

@media(min-width: 1024px) {
	.mobile-nav-toggle {
		display: none;
	}
}

.mobile-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	background-color: white;
	z-index: 55;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.mobile-menu-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

.mobile-submenu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 0.5rem 0;
	background: #f8fafc;
	padding: 0.75rem;
	border-radius: 10px;
	width: 100%;
}

/* ./parts/common-footer.html */

footer {
	background-color: #1a1a1a;
	color: #e5e5e5;
	padding-top: 5rem;
	padding-bottom: 2rem;
	font-family: var(--font-body);
}

footer .footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 768px) {

	footer .footer-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (min-width: 1024px) {

	footer .footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr
	}
}

footer .footer-col h4 {
	color: #fff;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
	letter-spacing: 0.05em;
}

footer .footer-col p {
	font-size: 0.9rem;
	color: #9ca3af;
	margin-bottom: 1rem;
	line-height: 1.6;
}

footer .footer-col ul {
	list-style: none;
	padding: 0;
}

footer .footer-col li {
	margin-bottom: 0.75rem;
}

footer .footer-col li a {
	color: #9ca3af;
	text-decoration: none;
	transition: color 0.3s;
	font-size: 0.9rem;
}

footer .footer-col li a:hover {
	color: var(--secondary-color);
}

footer .logo-area {
	margin-bottom: 1.5rem;
	font-weight: bold;
	font-size: 1.5rem;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
}

footer .logo-area img {
	height: 32px;
}

footer .social-icons {
	display: flex;
	gap: 1rem;
	margin-top: 1.5rem;
}

footer .social-icons a {
	opacity: 0.7;
	transition: opacity 0.3s;
}

footer .social-icons a:hover {
	opacity: 1;
}

footer .social-icons a img {
	width: 24px;
	height: 24px;
}

footer .copyright {
	border-top: 1px solid #333;
	margin-top: 4rem;
	padding-top: 2rem;
	text-align: center;
	font-size: 0.8rem;
	color: #6b7280;
	display: block;
	text-align: left;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
}

@media(min-width: 768px) {

	footer .copyright {
		flex-direction: row;
		justify-content: space-between;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 1.5rem;
		padding-right: 1.5rem
	}
}

@media(max-width: 768px) {

	footer .copyright {
		flex-direction: row;
		justify-content: space-between;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 1.5rem;
		padding-right: 1.5rem
	}
}

footer .copyright .links {
	display: flex;
	gap: 1.5rem;
}

footer .copyright .links a {
	color: #6b7280;
	text-decoration: none;
}

footer .copyright .links a:hover {
	text-decoration: underline;
}

/* ./parts/products-specs.html */

#specs {
	position: relative;
	background-color: var(--background-sub);
}

#specs .specs-container {
	max-width: 1000px;
	margin: 0 auto;
}

#specs .specs-table-wrapper {
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	border: 1px solid #e5e7eb;
}

#specs table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	font-size: 0.95rem;
}

#specs table th,
#specs table td {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #f3f4f6;
}

#specs table tr:last-child th,
#specs table tr:last-child td {
	border-bottom: none;
}

#specs table th {
	background-color: #fafafa;
	color: var(--primary-color);
	font-weight: 600;
	width: 35%;
	font-family: var(--font-heading);
}

#specs table td {
	color: #4b5563;
	font-weight: 400;
}

/* ホバーエフェクト */

#specs table tr:hover td {
	background-color: #fafafa;
}

@media (max-width: 640px) {

	#specs table th,
	#specs table td {
		display: block;
		width: 100%;
		padding: 0.75rem 1rem;
	}

	#specs table th {
		background-color: #f3f4f6;
		color: var(--secondary-color);
		padding-bottom: 0.25rem;
		border-bottom: none;
		text-transform: uppercase;
		font-size: 0.8rem;
		letter-spacing: 0.05em;
	}

	#specs table td {
		padding-top: 0.25rem;
	}
}

#specs .download-area {
	margin-top: 3rem;
	text-align: center;
}

#specs .download-area p {
	margin-bottom: 1.5rem;
	color: #6b7280;
}

/* ./parts/products-hero.html */

section#products-hero {
	position: relative;
	background-color: var(--background-sub);
	padding-top: calc(80px + 5rem);
	padding-bottom: 5rem;
	overflow: hidden;
}

section#products-hero .bg-pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.4;
	background-image: radial-gradient(var(--secondary-color) 0.5px, transparent 0.5px);
	background-size: 24px 24px;
	z-index: 0;
}

section#products-hero .container-custom {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 900px;
}

section#products-hero h1 {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
	letter-spacing: -0.02em;
}

@media (min-width: 768px) {

	section#products-hero h1 {
		font-size: 4rem
	}
}

section#products-hero h1 span {
	color: var(--secondary-color);
}

section#products-hero p.lead {
	font-size: 1.125rem;
	color: #4b5563;
	line-height: 1.8;
	max-width: 700px;
	margin: 0 auto 3rem;
}

@media (min-width: 768px) {

	section#products-hero p.lead {
		font-size: 1.25rem
	}
}

section#products-hero .hero-visual {
	display: block;
	width: 100%;
	height: 300px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	margin-top: 2rem;
	filter: brightness(0.95);
}

/* ./parts/index-intro.html */

#intro-section {
	background-color: #ffffff;
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}

.intro-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.intro-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

@media (min-width: 768px) {

	.intro-grid {
		grid-template-columns: 1fr 1fr
	}
}

.intro-visual {
	position: relative;
	height: 300px;
}

@media (min-width: 768px) {

	.intro-visual {
		height: 400px
	}
}

.intro-visual img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 8px;
}

.intro-btn {
	text-align: right;
}

.intro-btn .btn-primary {
	transition: 0.3s;
}

.intro-btn .btn-primary:hover {
	background-color: #ffffff;
	border: 2px solid var(--background-sub);
	color: var(--background-sub);
}

.intro-content h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
}

.intro-content p {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--text-light);
	margin-bottom: 1.5rem;
}

.intro-stat {
	display: flex;
	flex-direction: column;
	align-items: baseline;
	gap: 0.5rem;
	margin: 2rem 0;
	padding: 1.5rem;
	background-color: rgb(237, 238, 247);
	border-left: 4px solid var(--background-sub);
	border-radius: 4px;
}

.intro-stat-value {
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 700;
	color: var(--primary-color);
	font-family: var(--font-heading);
}

.intro-stat-label {
	font-size: 0.9rem;
	color: var(--text-light);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ./parts/index-hero.html */

#hero-section {
	position: relative;
	height: 100vh;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: left;
	overflow: hidden;
	margin-top: 80px;
	background-color: #000000;
	z-index: 1;
}

#hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
}

#hero-section .hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	z-index: -1;
	opacity: 0.6;
	-o-object-position: top;
	object-position: top;
}

#hero-section .hero-content {
	position: relative;
	z-index: 10;
	text-align: left;
	max-width: 800px;
	padding: 2rem 5rem;
}

#hero-section .hero-headline {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 8vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1rem;
	color: #ffffff;
	letter-spacing: -0.02em;
}

#hero-section .hero-subheadline {
	font-size: clamp(1rem, 3vw, 1.5rem);
	font-weight: 300;
	color: #ffffff;
	margin-bottom: 2rem;
	line-height: 1.6;
}

#hero-section .hero-cta {
	display: flex;
	gap: 1rem;
	justify-content: left;
	flex-wrap: wrap;
}

#hero-section .hero-cta .btn-outline {
	background-color: var(--primary-color);
	color: #ffffff;
	transition: 0.3s;
}

#hero-section .hero-cta .btn-outline:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(111, 160, 70, 0.3);
}

/* ./parts/science-research.html */

.research-section {
	background-color: #ffffff;
}

.research-section .research-grid {
	display: grid;
	gap: 4rem;
	align-items: center;
}

@media (min-width: 960px) {

	.research-section .research-grid {
		grid-template-columns: 1fr 1fr
	}
}

.research-section .research-content h3 {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
}

.research-section .research-content p {
	margin-bottom: 1.5rem;
	color: #4b5563;
	text-align: justify;
}

.research-section .research-content .stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	margin-top: 3rem;
	border-top: 1px solid #e5e7eb;
	padding-top: 2rem;
}

.research-section .research-content .stat-item .number {
	display: block;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--secondary-color);
	line-height: 1;
	margin-bottom: 0.5rem;
	font-family: var(--font-heading);
}

.research-section .research-content .stat-item .label {
	font-size: 0.875rem;
	color: #6b7280;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.research-section .research-image {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.research-section .research-image::before {
	content: '';
	display: block;
	padding-top: 75%;
	/* 4:3 Aspect Ratio */
}

.research-section .research-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.research-section .research-image:hover img {
	transform: scale(1.05);
}

.research-section .research-image .caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 1rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--primary-color);
	border-top-right-radius: 4px;
}

/* ./parts/index-features.html */

#features-section {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	background-color: #ffffff;
}

.features-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.features-header {
	text-align: center;
	margin-bottom: 4rem;
}

.features-header .subtitle {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.75rem;
}

.features-header h2 {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	color: var(--primary-color);
}

.features-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {

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

.feature-card {
	background-color: #f9fafb;
	padding: 2.5rem;
	border-radius: 8px;
	border-left: 4px solid var(--secondary-color);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}

.feature-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.feature-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: var(--secondary-color);
}

.feature-card h3 {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	color: var(--primary-color);
}

.feature-card p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-light);
	margin-bottom: 1.5rem;
	flex-grow: 1;
}

.feature-card a {
	color: var(--secondary-color);
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.3s ease;
}

.feature-card a:hover {
	gap: 1rem;
}

/* ./parts/science-hero.html */

#science-hero {
	position: relative;
	background-color: #f8f9fa;
	overflow: hidden;
	min-height: 60vh;
	display: flex;
	align-items: center;
}

/* 抽象的な背景装飾 */

#science-hero::before {
	content: '';
	position: absolute;
	top: -20%;
	right: -10%;
	width: 50vw;
	height: 50vw;
	background: radial-gradient(circle, rgba(111, 160, 70, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

#science-hero .hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
	position: relative;
	z-index: 1;
}

@media(min-width: 992px) {

	#science-hero .hero-grid {
		grid-template-columns: 1fr 1fr
	}
}

#science-hero .text-content .eyebrow {
	display: block;
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--secondary-color);
	margin-bottom: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.875rem;
}

#science-hero .text-content h1 {
	font-size: clamp(2.5rem, 4.3vw, 3.7rem);
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1.5rem;
	line-height: 1.1;
}

#science-hero .text-content h1 span {
	color: var(--text-light);
	font-weight: 300;
}

#science-hero .text-content p {
	font-size: 1.125rem;
	color: #4b5563;
	margin-bottom: 2rem;
	line-height: 1.8;
	max-width: 540px;
}

#science-hero .visual-content {
	position: relative;
	height: 400px;
}

@media(min-width: 992px) {

	#science-hero .visual-content {
		height: 600px
	}
}

#science-hero .visual-content .main-image {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

#science-hero .visual-content .floating-card {
	position: absolute;
	bottom: 40px;
	left: -20px;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 1.5rem;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	border-left: 4px solid var(--secondary-color);
	max-width: 280px;
}

#science-hero .visual-content .floating-card h4 {
	font-size: 0.9rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

#science-hero .visual-content .floating-card p {
	font-size: 0.8rem;
	color: #666;
	margin: 0;
}

/* ./parts/science-evidence.html */

#science-evidence {
	background-color: #fff;
	position: relative;
}

/* Tab Navigation */
.evidence-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 3rem;
	border-bottom: 1px solid #eee;
	padding-bottom: 0px;
}

@media (min-width: 768px) {
	.evidence-tabs {
		gap: 2rem
	}
}

.tab-btn {
	background: none;
	border: none;
	padding: 1rem 1.5rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: #9ca3af;
	cursor: pointer;
	position: relative;
	transition: color 0.3s ease;
}

.tab-btn:hover {
	color: var(--primary-color);
}

.tab-btn.active {
	color: var(--secondary-color);
}

.tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	/* border-bottomに重ねる */
	left: 0;
	width: 100%;
	height: 3px;
	background-color: var(--secondary-color);
}

.tab-btn .icon-wrap {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 24px;
}

.tab-btn .icon-wrap span {
	font-size: 28px;
}

/* Content Area */
.evidence-content {
	min-height: 500px;
	position: relative;
}

.evidence-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media (min-width: 1024px) {

	.evidence-card {
		grid-template-columns: 1fr 1.2fr
	}
}

.evidence-text h3 {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
}

.evidence-text p {
	color: #4b5563;
	margin-bottom: 1.5rem;
	line-height: 1.8;
}

.evidence-text .study-label {
	display: inline-block;
	background-color: #f3f4f6;
	color: #6b7280;
	font-size: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 99px;
	margin-bottom: 1rem;
	font-weight: 600;
}

.evidence-text ul {
	list-style: none;
	padding: 0;
	margin-bottom: 2rem;
}

.evidence-text ul li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
}

.evidence-text ul li span.check {
	color: var(--secondary-color);
	font-weight: bold;
}

/* Graphs & Charts */
.chart-box {
	background-color: #f9fafb;
	border-radius: 8px;
	padding: 2.5rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	position: relative;
	overflow: hidden;
}

.bar-chart-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bar-group .label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #374151;
}

.bar-group .bar-bg {
	width: 100%;
	height: 32px;
	background-color: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

.bar-group .bar-fill {
	height: 100%;
	background-color: #9ca3af;
	/* Default Placebo Color */
	border-radius: 4px;
	width: 0;
	/* JSで制御 */
	transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 10px;
}

.bar-group .bar-fill span.value {
	color: white;
	font-size: 0.8rem;
	font-weight: bold;
	opacity: 0;
	transition: opacity 0.5s 1s;
}

/* Euglena Color */

.bar-group.euglena .bar-fill {
	background-color: var(--secondary-color);
}

/* Placebo Color */

.bar-group.placebo .bar-fill {
	background-color: #9ca3af;
}

/* Active State for Animations */
.active .bar-fill {
	width: var(--target-width);
}

.active .bar-fill span.value {
	opacity: 1;
}

/* Comparison Stat */
.comparison-stat {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px dashed #d1d5db;
	text-align: center;
}

.comparison-stat .big-number {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--secondary-color);
	display: block;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.comparison-stat .caption {
	font-size: 0.875rem;
	color: #6b7280;
}

#sleep-section,
#meneki-section,
#stress-section {
	background-color: var(--bg-light);
	margin-bottom: 80px;
}

#sleep-section .section-inner,
#meneki-section .section-inner,
#stress-section .section-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

#sleep-section .section-header,
#meneki-section .section-header,
#stress-section .section-header {
	text-align: center;
	margin-bottom: 3rem;
}

#sleep-section .section-header h2,
#meneki-section .section-header h2,
#stress-section .section-header h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--text-color);
	margin-bottom: 1rem;
}

#sleep-section .section-header p,
#meneki-section .section-header p,
#stress-section .section-header p {
	font-size: 1.1rem;
	color: var(--text-light);
}

#sleep-section .sleep-content,
#meneki-section .sleep-content,
#stress-section .sleep-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}

@media (max-width: 768px) {

	#sleep-section .sleep-content,
	#meneki-section .sleep-content,
	#stress-section .sleep-content {
		grid-template-columns: 1fr
	}
}

#sleep-section .sleep-content .left-column,
#meneki-section .sleep-content .left-column,
#stress-section .sleep-content .left-column {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#sleep-section .sleep-content .left-column .sleep-image,
#meneki-section .sleep-content .left-column .sleep-image,
#stress-section .sleep-content .left-column .sleep-image {
	width: 100%;
	height: 300px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#sleep-section .sleep-content .left-column .sleep-image img,
#meneki-section .sleep-content .left-column .sleep-image img,
#stress-section .sleep-content .left-column .sleep-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

#sleep-section .sleep-content .left-column .sleep-chart,
#meneki-section .sleep-content .left-column .sleep-chart,
#stress-section .sleep-content .left-column .sleep-chart {
	background-color: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#sleep-section .sleep-content .left-column .sleep-chart h4,
#meneki-section .sleep-content .left-column .sleep-chart h4,
#stress-section .sleep-content .left-column .sleep-chart h4 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color);
	margin-bottom: 1rem;
}

#sleep-section .sleep-content .left-column .sleep-chart .chart-placeholder,
#meneki-section .sleep-content .left-column .sleep-chart .chart-placeholder,
#stress-section .sleep-content .left-column .sleep-chart .chart-placeholder {
	width: 100%;
	height: 200px;
	background: linear-gradient(135deg, #f0f4f8 0%, #e8eef8 100%);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-light);
	font-size: 0.9rem;
}

#sleep-section .sleep-content .right-column h3,
#meneki-section .sleep-content .right-column h3,
#stress-section .sleep-content .right-column h3 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-color);
	margin-bottom: 1.5rem;
	line-height: 1.3;
}

#sleep-section .sleep-content .right-column .highlight-box,
#meneki-section .sleep-content .right-column .highlight-box,
#stress-section .sleep-content .right-column .highlight-box {
	background-color: #EDEEF7;
	border-left: 4px solid var(--background-sub);
	padding: 1.5rem;
	margin: 1.5rem 0;
	border-radius: 4px;
}

#sleep-section .sleep-content .right-column .highlight-box .highlight-label,
#meneki-section .sleep-content .right-column .highlight-box .highlight-label,
#stress-section .sleep-content .right-column .highlight-box .highlight-label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--secondary-color);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

#sleep-section .sleep-content .right-column .highlight-box .highlight-value,
#meneki-section .sleep-content .right-column .highlight-box .highlight-value,
#stress-section .sleep-content .right-column .highlight-box .highlight-value {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--background-sub);
	margin-bottom: 0.5rem;
}

#sleep-section .sleep-content .right-column .highlight-box p,
#meneki-section .sleep-content .right-column .highlight-box p,
#stress-section .sleep-content .right-column .highlight-box p {
	font-size: 1rem;
	color: var(--text-color);
	margin: 0;
}

#sleep-section .sleep-content .right-column p,
#meneki-section .sleep-content .right-column p,
#stress-section .sleep-content .right-column p {
	font-size: 1rem;
	color: var(--text-light);
	line-height: 1.8;
	margin-bottom: 1rem;
}

#sleep-section .sleep-content .right-column p:last-child,
#meneki-section .sleep-content .right-column p:last-child,
#stress-section .sleep-content .right-column p:last-child {
	margin-bottom: 0;
}

/* ./parts/story-hero.html */

#story-hero {
	position: relative;
	height: 80vh;
	/* ビューポートの80% */
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #fff;
}

#story-hero .hero-bg-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120%;
	/* パララックス効果のために高さを確保 */
	z-index: 0;
	/* Rellax適用時にtop位置がずれるのを考慮して配置 */
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

#story-hero img.hero-img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}

#story-hero .hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom,
			rgba(0, 0, 0, 0.3),
			rgba(44, 44, 44, 0.6));
	z-index: 1;
}

#story-hero .hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 1.5rem;
	max-width: 1000px;
}

#story-hero h1 {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 1.5rem;
	text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#story-hero p.hero-subtitle {
	font-family: var(--font-heading);
	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	display: inline-block;
	padding: 1rem 2rem;
	background-color: rgba(0, 0, 0, 0.2);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

#story-hero .hero-desc {
	font-family: var(--font-body);
	font-size: 1.125rem;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.8;
	opacity: 0.9;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* スクロールダウンインジケーター */
#story-hero .scroll-down {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	opacity: 0.8;
	animation: bounce 2s infinite;
}

#story-hero .scroll-down span {
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateX(-50%) translateY(0);
	}

	40% {
		transform: translateX(-50%) translateY(-10px);
	}

	60% {
		transform: translateX(-50%) translateY(-5px);
	}
}

/* ./parts/products-comparison.html */

section#products-comparison {
	background-color: #fff;
}

section#products-comparison .section-headline {
	margin-bottom: 4rem;
}

section#products-comparison .comparison-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 900px) {

	section#products-comparison .comparison-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 4rem
	}
}

section#products-comparison .product-card {
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	background-color: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}

section#products-comparison .product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

section#products-comparison .product-card.featured {
	box-shadow: 0 10px 30px rgba(111, 160, 70, 0.1);
}

section#products-comparison .product-card.featured .card-header {
	background-color: var(--primary-color);
	color: #fff;

}

section#products-comparison .product-card .card-header {
	padding: 2rem;
	background-color: var(--primary-color);
	text-align: center;
	transition: background-color 0.3s ease;
}

section#products-comparison .product-card .card-header h3 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #ffffff;
	font-family: var(--font-heading);
}

section#products-comparison .product-card .card-header .badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background-color: #E5E7EB;
	color: var(--primary-color);
}

section#products-comparison .product-card .card-image {
	width: 100%;
	height: 240px;
	-o-object-fit: cover;
	object-fit: cover;
	background-color: #f3f4f6;
}

section#products-comparison .product-card .card-body {
	padding: 2rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

section#products-comparison .product-card .paramylon-highlight {
	text-align: center;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px dashed #E5E7EB;
}

section#products-comparison .product-card .paramylon-highlight .label {
	font-size: 0.875rem;
	color: #6B7280;
	margin-bottom: 0.5rem;
	display: block;
}

section#products-comparison .product-card .paramylon-highlight .value {
	font-size: 3rem;
	font-weight: 700;
	font-family: var(--font-heading);
	color: var(--primary-color);
	line-height: 1;
}

section#products-comparison .product-card .paramylon-highlight .value small {
	font-size: 1.25rem;
	color: #6B7280;
	font-weight: 500;
}

section#products-comparison .product-card .paramylon-highlight .bar-fill {
	height: 100%;
	background-color: var(--secondary-color);
	border-radius: 4px;
}

section#products-comparison .product-card .specs-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
}

section#products-comparison .product-card .specs-list li {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-bottom: 1px solid #F3F4F6;
	font-size: 0.95rem;
}

section#products-comparison .product-card .specs-list li:last-child {
	border-bottom: none;
}

section#products-comparison .product-card .specs-list li span:first-child {
	color: #6B7280;
}

section#products-comparison .product-card .specs-list li span:last-child {
	font-weight: 600;
	color: var(--primary-color);
}

section#products-comparison .product-card .features-desc {
	margin-bottom: 2rem;
	color: #4B5563;
	font-size: 0.95rem;
	line-height: 1.6;
	text-align: center;
}

section#products-comparison .product-card .card-footer {
	margin-top: auto;
	text-align: center;
}

/* ./parts/applications-gallery.html */

.app-gallery-section {
	background-color: #fff;
}

.app-gallery-section .gallery-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.app-gallery-section .testimonial-block {
	background-color: var(--background-sub);
	border-left: 4px solid var(--secondary-color);
	padding: 2rem;
	margin-bottom: 3rem;
	border-radius: 4px;
}

@media (min-width: 768px) {

	.app-gallery-section .testimonial-block {
		padding: 2.5rem 3rem
	}
}

.app-gallery-section .testimonial-block .testimonial-text {
	font-size: 1.1rem;
	font-style: italic;
	color: var(--primary-color);
	margin-bottom: 1.25rem;
	line-height: 1.7;
}

.app-gallery-section .testimonial-block .testimonial-text::before {
	content: '"';
	font-size: 2.5rem;
	opacity: 0.3;
}

.app-gallery-section .testimonial-block .testimonial-text::after {
	content: '"';
	font-size: 2.5rem;
	opacity: 0.3;
}

.app-gallery-section .testimonial-block .testimonial-author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.app-gallery-section .testimonial-block .testimonial-author .author-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--secondary-color);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
}

.app-gallery-section .testimonial-block .testimonial-author .author-info h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 0.25rem;
}

.app-gallery-section .testimonial-block .testimonial-author .author-info p {
	font-size: 0.85rem;
	color: #666;
}

.app-gallery-section .gallery-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {

	.app-gallery-section .gallery-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (min-width: 1024px) {

	.app-gallery-section .gallery-grid {
		grid-template-columns: repeat(3, 1fr)
	}
}

.app-gallery-section .gallery-card {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background-color: #f9f9f9;
	text-decoration: none;
	color: var(--primary-color);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
}

.app-gallery-section .gallery-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.app-gallery-section .gallery-card:hover .card-image img {
	transform: scale(1.05);
}

.app-gallery-section .gallery-card:hover .zoom-icon {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.app-gallery-section .card-image {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
}

.app-gallery-section .card-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.app-gallery-section .card-image .zoom-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	width: 48px;
	height: 48px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease;
}

.app-gallery-section .card-image .zoom-icon span {
	color: var(--primary-color);
	font-size: 24px;
}

.app-gallery-section .card-content {
	padding: 1.5rem;
}

.app-gallery-section .card-content h3 {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--primary-color);
}

.app-gallery-section .card-content p {
	font-size: 0.9rem;
	color: #666;
	line-height: 1.5;
}

.app-gallery-section .card-content .tags {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.app-gallery-section .card-content .tags span {
	font-size: 0.75rem;
	background-color: var(--background-sub);
	padding: 0.25rem 0.75rem;
	border-radius: 100px;
	color: #555;
	font-weight: 500;
}

.app-gallery-section .app-gallery-section {
	background-color: #fff;
	padding: 4rem 0;
}

.app-gallery-section .gallery-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.app-gallery-section .section-headline {
	text-align: center;
	margin-bottom: 3rem;
}

.app-gallery-section .section-headline .subtitle {
	color: var(--secondary-color);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.5rem;
}

.app-gallery-section .section-headline h2 {
	font-size: 2rem;
	color: var(--primary-color);
}

.app-gallery-section .testimonial-grid {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	margin-bottom: 6rem;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.app-gallery-section .testimonial-card {
	background: #fff;
	border: 1px solid var(--primary-color);
	border-radius: 12px;
	padding: 2.5rem;
	position: relative;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
	display: flex;
	flex-direction: column;
	gap: 4rem;
	transition: transform 0.3s ease, border-color 0.3s ease;


}

@media (min-width: 768px) {

	.app-gallery-section .testimonial-card {
		flex-direction: row-reverse;
		align-items: flex-start
	}
}

.app-gallery-section .testimonial-content {
	flex: 1;
}

.app-gallery-section .testimonial-content .testimonial-point {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px dashed #e5e7eb;
}

@media (max-width: 640px) {

	.app-gallery-section .testimonial-content .testimonial-point {
		grid-template-columns: 1fr;
		gap: 1.25rem
	}
}

.app-gallery-section .testimonial-content .testimonial-point .point-card {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.app-gallery-section .testimonial-content .testimonial-point .point-card .point-number {
	width: 32px;
	height: 32px;
	background-color: var(--background-sub);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	font-weight: 800;
	font-family: var(--font-heading);
	box-shadow: 0 4px 10px rgba(111, 160, 70, 0.2);
}

.app-gallery-section .testimonial-content .testimonial-point .point-card .point-text {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--background-sub);
	line-height: 1.4;
	word-break: break-all;
}

.app-gallery-section .testimonial-content .company-tag {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--secondary-color);
	background: rgba(230, 240, 240);
	padding: 0.2rem 0.8rem;
	border-radius: 4px;
	display: inline-block;
	margin-bottom: 1rem;
}

.app-gallery-section .testimonial-content h3 {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.app-gallery-section .testimonial-content .testimonial-body {
	font-size: 1rem;
	line-height: 1.8;
	color: #4b5563;
	margin-bottom: 1.5rem;
}

.app-gallery-section .testimonial-content .testimonial-body strong {
	color: var(--primary-color);
}

/* 追加：3つのポイント並び */

.app-gallery-section .testimonial-content .point-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-top: 1.5rem;
	border-top: 1px dashed #e5e7eb;
}

.app-gallery-section .testimonial-content .point-highlights .point-item {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--primary-color);
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.app-gallery-section .testimonial-content .point-highlights .point-item::before {
	content: 'check_circle';
	font-family: 'Material Symbols Outlined';
	font-size: 1.1rem;
	color: var(--secondary-color);
}

/* 左側（元右側）：プロフィールエリア */

.app-gallery-section .testimonial-footer {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 1rem;
}

@media (min-width: 768px) {

	.app-gallery-section .testimonial-footer {
		flex-direction: column;
		border-top: none;
		border-right: 1px solid #f3f4f6;
		/* 左右逆転に合わせて線を右側に */
		padding-right: 2rem;
		width: 200px;
		text-align: center
	}
}

.app-gallery-section .testimonial-footer .author-thumb {
	width: 64px;
	height: 64px;
	background: #e5e7eb;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: #fff;
	font-size: 1.4rem;
}

.app-gallery-section .testimonial-footer .author-meta h4 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.2rem;
}

.app-gallery-section .testimonial-footer .author-meta p {
	font-size: 0.8rem;
	color: #6b7280;
	margin: 0;
}

.app-gallery-section .author-thumb {
	width: 64px;
	height: 64px;
	background: #e5e7eb;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: #fff;
	font-size: 1.4rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.app-gallery-section .author-meta h4 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.2rem;
	color: var(--primary-color);
}

.app-gallery-section .author-meta p {
	font-size: 0.8rem;
	color: #6b7280;
	margin: 0;
	line-height: 1.4;
}

.testimonial-footer {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid #f3f4f6;
}

.testimonial-footer .author-thumb {
	width: 56px;
	height: 56px;
	background: #e5e7eb;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	color: #fff;
	font-size: 1.2rem;
}

.testimonial-footer .author-meta h4 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.2rem;
}

.testimonial-footer .author-meta p {
	font-size: 0.8rem;
	color: #6b7280;
	margin: 0;
}

.author-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--secondary-color);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
}

.author-info h4 {
	font-weight: 600;
	margin-bottom: 0.25rem;
	color: var(--primary-color);
}

.author-info p {
	font-size: 0.8rem;
	color: #666;
}

/* ギャラリー：グリッドレイアウト */
.gallery-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.gallery-card {
	display: block;
	background-color: #f9f9f9;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.3s ease;
}

.gallery-card:hover {
	transform: translateY(-5px);
}

.card-image img {
	width: 100%;
	aspect-ratio: 4/3;
	-o-object-fit: cover;
	object-fit: cover;
}

.card-content {
	padding: 1.5rem;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.tags span {
	font-size: 0.7rem;
	background: #eee;
	padding: 0.2rem 0.6rem;
	border-radius: 100px;
}

/* ./parts/story-sustainability.html */

section.story-sustainability {
	background-color: var(--white);
	position: relative;
	overflow: hidden;
}

/* 背景に薄い葉のシルエットなどをあしらう装飾（CSSグラデーションで表現） */

section.story-sustainability::before {
	content: '';
	position: absolute;
	top: -10%;
	right: -5%;
	width: 40vw;
	height: 40vw;
	background: radial-gradient(circle, rgba(111, 160, 70, 0.05) 0%, transparent 70%);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

section.story-sustainability .container-custom {
	position: relative;
	z-index: 1;
}

section.story-sustainability .sustain-grid {
	display: grid;
	gap: 4rem;
}

@media(min-width: 1024px) {

	section.story-sustainability .sustain-grid {
		grid-template-columns: 1fr 1fr;
		align-items: center
	}
}

section.story-sustainability .sustain-grid .purpose {
	background-color: #F5F6FA;
	margin-top: 2rem;
	padding: 1.5rem;
	border-radius: 10px;
	border-left: solid 5px var(--primary-color);
}

section.story-sustainability .sustain-grid .purpose h3 {
	font-size: 1.5rem;
}

section.story-sustainability .sustain-image {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

section.story-sustainability .sustain-image img {
	width: 100%;
	height: 400px;
	display: block;
	transition: transform 0.7s ease;
	-o-object-fit: cover;
	object-fit: cover;
	object-offset: center;
}

section.story-sustainability .sustain-image:hover img {
	transform: scale(1.03);
}

/* CO2吸収をイメージしたバッジ */

section.story-sustainability .sustain-image .badge {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	background: rgba(255, 255, 255, 0.95);
	padding: 1rem 1.5rem;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

section.story-sustainability .sustain-image .badge .label {
	font-size: 0.75rem;
	color: var(--text-light);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

section.story-sustainability .sustain-image .badge .value {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--secondary-color);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

section.story-sustainability .content-block h3 {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	line-height: 1.2;
}

section.story-sustainability .content-block p {
	color: #4B5563;
	margin-bottom: 1.5rem;
	font-size: 1.05rem;
}

section.story-sustainability .eco-points {
	display: grid;
	gap: 1.5rem;
	margin-top: 2rem;
}

section.story-sustainability .eco-points .point {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

section.story-sustainability .eco-points .point .icon-box {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	background-color: rgba(111, 160, 70, 0.1);
	color: var(--secondary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

section.story-sustainability .eco-points .point .icon-box span {
	font-size: 24px;
}

section.story-sustainability .eco-points .point h4 {
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 0.25rem;
}

section.story-sustainability .eco-points .point p {
	font-size: 0.9rem;
	color: #6B7280;
	margin-bottom: 0;
}

section.story-sustainability .quote-box {
	margin-top: 4rem;
	padding: 2rem;
	background-color: #F9FAFB;
	border-left: 4px solid var(--secondary-color);
	position: relative;
}

section.story-sustainability .quote-box p {
	font-style: italic;
	font-size: 1.1rem;
	color: #374151;
	margin-bottom: 1rem;
}

section.story-sustainability .quote-box cite {
	font-weight: 600;
	font-style: normal;
	display: block;
	color: var(--primary-color);
}

/* ./parts/story-origin.html */

#story-origin {
	background-color: #fff;
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: clamp(4rem, 8vw, 8rem);
	overflow: hidden;

}

/* セクションヘッダー */

#story-origin .origin-header {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 5rem;
}

#story-origin .origin-header .label {
	display: inline-block;
	color: var(--secondary-color);
	font-family: var(--font-heading);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

#story-origin .origin-header h2 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 2rem;
	line-height: 1.2;
}

#story-origin .origin-header h2 span {
	display: box;
	font-weight: 300;
	color: var(--primary-color);
	opacity: 0.8;
}

#story-origin .origin-header p {
	font-size: 1.125rem;
	color: #4b5563;
	line-height: 1.8;
}

/* 3つの必須条件セクション */

#story-origin .conditions-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 1280px;
	margin: 0 auto 6rem;
}

@media (min-width: 768px) {

	#story-origin .conditions-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 3rem
	}
}

#story-origin .conditions-title {
	text-align: center;
	margin-bottom: 4rem;

}

#story-origin .conditions-title h3 {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--primary-color);
	text-align: center;
}

#story-origin .condition-card {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

#story-origin .condition-card .image-wrapper {
	width: 100%;
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 4px;
	position: relative;
	background-color: #f3f4f6;
}

#story-origin .condition-card .image-wrapper img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	transition: transform 0.7s ease;
}

#story-origin .condition-card .image-wrapper:hover img {
	transform: scale(1.05);
}

#story-origin .condition-card .content h3 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--primary-color);
}

#story-origin .condition-card .content p {
	font-size: 0.95rem;
	color: #6b7280;
	line-height: 1.7;
}

/* 利点セクション */

#story-origin .advantages-section {
	margin: 0 auto 6rem;
	border-radius: 8px;
	padding: 3rem 2rem;
}

#story-origin .advantages-section .advantages-title {
	text-align: center;
	margin-bottom: 4rem;
}

#story-origin .advantages-section .advantages-title h3 {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--primary-color);
	text-align: center;
}

#story-origin .advantages-section .advantages-list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#story-origin .advantages-section .advantage-item .item-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#story-origin .advantages-section .advantage-item .item-title::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: var(--secondary-color);
	border-radius: 50%;
}

#story-origin .advantages-section .advantage-item .item-description {
	color: #4b5563;
	line-height: 1.7;
	margin-left: 1.5rem;
}

/* ブルーゾーンの強調エリア */

#story-origin .blue-zone-info {
	margin: 0 auto 6rem;
	border-radius: 8px;
}

#story-origin .blue-zone-info .text-area {
	flex: 1;
}

#story-origin .blue-zone-info h3 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: #1e3a8a;
}

#story-origin .blue-zone-info p {
	color: #4b5563;
	margin-bottom: 0;
	line-height: 1.7;
}

#story-origin .blue-zone-info .badge {
	flex-shrink: 0;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background-color: #1e3a8a;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-family: var(--font-heading);
	font-size: 1rem;
	text-align: center;
	line-height: 1.3;
	box-shadow: 0 10px 25px rgba(30, 58, 138, 0.2);
}

/* ブルーゾーン・ヒーローエリア */

#story-origin .blue-zone-hero {
	position: relative;
	width: 100%;
	height: 400px;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-align: center;

}

#story-origin .blue-zone-hero .hero-text {
	position: relative;
	z-index: 2;
	padding: 0 1.5rem;
}

#story-origin .blue-zone-hero .hero-text h3 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	margin-bottom: 1rem;
	color: white;
	/* 既存の primary-color を上書き */
}

#story-origin .blue-zone-hero .hero-text p {
	font-size: 1.125rem;
	max-width: 700px;
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.9);
}

#story-origin .blue-zone-hero img {
	position: absolute;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	z-index: 0;
}

/* 3つの項目リスト（ブルーゾーン詳細） */

#story-origin .blue-zone-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 6rem;
}

@media (min-width: 768px) {

	#story-origin .blue-zone-features {
		grid-template-columns: repeat(3, 1fr)
	}
}

#story-origin .blue-zone-features .feature-item {
	background: #fff;
	padding: 2rem;
	border-radius: 8px;
	border-top: 4px solid var(--background-sub);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#story-origin .blue-zone-features .feature-item .icon-sm {
	color: var(--background-sub);
	margin-bottom: 1rem;
	font-size: 2rem;
}

#story-origin .blue-zone-features .feature-item p {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #4b5563;
	margin: 0;
}

/* 地理セクションのカスタマイズ */

#story-origin .geo-location-box {
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

@media (min-width: 992px) {

	#story-origin .geo-location-box {
		flex-direction: row;
		align-items: center
	}
}

#story-origin .geo-location-box .geo-text {
	flex: 1;
}

#story-origin .geo-location-box .geo-visual {
	flex: 1;
	text-align: center;

}

#story-origin .geo-location-box .geo-visual img {
	border-radius: 8px;
}

#story-origin .image-side img {
	width: 100%;
	height: 400px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

#story-origin .cert-card {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 2rem;
	max-width: 1280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	height: 280px;
}

#story-origin .cert-card:hover {
	border-color: var(--secondary-color);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transform: translateY(-5px);
}

#story-origin .cert-card:hover .logo-container {
	opacity: 0;
	transform: scale(0.9);
}

#story-origin .cert-card:hover .info-overlay {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

#story-origin .cert-card .logo-container {
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

#story-origin .cert-card .logo-container img {
	max-width: 120px;
	max-height: 80px;
	-o-object-fit: contain;
	object-fit: contain;
	opacity: 0.8;
}

#story-origin .cert-card .logo-container h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0;
}

#story-origin .cert-card .info-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.98);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

#story-origin .cert-card .info-overlay h3 {
	color: var(--secondary-color);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

#story-origin .cert-card .info-overlay p {
	font-size: 0.9rem;
	color: var(--primary-color);
	line-height: 1.6;
	margin-bottom: 1rem;
}

#story-origin .cert-card .info-overlay .meta {
	font-size: 0.8rem;
	color: #6b7280;
	font-weight: 600;
	border-top: 1px solid #e5e7eb;
	padding-top: 0.5rem;
	width: 100%;
}

/* ./parts/applications-categories.html */

#app-categories {
	background-color: #F8F9FA;
}

#app-categories .categories-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 4rem;
}

@media (min-width: 768px) {

	#app-categories .categories-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (min-width: 1024px) {

	#app-categories .categories-grid {
		grid-template-columns: repeat(3, 1fr)
	}
}

#app-categories .category-card {
	background: #fff;
	padding: 2.5rem 2rem;
	border-radius: 8px;
	border: 1px solid #E5E7EB;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

#app-categories .category-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	border-color: var(--secondary-color);
}

#app-categories .category-card .icon-wrapper {
	width: 64px;
	height: 64px;
	background-color: rgba(230, 240, 240);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
	color: var(--secondary-color);
}

#app-categories .category-card .icon-wrapper .material-symbols-outlined {
	font-size: 32px;
}

#app-categories .category-card h3 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1rem;
	font-family: var(--font-heading);
	color: var(--primary-color);
}

#app-categories .category-card p {
	font-size: 0.95rem;
	color: #4B5563;
	line-height: 1.6;
	margin-bottom: 2rem;
	flex-grow: 1;
}

#app-categories .category-card .recommendation {
	margin-top: auto;
	padding-top: 1.5rem;
	border-top: 1px solid #F3F4F6;
}

#app-categories .category-card .recommendation .label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #9CA3AF;
	margin-bottom: 0.5rem;
	display: block;
}

#app-categories .category-card .recommendation .product-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.9rem;
}

#app-categories .category-card .recommendation .product-tag.type-ex50 {
	color: #1F2937;
}

#app-categories .category-card .recommendation .product-tag.type-ex50::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	background-color: #1F2937;
	border-radius: 50%;
}

#app-categories .category-card .recommendation .product-tag.type-std {
	color: var(--secondary-color);
}

#app-categories .category-card .recommendation .product-tag.type-std::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	background-color: var(--secondary-color);
	border-radius: 50%;
}

#app-categories .euglena-btn a {
	background-color: #ffffff;
	border: solid 1px var(--primary-color);
	color: var(--primary-color);
	margin-right: 1rem;
}

#app-categories .euglena-btn a:hover {
	background-color: var(--primary-color);
	color: #ffffff;
}

/* ./parts/quality-hero.html */

#quality-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	overflow: hidden;
	padding-top: 80px;
}

/* Background Image with Parallax */

#quality-hero .hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#quality-hero .hero-bg::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(44, 44, 44, 0.4), rgba(44, 44, 44, 0.7));
}

#quality-hero .hero-bg img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}

/* Header height offset */

#quality-hero .hero-content {
	max-width: 800px;
	padding: 0 1.5rem;
	z-index: 1;
}

#quality-hero .hero-content .eyebrow {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.9);
}

#quality-hero .hero-content h1 {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 700;
	margin-bottom: 1.5rem;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

#quality-hero .hero-content p {
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	max-width: 600px;
	margin: 0 auto;
}

/* Decorative Line */

#quality-hero .decoration {
	width: 80px;
	height: 3px;
	background-color: var(--secondary-color);
	margin: 2rem auto 0;
}

/* ./parts/applications-hero.html */

#applications-hero {
	position: relative;
	/* ヘッダーの高さ分を確保しつつ、FVとしての高さを確保 */
	min-height: 60vh;
	display: flex;
	align-items: center;
	background-color: var(--primary-color);
	/* ダークな背景で引き締める */
	color: white;
	overflow: hidden;
	padding-top: 80px;
	/* Header height offset */
}

/* 背景画像設定 */

#applications-hero .hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#applications-hero .hero-bg::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(44, 44, 44, 0.95) 0%, rgba(44, 44, 44, 0.8) 50%, rgba(44, 44, 44, 0.4) 100%);
	opacity: 0.6;
}

#applications-hero .hero-bg img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}

#applications-hero .container-custom {
	position: relative;
	z-index: 2;
	width: 100%;
}

#applications-hero .container-custom .hero-content {
	max-width: 700px;
}

#applications-hero .container-custom .hero-content h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

#applications-hero .container-custom .hero-content h1 span {
	color: var(--secondary-color);
	display: block;
	font-size: clamp(1rem, 2vw, 1.25rem);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	font-family: var(--font-body);
}

#applications-hero .container-custom .hero-content p {
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 2.5rem;
	line-height: 1.6;
	max-width: 600px;
}

/* ./parts/contact-hero.html */

#contact-hero {
	position: relative;
	height: 50vh;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: white;
	background-color: #2C2C2C;
}

#contact-hero .hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#contact-hero .hero-bg img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	opacity: 0.4;
}

#contact-hero .hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 0 1.5rem;
	max-width: 800px;
}

#contact-hero h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	margin-bottom: 1.5rem;
	letter-spacing: 0.05em;
}

#contact-hero p {
	font-size: clamp(1rem, 2vw, 1.25rem);
	line-height: 1.6;
	opacity: 0.9;
}

/* ./parts/contact-form.html */

section#contact-form {
	background-color: var(--white);
}

section#contact-form .form-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

section#contact-form .form-group {
	margin-bottom: 2rem;
}

section#contact-form .form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: var(--primary-color);
	font-family: var(--font-heading);
	font-size: 0.95rem;
}

section#contact-form .form-group label span.required {
	color: #ef4444;
	margin-left: 4px;
	font-size: 0.8em;
}

section#contact-form .form-group input,
section#contact-form .form-group select,
section#contact-form .form-group textarea {
	width: 100%;
	padding: 1rem;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 1rem;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	background-color: #f9fafb;
}

section#contact-form .form-group input:focus,
section#contact-form .form-group select:focus,
section#contact-form .form-group textarea:focus {
	outline: none;
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 3px rgba(111, 160, 70, 0.1);
	background-color: var(--white);
}

section#contact-form .form-group textarea {
	min-height: 150px;
	resize: vertical;
}

section#contact-form .form-group .helper-text {
	font-size: 0.85rem;
	color: #6b7280;
	margin-top: 0.5rem;
}

section#contact-form .submit-area {
	text-align: center;
	margin-top: 3rem;
}

section#contact-form .submit-area button {
	width: 100%;
	font-size: 1.1rem;
	padding: 1rem 2rem;
}

@media (min-width: 640px) {

	section#contact-form .submit-area button {
		width: auto;
		min-width: 300px
	}
}

section#contact-form .success-message {
	background-color: #ecfdf5;
	border: 1px solid #10b981;
	color: #064e3b;
	padding: 2rem;
	border-radius: 8px;
	text-align: center;
	animation: fadeIn 0.5s ease-out;
}

section#contact-form .success-message h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: #059669;
}

section#contact-form .faq-section {
	margin-top: 5rem;
	padding-top: 3rem;
	border-top: 1px solid #e5e7eb;
}

section#contact-form .faq-list {
	max-width: 700px;
	margin: 0 auto;
}

section#contact-form .faq-list details {
	margin-bottom: 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
	transition: all 0.3s ease;
}

section#contact-form .faq-list details[open] {
	border-color: var(--secondary-color);
	background-color: #f9fafb;
	box-shadow: 0 2px 8px rgba(111, 160, 70, 0.1);
}

section#contact-form .faq-list summary {
	padding: 1.25rem;
	cursor: pointer;
	font-weight: 600;
	color: var(--primary-color);
	font-family: var(--font-heading);
	display: flex;
	align-items: center;
	justify-content: space-between;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

section#contact-form .faq-list summary:hover {
	background-color: #f3f4f6;
}

section#contact-form .faq-list summary::marker {
	content: '';
}

section#contact-form .faq-list summary::after {
	content: '';
	width: 20px;
	height: 20px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat center;
	background-size: contain;
	transition: transform 0.3s ease;
	flex-shrink: 0;
	margin-left: 1rem;
}

section#contact-form .faq-list details[open] summary::after {
	transform: rotate(180deg);
}

section#contact-form .faq-list p {
	padding: 0 1.25rem 1.25rem;
	color: #4b5563;
	line-height: 1.8;
}

section#contact-form .faq-list p a {
	color: var(--secondary-color);
	text-decoration: none;
	font-weight: 500;
}

section#contact-form .faq-list p a:hover {
	text-decoration: underline;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.container-custom {
	margin-top: 4rem;
}

/* ./parts/quality-company.html */

section#quality-company {
	background-color: #fff;
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: clamp(4rem, 8vw, 8rem);
	overflow: hidden;
}

/* レイアウト */

section#quality-company .company-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

@media (min-width: 1024px) {

	section#quality-company .company-layout {
		grid-template-columns: 1fr 1fr
	}
}

/* 左側：テキスト情報 */

section#quality-company .info-col .subtitle {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
	display: block;
}

section#quality-company .info-col h2 {
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	line-height: 1.2;
}

@media (min-width: 768px) {

	section#quality-company .info-col h2 {
		font-size: 2.75rem
	}
}

section#quality-company .info-col .description {
	color: var(--primary-color);
	margin-bottom: 2.5rem;
	font-size: 1.05rem;
	line-height: 1.8;
	opacity: 0.9;
}

section#quality-company .info-col .achievement-box {
	background-color: #F5F6FA;
	padding: 1.5rem;
	border-left: 4px solid var(--background-sub);
	margin-bottom: 2.5rem;
}

section#quality-company .info-col .achievement-box h3 {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--secondary-color);
}

section#quality-company .info-col .achievement-box p {
	font-size: 0.95rem;
	margin: 0;
}

/* 会社概要テーブル */

section#quality-company .profile-table {
	width: 100%;
	border-top: 1px solid var(--border-color, #e5e7eb);
}

section#quality-company .profile-table .row {
	display: flex;
	flex-direction: column;
	padding: 1rem 0;
	border-bottom: 1px solid var(--border-color, #e5e7eb);
}

@media (min-width: 640px) {

	section#quality-company .profile-table .row {
		flex-direction: row
	}
}

section#quality-company .profile-table .row dt {
	font-weight: 600;
	width: 160px;
	flex-shrink: 0;
	color: #4b5563;
	margin-bottom: 0.25rem;
}

section#quality-company .profile-table .row dd {
	font-weight: 400;
	color: var(--primary-color);
}

/* 右側：画像 */

section#quality-company .image-col {
	position: relative;
}

section#quality-company .image-col .main-img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
	display: block;
}

/* 装飾的な背景要素 */

section#quality-company .image-col::before {
	content: '';
	position: absolute;
	top: -20px;
	right: -20px;
	width: 50%;
	height: 50%;
	background-color: var(--background-sub);
	z-index: -1;
	border-radius: 4px;
}

/* History Section Styles */
#history {
	background-color: var(--bg-light);
	position: relative;
}

.history-container {
	max-width: 1000px;
	margin: 4rem auto;
	padding: 0 1.5rem;
	position: relative;
}

.section-title {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 4rem;
	color: var(--text-color);
	position: relative;
	display: inline-block;
	width: 100%;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.section-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	background-color: var(--primary-color);
	margin: 15px auto 0;
}

/* Timeline Structure */
.timeline {
	position: relative;
	padding: 2rem 0;
}

/* Vertical Line */
.timeline::before {
	content: '';
	position: absolute;
	top: 0;
	left: 20px;
	/* Mobile position */
	height: 100%;
	width: 2px;
	background: #e5e7eb;
}

@media (min-width: 768px) {
	.timeline::before {
		left: 50%;
		transform: translateX(-50%)
	}
}

.timeline-item {
	position: relative;
	margin-bottom: 4rem;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	/* Align right by default for mobile logic simplification */
	padding-left: 50px;
	/* Space for line on mobile */
}

@media (min-width: 768px) {

	.timeline-item {
		padding-left: 0;
		justify-content: center
			/* Center to use width 50% logic */

			/* Left Side Item */

			/* Right Side Item */
	}

	.timeline-item:nth-child(odd) {
		justify-content: flex-start;
		padding-right: 50px;
		/* Space from center */
	}

	.timeline-item:nth-child(odd) .timeline-content {
		text-align: right;
		align-items: flex-end;
	}

	.timeline-item:nth-child(odd) .timeline-dot {
		right: -58px;
		/* Adjust based on padding and dot size */
		left: auto;
	}

	.timeline-item:nth-child(even) {
		justify-content: flex-end;
		padding-left: 50px;
		/* Space from center */
	}

	.timeline-item:nth-child(even) .timeline-content {
		text-align: left;
		align-items: flex-start;
	}

	.timeline-item:nth-child(even) .timeline-dot {
		left: -58px;
	}
}

.timeline-content {
	background: white;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {

	.timeline-content {
		width: 45%
			/* Less than 50% to fit */
	}
}

.timeline-dot {
	position: absolute;
	width: 16px;
	height: 16px;
	background-color: var(--secondary-color);
	border-radius: 50%;
	top: 2rem;
	left: -38px;
	/* Mobile position relative to content padding */
	border: 4px solid #fff;
	box-shadow: 0 0 0 2px var(--secondary-color);
	z-index: 2;
}

.year {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
	display: block;
	font-family: var(--font-en);
}

.event-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	color: var(--text-color);
}

.event-desc {
	color: var(--text-light);
	font-size: 0.95rem;
	line-height: 1.6;
}

.award {
	padding: 4rem 1.5rem;
	background-color: #f9fafb;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
}

.award-title {
	text-align: center;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.award-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 1100px;
	width: 100%;
}

@media (min-width: 768px) {

	.award-grid {
		grid-template-columns: 1fr 1fr
	}
}

.award-card {
	background: white;
	padding: 2rem 1.5rem;
	border-radius: 12px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	border: 1px solid #e5e7eb;
	position: relative;
	transition: transform 0.3s ease;
}

.award-card .award-icon {
	font-size: 3rem;
	color: rgb(202, 165, 65);
	/* ゴールド */
	margin-bottom: 1rem;
	display: block;
}

.award-card .award-year {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--secondary-color);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	display: block;
}

.award-card h3 {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.4;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.award-card p {
	font-size: 0.9rem;
	color: var(--text-light);
	line-height: 1.6;
}

/* ./parts/index-certifications.html */

#certifications-section {
	background-color: #ffffff;
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}

.certifications-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.certifications-header {
	text-align: center;
	margin-bottom: 4rem;
}

.certifications-header h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--primary-color);
}

.certifications-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}

.cert-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(280px, 45%, 350px);
	position: relative;
	padding: 2.5rem 2rem;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.cert-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.cert-item img {
	width: auto;
	height: 80px;
	-o-object-fit: contain;
	object-fit: contain;
	margin-bottom: 1.5rem;
	transition: transform 0.3s ease;
}

.cert-item p {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
	text-align: center;
	line-height: 1.4;
}

.cert-btn {
	text-align: center;
	margin-top: 4rem;
	transition: 0.3s;
}

.cert-btn .btn-outline {
	background-color: var(--background-sub);
	color: #ffffff;
	border: 2px solid var(--background-sub);
}

.cert-btn .btn-outline:hover {
	background-color: #ffffff;
	color: var(--background-sub);
	border: 2px solid var(--background-sub);
}

/* ./parts/quality-certifications.html */

#quality-certifications {
	background-color: var(--white);
}

/* セクション共通のスタイル */

#quality-certifications .content-block {
	max-width: 1000px;
	margin: 0 auto 6rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

@media(min-width: 768px) {

	#quality-certifications .content-block {
		grid-template-columns: 1fr 1.2fr
	}

	#quality-certifications .content-block:nth-of-type(even) {
		direction: rtl;
	}

	#quality-certifications .content-block:nth-of-type(even) .text-side {
		direction: ltr;
	}
}

#quality-certifications .text-side {
	padding: 1rem;
}

#quality-certifications .text-side button {
	background-color: var(--primary-color);
	color: #ffffff;
	padding: 1.2rem;
	border-radius: 999px;
	border: 1px solid #ffffff;
	transition: 0.3s;
}

#quality-certifications .text-side button:hover {
	background-color: #ffffff;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

#quality-certifications .text-side h3 {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1.5rem;
	position: relative;
	padding-bottom: 1rem;
}

#quality-certifications .text-side h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 4px;
	background: var(--secondary-color);
}

#quality-certifications .text-side h4 {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--secondary-color);
	margin: 2rem 0 1rem;
}

#quality-certifications .text-side p {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--primary-color);
	margin-bottom: 1.5rem;
}

#quality-certifications .text-side ul {
	list-style: none;
	padding: 0;
}

#quality-certifications .text-side ul li {
	margin-bottom: 1rem;
	padding-left: 1.5rem;
	position: relative;
	font-size: 0.95rem;
}

#quality-certifications .text-side ul li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--secondary-color);
	font-weight: bold;
}

#quality-certifications .image-side img {
	width: 100%;
	height: 400px;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

#quality-certifications .cert-card {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	height: 280px;
}

#quality-certifications .cert-card:hover {
	border-color: var(--secondary-color);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transform: translateY(-5px);
}

#quality-certifications .cert-card:hover .logo-container {
	opacity: 0;
	transform: scale(0.9);
}

#quality-certifications .cert-card:hover .info-overlay {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

#quality-certifications .cert-card .logo-container {
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

#quality-certifications .cert-card .logo-container img {
	max-width: 120px;
	max-height: 80px;
	-o-object-fit: contain;
	object-fit: contain;
	opacity: 0.8;
}

#quality-certifications .cert-card .logo-container h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary-color);
	margin: 0;
}

#quality-certifications .cert-card .info-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.98);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

#quality-certifications .cert-card .info-overlay h3 {
	color: var(--secondary-color);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

#quality-certifications .cert-card .info-overlay p {
	font-size: 0.9rem;
	color: var(--primary-color);
	line-height: 1.6;
	margin-bottom: 1rem;
}

#quality-certifications .cert-card .info-overlay .meta {
	font-size: 0.8rem;
	color: #6b7280;
	font-weight: 600;
	border-top: 1px solid #e5e7eb;
	padding-top: 0.5rem;
	width: 100%;
}

/* ./parts/index-news.html */

#news-section {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	background-color: #ffffff;
}

.news-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.news-header {
	text-align: center;
	margin-bottom: 4rem;
}

.news-header .subtitle {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.75rem;
}

.news-header h3 {
	font-size: 2rem;
	font-weight: 700;
	color: var(--primary-color);
}

.news-list {
	border-top: 1px solid #e5e7eb;
	margin-bottom: 3rem;
}

.news-item {
	display: block;
	text-decoration: none;
	padding: 1.5rem 0.5rem;
	border-bottom: 1px solid #e5e7eb;
	transition: background-color 0.3s ease;
}

@media (min-width: 768px) {

	.news-item {
		display: flex;
		align-items: baseline;
		gap: 3rem;
		padding: 2rem 1rem
	}
}

.news-item:hover {
	background-color: #f9fafb;
}

.news-item:hover .news-title {
	color: var(--secondary-color);
	text-decoration: underline;
}

.news-date {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--secondary-color);
	flex-shrink: 0;
	margin-bottom: 0.5rem;
	display: block;
}

@media (min-width: 768px) {

	.news-date {
		margin-bottom: 0;
		width: 100px
	}
}

.news-info {
	flex: 1;
}

.news-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
	line-height: 1.5;
	transition: color 0.3s ease;
}

.news-summary {
	font-size: 0.9rem;
	color: #6b7280;
	line-height: 1.6;
	margin: 0;
}

/* ./parts/index-cta.html */

#cta-section {
	background: var(--primary-color);
	color: white;
	padding-top: clamp(4rem, 8vw, 6rem);
	padding-bottom: clamp(4rem, 8vw, 6rem);
	text-align: center;
}

.cta-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cta-headline {
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 700;
	margin-bottom: 1rem;
	line-height: 1.2;
}

.cta-description {
	font-size: 1.1rem;
	font-weight: 300;
	margin-bottom: 2.5rem;
	opacity: 0.9;
	line-height: 1.6;
}

.cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.cta-buttons .btn {
	font-size: 1rem;
	padding: 0.875rem 2rem;
}

.cta-buttons .btn-primary {
	background-color: var(--background-sub);
	color: white;
	border: 2px solid var(--background-sub);
}

.cta-buttons .btn-primary:hover {
	background-color: transparent;
	color: var(--background-sub);
}

.cta-buttons .btn-outline {
	background-color: transparent;
	color: white;
	border: 2px solid white;
}

.cta-buttons .btn-outline:hover {
	background-color: white;
	color: #1a1a1a;
}

/* ./parts/products-ishigaki-detail.html */

section#ishigaki-detail {
	background-color: var(--background-sub);
}

section#ishigaki-detail .detail-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

section#ishigaki-detail .detail-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

@media(min-width: 768px) {

	section#ishigaki-detail .detail-content {
		grid-template-columns: 1fr 1fr
	}
}

section#ishigaki-detail .detail-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

section#ishigaki-detail .detail-text h3 {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
}

section#ishigaki-detail .detail-text p {
	font-size: 1rem;
	line-height: 1.8;
	color: #555;
	margin-bottom: 1.5rem;
}

section#ishigaki-detail .detail-text .highlight-box {
	background-color: white;
	border-left: 4px solid var(--secondary-color);
	padding: 1.5rem;
	margin: 2rem 0;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

section#ishigaki-detail .detail-text .highlight-box strong {
	color: var(--secondary-color);
	font-weight: 700;
}

section#ishigaki-detail .detail-text .features-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
}

section#ishigaki-detail .detail-text .features-list li {
	padding-left: 2rem;
	margin-bottom: 0.75rem;
	position: relative;
	color: #555;
	line-height: 1.6;
}

section#ishigaki-detail .detail-text .features-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--secondary-color);
	font-weight: 700;
}

/* ./parts/products-gracilis-detail.html */

section#gracilis-detail {
	background-color: white;
}

section#gracilis-detail .detail-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

section#gracilis-detail .detail-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

@media(min-width: 768px) {

	section#gracilis-detail .detail-content {
		grid-template-columns: 1fr 1fr
	}
}

section#gracilis-detail .detail-image {
	order: 2;
}

@media(max-width: 767px) {

	section#gracilis-detail .detail-image {
		order: 1
	}
}

section#gracilis-detail .detail-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

section#gracilis-detail .detail-text {
	order: 1;
}

@media(max-width: 767px) {

	section#gracilis-detail .detail-text {
		order: 2
	}
}

section#gracilis-detail .detail-text h3 {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
}

section#gracilis-detail .detail-text p {
	font-size: 1rem;
	line-height: 1.8;
	color: #555;
	margin-bottom: 1.5rem;
}

section#gracilis-detail .detail-text .highlight-box {
	background-color: var(--background-sub);
	border-left: 4px solid var(--secondary-color);
	padding: 1.5rem;
	margin: 2rem 0;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

section#gracilis-detail .detail-text .highlight-box strong {
	color: var(--secondary-color);
	font-weight: 700;
}

section#gracilis-detail .detail-text .features-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
}

section#gracilis-detail .detail-text .features-list li {
	padding-left: 2rem;
	margin-bottom: 0.75rem;
	position: relative;
	color: #555;
	line-height: 1.6;
}

section#gracilis-detail .detail-text .features-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--secondary-color);
	font-weight: 700;
}

/* ./parts/nutrition-hero.html */

#nutrition-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-top: 80px;
}

#nutrition-hero .hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(https://demo.sundesign.jp/euglena/img/okinawa1.jpg);
	background-size: cover;
	background-position: center;
	z-index: -1;
}

#nutrition-hero .hero-bg::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.7);
	/* 0.7を上げるとより白っぽく（薄く）なります */
	z-index: 1;
}

#nutrition-hero .hero-bg::before {
	content: '';
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(111, 160, 70, 0.1) 0%, transparent 70%);
	top: -100px;
	right: -100px;
}

#nutrition-hero .hero-content {
	text-align: center;
	max-width: 900px;
	padding: 0 1.5rem;
	z-index: 10;

}

#nutrition-hero .hero-content .hero-subtitle {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.875rem;
	margin-bottom: 1rem;
	display: block;
}

#nutrition-hero .hero-content h1 {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 8vw, 4rem);
	font-weight: 700;
	margin-bottom: 1.5rem;
	line-height: 1.15;
}

#nutrition-hero .hero-content p {
	font-size: clamp(1rem, 2vw, 1.25rem);
	color: #4b5563;
	line-height: 1.7;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* ./parts/nutrition-absorption.html */

#nutrition-absorption {
	background-color: #ffffff;
}

#nutrition-absorption section {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}

#nutrition-absorption .absorption-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
	align-items: center;
}

@media(min-width: 768px) {

	#nutrition-absorption .absorption-grid {
		grid-template-columns: 1fr 1fr
	}
}

#nutrition-absorption .absorption-visual {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	height: 100%;
	justify-content: space-between;
}

#nutrition-absorption .absorption-visual .euglena-image {
	width: 100%;
	height: 300px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}

#nutrition-absorption .absorption-visual .euglena-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

#nutrition-absorption .absorption-visual .absorption-highlight {
	background: linear-gradient(135deg, rgba(111, 160, 70, 0.08), rgba(111, 160, 70, 0.04));
	border: 2px solid var(--secondary-color);
	border-radius: 8px;
	padding: 2rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#nutrition-absorption .absorption-visual .absorption-highlight .rate-label {
	font-size: 0.85rem;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

#nutrition-absorption .absorption-visual .absorption-highlight .rate-value {
	font-family: var(--font-heading);
	font-size: 3.5rem;
	font-weight: 700;
	color: var(--secondary-color);
	line-height: 1;
	margin-bottom: 0.5rem;
}

#nutrition-absorption .absorption-visual .absorption-highlight .rate-description {
	font-size: 0.95rem;
	color: #4b5563;
	font-weight: 500;
}

#nutrition-absorption .absorption-content h2 {
	font-family: var(--font-heading);
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
}

@media(min-width: 768px) {

	#nutrition-absorption .absorption-content h2 {
		font-size: 2.75rem
	}
}

#nutrition-absorption .absorption-content p {
	font-size: 1.25rem;
	line-height: 1.8;
	color: #4b5563;
	margin-bottom: 1.5rem;
}

#nutrition-absorption .absorption-content .benefit-list {
	list-style: none;
	padding: 0;
	margin: 2rem 0;
}

#nutrition-absorption .absorption-content .benefit-list li {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 1.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #e5e7eb;
}

#nutrition-absorption .absorption-content .benefit-list li:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

#nutrition-absorption .absorption-content .benefit-list li .icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--secondary-color);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
	font-size: 0.75rem;
}

#nutrition-absorption .absorption-content .benefit-list li .text h3 {
	font-family: var(--font-heading);
	font-weight: 600;
	margin-bottom: 0.5rem;
	font-size: 1.05rem;
}

#nutrition-absorption .absorption-content .benefit-list li .text p {
	font-size: 0.95rem;
	color: #6b7280;
	margin: 0;
}

/* ./parts/nutrition-59nutrients.html */

#what-is-euglena {
	padding: clamp(4rem, 8vw, 6rem) 1.5rem;
	background-color: #ffffff;
	color: #2D3748;
}

.euglena-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* 見出しエリア */
.euglena-header {
	text-align: center;
	margin-bottom: 4rem;
}

.euglena-header .eyecatch {
	color: var(--primary-color);
	/* セカンダリカラー：緑 */
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.2em;
	display: block;
	margin-bottom: 0.75rem;
}

.euglena-header h2 {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.4;
}

/* 特徴グリッド */
.feature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 768px) {
	.feature-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.feature-card {
	background: #F7FAFC;
	padding: 3rem 2rem;
	border-radius: 16px;
	border: 1px solid #E2E8F0;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.feature-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(111, 160, 70, 0.1);
	border-color: var(--primary-color);
}

/* 数字の強調 */
.stat-number {
	font-size: 4.5rem;
	font-weight: 800;
	color: var(--primary-color);
	line-height: 1;
	margin-bottom: 1rem;
	font-family: var(--font-heading);
}

.stat-text {
	font-size: 3.5rem;
	font-weight: 800;
	color: var(--primary-color);
	line-height: 1;
	margin-bottom: 1rem;
	font-family: var(--font-heading);
}

.stat-unit {
	font-size: 1.5rem;
	margin-left: 0.2rem;
}

.feature-card h3 {
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: #1A202C;
}

.feature-card p {
	font-size: 1rem;
	line-height: 1.8;
	color: #4A5568;
	max-width: 400px;
}

/* アイコン補足 */
.feature-icon {
	width: 64px;
	height: 64px;
	background: rgba(111, 160, 70, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2rem;
}

.feature-icon .material-symbols-outlined {
	font-size: 32px;
	color: #6FA046;
}

/* ./parts/nutrition-paramylon.html */

#nutrition-paramylon {
	background-color: #F5F6FA;
}

#nutrition-paramylon .paramylon-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

#nutrition-paramylon .section-headline {
	margin-bottom: 4rem;
}

#nutrition-paramylon .paramylon-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media(min-width: 768px) {

	#nutrition-paramylon .paramylon-grid {
		grid-template-columns: 1fr 1fr
	}
}

#nutrition-paramylon .paramylon-visual {
	position: relative;
	height: 400px;
	display: flex;
	flex-direction: column;
	align-items: top;
	justify-content: center;
	order: -1;
}

@media(min-width: 768px) {

	#nutrition-paramylon .paramylon-visual {
		order: 0
	}
}

#nutrition-paramylon .paramylon-visual img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 4px;
}

#nutrition-paramylon .paramylon-content h2 {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 2.5rem);
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
}

#nutrition-paramylon .paramylon-content .section-subtitle {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--secondary-color);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 2rem;
	display: block;
}

#nutrition-paramylon .paramylon-content .intro-text {
	font-size: 1rem;
	color: #4b5563;
	line-height: 1.8;
	margin-bottom: 2rem;
}

#nutrition-paramylon .paramylon-content .content-block {
	margin-bottom: 2.5rem;
}

#nutrition-paramylon .paramylon-content .content-block h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.2rem;
	margin-bottom: 1rem;
	color: var(--primary-color);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--secondary-color);
}

#nutrition-paramylon .paramylon-content .content-block p {
	font-size: 0.95rem;
	color: #6b7280;
	line-height: 1.7;
	margin: 0;
}

#nutrition-paramylon .paramylon-content .comparison-chart {
	background-color: white;
	border: 1px solid #e5e7eb;
	padding: 1.5rem;
	border-radius: 4px;
	margin: 1.5rem 0;
}

#nutrition-paramylon .paramylon-content .comparison-chart .chart-title {
	font-weight: 600;
	font-size: 0.95rem;
	color: #6b7280;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

#nutrition-paramylon .paramylon-content .comparison-chart .chart-bars {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

#nutrition-paramylon .paramylon-content .comparison-chart .chart-bars .bar-item {
	display: flex;
	align-items: center;
	gap: 1rem;
}

#nutrition-paramylon .paramylon-content .comparison-chart .chart-bars .bar-item .label {
	width: 120px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--primary-color);
}

#nutrition-paramylon .paramylon-content .comparison-chart .chart-bars .bar-item .bar-container {
	flex: 1;
	height: 30px;
	background-color: #f0f0f0;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

#nutrition-paramylon .paramylon-content .comparison-chart .chart-bars .bar-item .bar-container .bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--secondary-color), rgba(111, 160, 70, 0.6));
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 0.75rem;
	color: white;
	font-weight: 700;
	font-size: 0.85rem;
}

#nutrition-paramylon .paramylon-content .feature-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
}

#nutrition-paramylon .paramylon-content .feature-list li {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #e5e7eb;
}

#nutrition-paramylon .paramylon-content .feature-list li:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

#nutrition-paramylon .paramylon-content .feature-list li .feature-icon {
	width: 40px;
	height: 40px;
	background-color: var(--secondary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.5rem;
	flex-shrink: 0;
}

#nutrition-paramylon .paramylon-content .feature-list li .feature-text {
	flex: 1;
}

#nutrition-paramylon .paramylon-content .feature-list li .feature-text h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	color: var(--primary-color);
}

#nutrition-paramylon .paramylon-content .feature-list li .feature-text p {
	font-size: 0.9rem;
	color: #6b7280;
	margin: 0;
	line-height: 1.6;
}

#nutrition-paramylon .content-block3 {
	margin-bottom: 2.5rem;



}

#nutrition-paramylon .content-block3 h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.2rem;
	margin-bottom: 1rem;
	color: var(--primary-color);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--secondary-color);
}

#nutrition-paramylon .content-block3 p {
	font-size: 0.95rem;
	color: #6b7280;
	line-height: 1.7;
	margin: 0;
}

#nutrition-paramylon .content-block3 h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	color: var(--primary-color);
}

#nutrition-paramylon .applications-section {
	margin-top: 4rem;
	padding-top: 4rem;
	border-top: 1px solid #e5e7eb;
}

#nutrition-paramylon .applications-section h3 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 2rem;
	color: var(--primary-color);
}

#nutrition-paramylon .applications-section .app-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
}

#nutrition-paramylon .applications-section .app-grid .app-card {
	background-color: white;
	border: 1px solid #e5e7eb;
	padding: 1.5rem;
	border-radius: 4px;
	transition: all 0.3s ease;
}

#nutrition-paramylon .applications-section .app-grid .app-card:hover {
	border-color: var(--secondary-color);
	box-shadow: 0 4px 12px rgba(111, 160, 70, 0.15);
}

#nutrition-paramylon .applications-section .app-grid .app-card .app-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

#nutrition-paramylon .applications-section .app-grid .app-card h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	margin-bottom: 0.75rem;
	font-size: 1.1rem;
	color: var(--primary-color);
}

#nutrition-paramylon .applications-section .app-grid .app-card p {
	font-size: 0.9rem;
	color: #6b7280;
	line-height: 1.6;
}

/* ./parts/nutrition-cta.html */

#nutrition-cta {
	background: var(--primary-color);
	color: white;
	text-align: center;
}

#nutrition-cta .cta-content {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

#nutrition-cta .cta-content h2 {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 700;
	margin-bottom: 1rem;
}

#nutrition-cta .cta-content p {
	font-size: 1.1rem;
	margin-bottom: 2rem;
	opacity: 0.95;
	line-height: 1.6;
}

#nutrition-cta .cta-content .cta-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

#nutrition-cta .cta-content .cta-group .btn.btn-primary {
	background-color: var(--secondary-color);
	border-color: var(--secondary-color);
	color: white;
}

#nutrition-cta .cta-content .cta-group .btn.btn-primary:hover {
	opacity: 0.85;
}

#nutrition-cta .cta-content .cta-group .btn.btn-secondary {
	background-color: transparent;
	border: 2px solid white;
	color: white;
}

#nutrition-cta .cta-content .cta-group .btn.btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* ./parts/green-hero.html */

#green-hero-section {
	position: relative;
	height: 40vh;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#green-hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #000000 0%, #000000 100%);
	z-index: -2;
}

#green-hero-section .hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	z-index: -1;
	opacity: 0.5;
}

#green-hero-section .hero-content {
	position: relative;
	z-index: 10;
	text-align: center;
	max-width: 700px;
	padding: 2rem;
}

#green-hero-section .hero-content p {
	color: #ffffff;
}

#green-hero-section .hero-headline {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 7vw, 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1rem;
	color: #ffffff;
}

#green-hero-section .hero-subheadline {
	font-size: clamp(0.95rem, 2.5vw, 1.25rem);
	font-weight: 300;
	color: var(--text-light);
	margin-bottom: 2rem;
	line-height: 1.6;
}


/* ./parts/green-features.html */

#green-features {
	background-color: #ffffff;
}

#green-features .container-custom {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

#green-features .section-headline {
	text-align: center;
	margin-bottom: 4rem;
}

#green-features .section-headline .subtitle {
	color: #000;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.5rem;
}

#green-features .section-headline h2 {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--primary-color);
}

#green-features .mechanism-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 4rem;
}

@media (min-width: 768px) {

	#green-features .mechanism-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

#green-features .mechanism-card {
	padding: 2.5rem 2rem;
	background-color: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	transition: all 0.3s ease;
}

#green-features .mechanism-card:hover {
	border-color: var(--background-sub);
	box-shadow: 0 10px 30px rgba(111, 160, 70, 0.1);
}

#green-features .mechanism-card .icon {
	font-size: 2.5rem;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

#green-features .mechanism-card h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

#green-features .mechanism-card p {
	font-size: 0.95rem;
	color: var(--primary-color);
	opacity: 0.75;
	line-height: 1.8;
}

#green-features .benefits-section {
	background-color: #f9fafb;
	padding: 3rem 2rem;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

#green-features .benefits-section h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1.5rem;
}

#green-features .benefits-section .benefit-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {

	#green-features .benefits-section .benefit-list {
		grid-template-columns: repeat(3, 1fr)
	}
}

#green-features .benefits-section .benefit-item {
	padding: 1.5rem;
	background-color: white;
	border-radius: 6px;
	border-left: 4px solid var(--primary-color);
}

#green-features .benefits-section .benefit-item .benefit-label {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--secondary-color);
	margin-bottom: 0.5rem;
	letter-spacing: 0.05em;
}

#green-features .benefits-section .benefit-item p {
	font-size: 0.95rem;
	color: var(--primary-color);
	line-height: 1.6;
}

#green-features .mechanism-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-bottom: 2rem;
	position: relative;
}

@media (min-width: 768px) {

	#green-features .mechanism-grid {
		grid-template-columns: 1fr auto 1fr;
		align-items: center
	}
}

#green-features .mechanism-arrow {
	display: none;
}

@media (min-width: 768px) {

	#green-features .mechanism-arrow {
		display: flex;
		color: var(--secondary-color);
		font-size: 3rem
	}
}

#green-features .conclusion-bridge {
	text-align: center;
	margin: 2rem 0;
	color: var(--secondary-color);
	font-weight: 700;
	font-size: 1.25rem;
}

#green-features .benefits-section {
	background-color: #ffffff;
	padding: 3rem 2rem;
	border-radius: 12px;
	border: 2px solid var(--primary-color);
	box-shadow: 0 10px 30px rgba(111, 160, 70, 0.05);
}

#green-features .mechanism-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#green-features .mechanism-card p {
	color: var(--secondary-color);
}

.origin-section {
	margin-top: 4rem;
	border-radius: 12px;
	overflow: hidden;
	padding-top: clamp(3rem, 5vw, 5rem);
}

.origin-content {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 768px) {

	.origin-content {
		grid-template-columns: 1fr 1fr
	}
}

.origin-image {
	height: 250px;
}

@media (min-width: 768px) {

	.origin-image {
		height: 100%
	}
}

.origin-image img {
	width: 100%;
	height: 100%;
	border-radius: 20px;
	-o-object-fit: cover;
	object-fit: cover;
	display: block;
}

.origin-text {
	padding: 2.5rem;
}

.origin-text h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.origin-text p {
	font-size: 0.95rem;
	color: #4b5563;
	line-height: 1.7;
	margin-bottom: 2rem;
}

.btn-quality {
	display: inline-block;
	padding: 0.8rem 2rem;
	background-color: var(--primary-color);
	color: #ffffff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	transition: opacity 0.3s ease;
}

.btn-quality:hover {
	opacity: 0.8;
	color: #ffffff;
}

/* ./parts/green-specs.html */

#green-specs-section {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	background-color: #ffffff;
}

.specs-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.specs-header {
	text-align: center;
	margin-bottom: 4rem;
}

.specs-header h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	color: var(--primary-color);
	font-family: var(--font-heading);
	margin-bottom: 1rem;
}

.product-showcase {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-bottom: 4rem;
	align-items: center;
}

@media (min-width: 768px) {

	.product-showcase {
		grid-template-columns: 1fr 1fr;
		gap: 4rem
	}
}

.product-image-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
}

.product-image-wrapper img {
	width: 100%;
	height: auto;
	-o-object-fit: cover;
	object-fit: cover;
	display: block;
}

.product-specs {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.product-name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
}

.product-subtitle {
	font-size: 1rem;
	color: var(--text-light);
	margin-bottom: 2rem;
	font-style: italic;
}

.table-wrapper {
	overflow-x: auto;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	margin-top: 2rem;
}

.table-wrapper h3 {
	font-weight: 600;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.specs-table {
	width: 100%;
	border-collapse: collapse;
	border-radius: 10px;
	overflow: hidden;
}

.specs-table th {
	background-color: var(--primary-color);
	padding: 1.25rem;
	text-align: left;
	font-weight: 700;
	color: #ffffff;
	font-size: 0.95rem;
}

.specs-table td {
	padding: 1.25rem;
	border-bottom: 1px solid #e5e7eb;
	color: var(--text-light);
}

.specs-table td:first-child {
	color: #000;
	background-color: #f9fafb;
	min-width: 120px;
}

.specs-table td:last-child {
	font-weight: 600;
}

.specs-table tr:last-child td {
	border-bottom: none;
}

.specs-table tr:hover {
	background-color: #f9fafb;
}

/* ./parts/green-benefits.html */

#green-benefits {
	background-color: white;
}

#green-benefits .container-custom {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

#green-benefits .benefits-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {

	#green-benefits .benefits-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

#green-benefits .benefit-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2rem;
	align-items: flex-start;
}

@media (min-width: 768px) {

	#green-benefits .benefit-item:nth-child(even) {
		grid-template-columns: 1fr auto
	}
}

#green-benefits .benefit-item .benefit-icon {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	background-color: var(--background-sub);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

#green-benefits .benefit-item .benefit-icon span {
	font-size: 2rem;
	color: var(--secondary-color);
}

#green-benefits .benefit-item .benefit-content h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
}

#green-benefits .benefit-item .benefit-content p {
	color: var(--primary-color);
	opacity: 0.75;
	font-size: 0.95rem;
	line-height: 1.6;
}

#green-benefits .benefit-item .benefit-image {
	width: 200px;
	height: 200px;
	border-radius: 8px;
	overflow: hidden;
}

#green-benefits .benefit-item .benefit-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* ./parts/green-cta.html */

#green-cta-section {
	background: var(--primary-color);
	color: white;
	padding-top: clamp(4rem, 8vw, 6rem);
	padding-bottom: clamp(4rem, 8vw, 6rem);
	text-align: center;
}

.green-cta-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.green-cta-headline {
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 700;
	margin-bottom: 1rem;
	line-height: 1.2;
}

.green-cta-description {
	font-size: 1.1rem;
	font-weight: 300;
	margin-bottom: 2.5rem;
	opacity: 0.9;
	line-height: 1.6;
}

.green-cta-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.green-cta-buttons .btn {
	font-size: 1rem;
	padding: 0.875rem 2rem;
}

.green-cta-buttons .btn-primary {
	background-color: var(--background-sub);
	color: white;
	border: 2px solid var(--background-sub);
}

.green-cta-buttons .btn-primary:hover {
	background-color: transparent;
	color: var(--background-sub);
}

.green-cta-buttons .btn-outline {
	background-color: transparent;
	color: white;
	border: 2px solid white;
}

.green-cta-buttons .btn-outline:hover {
	background-color: white;
	color: #1a1a1a;
}

/* ./parts/ex-hero.html */

section.ex-hero {
	position: relative;
	height: 40vh;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
	color: white;
	overflow: hidden;
	padding: 0;
}

section.ex-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('https://dequila.jp/photos/?query=laboratory&type=regular');
	background-size: cover;
	background-position: center;
	opacity: 0.3;
	z-index: 1;
}

section.ex-hero .hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 800px;
	padding: 2rem;
}

section.ex-hero .hero-content .badge {
	display: inline-block;
	background-color: var(--secondary-color);
	color: white;
	padding: 0.5rem 1.25rem;
	border-radius: 50px;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

section.ex-hero .hero-content h1 {
	font-size: clamp(2rem, 7vw, 3.5rem);
	font-weight: 700;
	margin-bottom: 1rem;
	line-height: 1.2;
	font-family: var(--font-heading);
}

section.ex-hero .hero-content .subtitle {
	font-size: clamp(1rem, 3vw, 1.5rem);
	color: #e5e5e5;
	margin-bottom: 2rem;
	font-weight: 300;
}

section.ex-hero .hero-content .hero-stat {
	background-color: rgba(111, 160, 70, 0.2);
	border-left: 4px solid var(--secondary-color);
	padding: 1.5rem;
	border-radius: 4px;
	margin: 2rem 0;
}

section.ex-hero .hero-content .hero-stat .stat-number {
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 700;
	color: var(--secondary-color);
	font-family: var(--font-heading);
}

section.ex-hero .hero-content .hero-stat .stat-label {
	font-size: 0.95rem;
	color: #ccc;
	margin-top: 0.5rem;
}

/* ./parts/ex-highlights.html */

#ex-highlights {
	background-color: #f3f4f6;
}

#ex-highlights .container-custom {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

#ex-highlights .highlights-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {

	#ex-highlights .highlights-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

#ex-highlights .highlight-card {
	background-color: white;
	padding: 2.5rem;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	border-left: 4px solid var(--secondary-color);
}

#ex-highlights .highlight-card .highlight-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

#ex-highlights .highlight-card .highlight-header .icon-circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--background-sub);
	display: flex;
	align-items: center;
	justify-content: center;
}

#ex-highlights .highlight-card .highlight-header .icon-circle span {
	font-size: 1.5rem;
	color: var(--secondary-color);
}

#ex-highlights .highlight-card .highlight-header h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary-color);
}

#ex-highlights .highlight-card p {
	color: var(--primary-color);
	opacity: 0.75;
	line-height: 1.6;
	font-size: 0.95rem;
}

#ex-highlights .highlight-card .stat {
	display: block;
	margin-top: 1rem;
	color: var(--secondary-color);
	font-weight: 700;
	font-size: 1.1rem;
}

/* ./parts/ex-specs.html */

section.ex-specs {
	padding: clamp(3rem, 5vw, 5rem) 1.5rem;
	background-color: white;
}

section.ex-specs .container-custom {
	max-width: 1280px;
	margin: 0 auto;
}

section.ex-specs .section-headline {
	text-align: center;
	margin-bottom: 4rem;
}

section.ex-specs .section-headline h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	font-family: var(--font-heading);
}

section.ex-specs .specs-content {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 768px) {

	section.ex-specs .specs-content {
		grid-template-columns: 1fr 1fr
	}
}

section.ex-specs .specs-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

section.ex-specs .specs-table-wrapper {
	width: 100%;

}

section.ex-specs .specs-table-wrapper h3 {
	font-weight: 600;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

section.ex-specs .specs-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

section.ex-specs .specs-table th {
	background-color: var(--primary-color);
	color: white;
	padding: 1.25rem;
	text-align: left;
	font-weight: 600;
	font-family: var(--font-heading);
	font-size: 0.95rem;
	letter-spacing: 0.05em;
}

section.ex-specs .specs-table td {
	padding: 1.25rem;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.95rem;
	color: var(--primary-color);
	vertical-align: middle;
}

section.ex-specs .specs-table td:last-child {
	border-bottom: none;
	font-weight: 600;
}

section.ex-specs .specs-table tr:hover td {
	background-color: #f9fafb;

}

section.ex-specs .specs-table .spec-label {
	color: #000;
	min-width: 150px;
	background-color: #f9fafb;
	vertical-align: middle;
}

section.ex-specs .specs-table .highlight {
	color: var(--secondary-color);
	font-weight: 600;
}

/* ./parts/ex-comparison.html */

#ex-comparison {
	background-color: #f3f4f6;
}

#ex-comparison .container-custom {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

#ex-comparison .comparison-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 1024px) {

	#ex-comparison .comparison-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

#ex-comparison .comparison-card {
	background-color: white;
	padding: 2.5rem;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	position: relative;
}

#ex-comparison .comparison-card.featured {
	border: 2px solid var(--secondary-color);
	box-shadow: 0 10px 40px rgba(111, 160, 70, 0.15);
}

#ex-comparison .comparison-card.featured .badge {
	position: absolute;
	top: -12px;
	right: 20px;
	background-color: var(--secondary-color);
	color: white;
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

#ex-comparison .comparison-card h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
}

#ex-comparison .comparison-card .subtitle {
	color: var(--secondary-color);
	font-size: 0.9rem;
	margin-bottom: 2rem;
	font-weight: 600;
}

#ex-comparison .comparison-card .cta-button {
	width: 100%;
	margin-bottom: 2rem;
}

#ex-comparison .comparison-card .feature-list {
	list-style: none;
	padding: 0;
}

#ex-comparison .comparison-card .feature-list li {
	padding: 1rem 0;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

#ex-comparison .comparison-card .feature-list li:last-child {
	border-bottom: none;
}

#ex-comparison .comparison-card .feature-list li .check {
	color: var(--secondary-color);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}

#ex-comparison .comparison-card .feature-list li .text {
	color: var(--primary-color);
	font-size: 0.95rem;
	opacity: 0.85;
}

/* ./parts/ex-cta.html */

section.ex-cta {
	padding: clamp(4rem, 6vw, 6rem) 1.5rem;
	background: var(--primary-color);
	color: white;
	text-align: center;
}

section.ex-cta .container-custom {
	max-width: 800px;
	margin: 0 auto;
}

section.ex-cta h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	margin-bottom: 1.5rem;
	font-family: var(--font-heading);
}

section.ex-cta p {
	font-size: 1.1rem;
	color: #e5e5e5;
	margin-bottom: 2.5rem;
	line-height: 1.8;
}

section.ex-cta .cta-buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
}

@media (min-width: 768px) {

	section.ex-cta .cta-buttons {
		flex-direction: row
	}
}

section.ex-cta .cta-buttons .btn {
	flex: 1;
	padding: 1rem 2rem;
	font-size: 1rem;
	border: none;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
	min-width: 200px;
}

section.ex-cta .cta-buttons .btn.btn-primary {
	background-color: var(--secondary-color);
	color: white;
}

section.ex-cta .cta-buttons .btn.btn-primary:hover {
	opacity: 0.9;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(111, 160, 70, 0.4);
}

section.ex-cta .cta-buttons .btn.btn-outline {
	background-color: transparent;
	color: white;
	border: 2px solid white;
}

section.ex-cta .cta-buttons .btn.btn-outline:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

section.ex-cta .trust-markers {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.5rem;
	font-size: 0.9rem;
	color: #9ca3af;
}

section.ex-cta .trust-markers .marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

section.ex-cta .trust-markers .marker .icon {
	font-size: 1.5rem;
}

/* ./parts/ex-beta-glucan.html */

section.beta-glucan {
	padding: clamp(3rem, 5vw, 5rem) 1.5rem;
	background-color: #f3f4f6;
}

section.beta-glucan .container-custom {
	max-width: 1280px;
	margin: 4rem auto 0 auto;
}

section.beta-glucan .container-flex {
	display: flex;
	width: 100%;
	gap: 20px;
}

@media (max-width: 1007px) {

	section.beta-glucan .container-flex {
		flex-direction: column;
		align-items: center
	}
}

section.beta-glucan .container-flex .comparison-card {
	display: flex;
	justify-content: center;
	flex-direction: column;
	background: white;
	width: 50%;
	maegin: 0 auto;
	padding: 2rem;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;

}

@media (max-width: 1007px) {

	section.beta-glucan .container-flex .comparison-card {
		width: 100%
	}
}

section.beta-glucan .container-flex .comparison-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

section.beta-glucan .container-flex .comparison-card .product-name {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-family: var(--font-heading);
}

section.beta-glucan .container-flex .comparison-card .glucan-percentage {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--primary-color);
	font-family: var(--font-heading);
	margin-bottom: 0.5rem;
}

section.beta-glucan .container-flex .comparison-card .glucan-range {
	font-size: 0.9rem;
	color: #6b7280;
	margin-bottom: 1.5rem;
}

section.beta-glucan .section-headline {
	text-align: center;
	margin-bottom: 4rem;
}

section.beta-glucan .section-headline .subtitle {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.5rem;
}

section.beta-glucan .section-headline h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	font-family: var(--font-heading);
}

section.beta-glucan .insight-section {
	background: white;
	padding: 2rem;
	border-radius: 8px;
	border-left: 4px solid var(--background-sub);
	width: 50%;
}

@media (max-width: 1007px) {

	section.beta-glucan .insight-section {
		width: 100%;
		border-left: none;
		border-top: 4px solid var(--secondary-color)
	}
}

section.beta-glucan .insight-section .insight-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-family: var(--font-heading);
}

section.beta-glucan .insight-section p {
	color: #374151;
	line-height: 1.8;
	font-size: 0.95rem;
}

section.beta-glucan .reason-container {
	max-width: 1200px;
	margin: 4rem auto 0;
	padding: 0 1.5rem;
}

section.beta-glucan .reason-grid {
	display: flex;
	justify-content: center;
	gap: 2rem;

}

@media (max-width: 799px) {

	section.beta-glucan .reason-grid {
		flex-direction: column
	}
}

section.beta-glucan .reason-card {
	background-color: #ffffff;
	border-radius: 12px;
	text-align: center;
	transition: all 0.3s ease;
	border: 1px solid #eee;
	overflow: hidden;
	/* 画像の角をカードの角丸に合わせる */
	display: flex;
	flex-direction: column;
	width: 40%;

}

@media (max-width: 799px) {

	section.beta-glucan .reason-card {
		width: 100%
	}
}

section.beta-glucan .reason-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
	border-color: var(--secondary-color);
}

/* アイコンボックスをカード上部いっぱいの画像エリアに変更 */

section.beta-glucan .reason-visual {
	width: 100%;
	height: 180px;
	/* 画像の高さを指定 */
	background-color: #f9fafb;
	overflow: hidden;
}

section.beta-glucan .reason-visual img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	/* 隙間なく埋める */
	transition: transform 0.5s ease;
}

section.beta-glucan .reason-card:hover .reason-visual img {
	transform: scale(1.1);
	/* ホバー時に画像を少しズーム */
}

/* テキスト部分のパディング */

section.beta-glucan .reason-body {
	padding: 2rem 1.5rem;
}

section.beta-glucan .reason-card h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-family: var(--font-heading);
}

section.beta-glucan .reason-card p {
	font-size: 0.9rem;
	line-height: 1.7;
	color: #4b5563;
	margin: 0;
	text-align: left;
	/* 説明文は左寄せの方が見やすいです */
}

section.beta-glucan .reason-card .paramylon-caption {
	font-size: 0.9rem;
	margin-top: 0;
	padding-right: 0.2rem;
	text-align: right;
}

/* 動画埋め込み用のスタイル */

section.beta-glucan .reason-video-wrapper {
	max-width: 800px;
	/* 動画の最大幅を制限（お好みで調整してください） */
	margin: 0 auto 4rem auto;
	/* 下に余白を空ける */
	padding: 0 1rem;
}

section.beta-glucan .video-container {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	/* 16:9 の比率を維持 */
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

section.beta-glucan .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hightlight-text {
	font-weight: 700;
	color: var(--primary-color);
}

/* ./parts/ex-sleep.html */

section.sleep-benefits {
	padding: clamp(3rem, 5vw, 5rem) 1.5rem;
	background-color: white;
}

section.sleep-benefits .container-custom {
	max-width: 1280px;
	margin: 0 auto;
	text-align: center;
}

section.sleep-benefits .section-headline {
	text-align: center;
	margin-bottom: 4rem;
}

section.sleep-benefits .section-headline .subtitle {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.5rem;
}

section.sleep-benefits .section-headline h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	font-family: var(--font-heading);
}

section.sleep-benefits .trial-info {
	background: #f0f9ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 3rem;
	text-align: center;
}

section.sleep-benefits .trial-info p {
	font-size: 0.9rem;
	color: #1e40af;
	margin: 0;
}

section.sleep-benefits .benefits-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {

	section.sleep-benefits .benefits-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

section.sleep-benefits .benefits-grid .benefit-card {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: flex-start;
}

section.sleep-benefits .benefits-grid .benefit-card .icon {
	width: 60px;
	height: 60px;
	background-color: #F5F6FA;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

section.sleep-benefits .benefits-grid .benefit-card .icon .material-symbols-outlined {
	color: var(--background-sub);
	font-size: 32px;
}

section.sleep-benefits .benefits-grid .benefit-card .card-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-family: var(--font-heading);
}

section.sleep-benefits .benefits-grid .benefit-card .card-description {
	color: #6b7280;
	line-height: 1.8;
	font-size: 0.95rem;
}

section.sleep-benefits .benefits-grid .benefit-card .result-highlight {
	background-color: #F5F6FA;
	border-left: 3px solid var(--secondary-color);
	padding: 1rem;
	margin-top: 1rem;
	border-radius: 4px;
}

section.sleep-benefits .benefits-grid .benefit-card .result-highlight .result-text {
	font-size: 0.9rem;
	color: var(--primary-color);
	font-weight: 500;
}

/* ./parts/ex-stress.html */

section.stress-relief {
	padding: clamp(3rem, 5vw, 5rem) 1.5rem;
	background-color: #f3f4f6;
}

section.stress-relief .container-custom {
	max-width: 1280px;
	margin: 0 auto;
}

section.stress-relief .section-headline {
	text-align: center;
	margin-bottom: 4rem;
}

section.stress-relief .section-headline .subtitle {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.5rem;
}

section.stress-relief .section-headline h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	font-family: var(--font-heading);
}

section.stress-relief .trial-info {
	background: #f0f9ff;
	border: 1px solid #bfdbfe;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 3rem;
	text-align: center;
}

section.stress-relief .trial-info p {
	font-size: 0.9rem;
	color: #1e40af;
	margin: 0;
}

section.stress-relief .stress-metrics {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {

	section.stress-relief .stress-metrics {
		grid-template-columns: repeat(2, 1fr)
	}
}

section.stress-relief .stress-metrics .metric-card {
	background: white;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

section.stress-relief .stress-metrics .metric-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

section.stress-relief .stress-metrics .metric-card .metric-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 1.5rem;
	font-family: var(--font-heading);
}

section.stress-relief .stress-metrics .metric-card .metric-points {
	list-style: none;
	padding: 0;
	margin: 0;
}

section.stress-relief .stress-metrics .metric-card .metric-points li {
	padding: 1rem 0;
	border-bottom: 1px solid #e5e7eb;
	font-size: 0.95rem;
	color: #6b7280;
	line-height: 1.6;
	display: flex;
	gap: 1rem;
}

section.stress-relief .stress-metrics .metric-card .metric-points li:last-child {
	border-bottom: none;
}

section.stress-relief .stress-metrics .metric-card .metric-points li::before {
	content: '✓';
	color: var(--primary-color);
	font-weight: 700;
	flex-shrink: 0;
}

section.stress-relief .insight-box {
	background: white;
	border-left: 4px solid var(--background-sub);
	padding: 2rem;
	border-radius: 8px;
}

section.stress-relief .insight-box .box-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-family: var(--font-heading);
}

section.stress-relief .insight-box p {
	color: #6b7280;
	line-height: 1.8;
	font-size: 0.95rem;
}

/* ./parts/green-nutrients.html */

#green-nutrients-section {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	background-color: #F5F6FA;
}

.nutrients-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.nutrients-header {
	text-align: center;
	margin-bottom: 3rem;
}

.nutrients-header h2 {
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.nutrients-header p {
	font-size: 1rem;
	color: var(--text-light);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.nutrients-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
}

.nutrient-item {
	background-color: white;
	padding: 1.5rem;
	border-radius: 8px;
	border-left: 4px solid var(--background-sub);
	transition: all 0.3s ease;
}

.nutrient-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.nutrient-category {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--secondary-color);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.nutrient-item h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
}

.nutrient-item p {
	font-size: 0.85rem;
	color: var(--text-light);
	line-height: 1.5;
}

.nutrients-summary {
	background-color: white;
	padding: 2.5rem;
	border-radius: 8px;
	margin-top: 3rem;
	text-align: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.nutrients-summary h3 {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--primary-color);
}

.nutrient-stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

.nutrient-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nutrient-stat-value {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--secondary-color);
	font-family: var(--font-heading);
}

.nutrient-stat-label {
	font-size: 0.9rem;
	color: var(--text-light);
	margin-top: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.digestibility-contents {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;

}

.digestibility-contents .digestibility-hero {
	background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);
	padding: 4rem 2rem;
	border-radius: 12px;
	margin-bottom: 4rem;
	text-align: center;
	border: 1px solid #e5e7eb;
}

.digestibility-contents .digestibility-hero .big-number {
	font-size: 4rem;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.digestibility-contents .digestibility-hero .label {
	font-size: 1.25rem;
	color: var(--secondary-color);
	margin-bottom: 1rem;
	font-weight: 600;
}

.digestibility-contents .digestibility-hero .description {
	font-size: 1rem;
	color: var(--secondary-color);
	opacity: 0.8;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.8;
}

.digestibility-contents .digestibility-header {
	text-align: center;
}

.digestibility-contents .digestibility-header h2 {
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 700;
	color: var(--primary-color);
	margin-top: 6rem;
	margin-bottom: 3rem;
}

/* ./parts/green-paramylon.html */

#green-paramylon-section {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	background-color: #ffffff;
}

.paramylon-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.paramylon-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: center;
}

@media (min-width: 768px) {

	.paramylon-grid {
		grid-template-columns: 1fr 1fr
	}
}

.paramylon-content h2 {
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1.5rem;
}

.paramylon-content p {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--text-light);
	margin-bottom: 1.5rem;
}

.paramylon-benefits {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}


.benefit-icon {
	flex-shrink: 0;
	font-size: 2rem;
	color: var(--secondary-color);
}

.benefit-content h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 0.3rem;
}

.benefit-content p {
	font-size: 0.9rem;
	color: var(--text-light);
	margin: 0;
}

.paramylon-visual {
	position: relative;
	height: 400px;
}

.paramylon-visual img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 8px;
}

/* ./parts/green-research.html */

section#research {
	background-color: #F5F6FA;
}

.research-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.research-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin-top: 3rem;
}

@media (min-width: 768px) {

	.research-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

.research-card {
	background: white;
	padding: 2.5rem;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: all 0.3s ease;
}

.research-card:hover {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
}

.research-card .icon {
	width: 64px;
	height: 64px;
	background-color: #F5F6FA;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.research-card .icon .material-symbols-outlined {
	font-size: 32px;
	color: var(--primary-color);
}

.research-card h3 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.research-card p {
	color: #6b7280;
	line-height: 1.8;
	font-size: 0.95rem;
}

.research-card p:not(:last-child) {
	margin-bottom: 1rem;
}

.research-card ul {
	list-style: none;
	padding: 0;
}

.research-card ul li {
	margin-bottom: 0.75rem;
	padding-left: 1.5rem;
	position: relative;
	color: #6b7280;
	line-height: 1.6;
}

.research-card ul li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--secondary-color);
	font-weight: 700;
}

.process-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
	padding: 2.5rem;
	background: white;
	border-radius: 8px;
}

.process-flow .process-step {
	text-align: center;
}

.process-flow .process-step .step-number {
	width: 56px;
	height: 56px;
	background-color: var(--secondary-color);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	margin: 0 auto 1rem;
}

.process-flow .process-step h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
}

.process-flow .process-step p {
	font-size: 0.9rem;
	color: #6b7280;
}

/* ./parts/nutrition-sustainability.html */

section.sustainability {
	background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
}

section.sustainability .sustainability-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

section.sustainability .section-headline {
	text-align: center;
	margin-bottom: 4rem;
}

section.sustainability .section-headline .subtitle {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.5rem;
}

section.sustainability .section-headline h2 {
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--primary-color);
}

@media(min-width: 768px) {

	section.sustainability .section-headline h2 {
		font-size: 3rem
	}
}

section.sustainability .hero-area {
	background: white;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 4rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	display: grid;
	grid-template-columns: 1fr;
}

@media(min-width: 768px) {

	section.sustainability .hero-area {
		grid-template-columns: 1fr 1fr
	}
}

section.sustainability .hero-area .hero-image {
	min-height: 300px;
	background: linear-gradient(135deg, #6FA046 0%, #4a7c2e 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

section.sustainability .hero-area .hero-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

section.sustainability .hero-area .hero-content {
	padding: 2.5rem;
}

@media(min-width: 768px) {

	section.sustainability .hero-area .hero-content {
		padding: 3rem 3.5rem;
		display: flex;
		flex-direction: column;
		justify-content: center
	}
}

section.sustainability .hero-area .hero-content h3 {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-family: var(--font-heading);
}

@media(min-width: 768px) {

	section.sustainability .hero-area .hero-content h3 {
		font-size: 2rem
	}
}

section.sustainability .hero-area .hero-content p {
	color: var(--primary-color);
	font-size: 0.95rem;
	line-height: 1.8;
	margin-bottom: 1.5rem;
}

section.sustainability .hero-area .hero-content .cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--secondary-color);
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

section.sustainability .hero-area .hero-content .cta-link:hover {
	gap: 1rem;
}

section.sustainability .hero-area .hero-content .cta-link .material-symbols-outlined {
	font-size: 20px;
}

section.sustainability .grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

@media(min-width: 768px) {

	section.sustainability .grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(min-width: 1024px) {

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

section.sustainability .card {
	background: white;
	border-radius: 8px;
	padding: 2.5rem 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

section.sustainability .card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	transform: translateY(-4px);
}

section.sustainability .card .icon {
	width: 60px;
	height: 60px;
	background: #F5F6FA;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

section.sustainability .card .icon .material-symbols-outlined {
	font-size: 32px;
	color: var(--background-sub);
}

section.sustainability .card h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1rem;
	font-family: var(--font-heading);
}

section.sustainability .card p {
	color: var(--primary-color);
	font-size: 0.95rem;
	line-height: 1.6;
}

section.sustainability .impact-section {
	margin-top: 4rem;
	padding: 3rem 2rem;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

section.sustainability .impact-section h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1.5rem;
	font-family: var(--font-heading);
}

section.sustainability .impact-section .impact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media(min-width: 768px) {

	section.sustainability .impact-section .impact-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

section.sustainability .impact-section .impact-item {
	display: flex;
	gap: 1.5rem;
}

section.sustainability .impact-section .impact-item .icon {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	background: #F5F6FA;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

section.sustainability .impact-section .impact-item .icon .material-symbols-outlined {
	font-size: 28px;
	color: var(--background-sub);
}

section.sustainability .impact-section .impact-item .content {
	flex: 1;
}

section.sustainability .impact-section .impact-item .content h4 {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
	font-family: var(--font-heading);
}

section.sustainability .impact-section .impact-item .content p {
	color: var(--primary-color);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* ./parts/index-science.html */

#science-preview {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	background-color: #ffffff;
}

.science-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 1280px;
	margin: 3rem auto 0;
	padding: 0 1.5rem;
}

@media (min-width: 768px) {

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

@media (min-width: 1024px) {

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

.science-card {
	background: #F5F6FA;
	padding: 2rem 1.5rem;
	border-radius: 8px;
	border-left: 4px solid var(--background-sub);
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.science-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.science-card .icon {
	font-size: 2.5rem;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.science-card h3 {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	color: var(--primary-color);
}

.science-card p {
	font-size: 0.9rem;
	color: #6B7280;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.science-card a {
	color: var(--background-sub);
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.3s;
}

.science-card a:hover {
	gap: 0.75rem;
}

.index-science-btn {
	text-align: center;
	margin-top: 4rem;
}

/* ./parts/index-story.html */

#story-preview {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	background-color: #F5F6FA;
}

.story-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 768px) {

	.story-container {
		grid-template-columns: 1fr 1fr;
		gap: 4rem
	}
}

.story-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.story-content h2 {
	font-family: var(--font-heading);
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
}

@media (min-width: 768px) {

	.story-content h2 {
		font-size: 2.5rem
	}
}

.story-content .subtitle-text {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 1rem;
}

.story-content p {
	color: #6B7280;
	line-height: 1.8;
	margin-bottom: 1.5rem;
	font-size: 1rem;
}

.story-content .story-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 2rem 0;
}

@media (min-width: 768px) {

	.story-content .story-features {
		grid-template-columns: repeat(3, 1fr)
	}
}

@media (max-width: 600px) {

	.story-content .story-features {
		grid-template-columns: 1fr
	}
}

.story-content .story-features .feature-item {
	padding: 1rem;
	border-radius: 8px;
	background-color: #F3F4F6;
	text-align: center;
}

.story-content .story-features .feature-item .index-story-icon {
	font-size: 2rem;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
}

.story-content .story-features .feature-item .feature-text {
	font-size: 0.9rem;
	color: var(--primary-color);
	font-weight: 600;
}

.story-content .cta-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--secondary-color);
	text-decoration: none;
	font-weight: 600;
	margin-top: 1.5rem;
	transition: all 0.3s;
}

.story-content .cta-link:hover {
	gap: 1rem;
}

.index-story-btn {
	text-align: right;
}

.index-story-btn .btn-outline {
	border: 2px solid var(--background-sub);
	color: var(--background-sub);
}

.index-story-btn .btn-outline:hover {
	border: 2px solid var(--background-sub);
	background-color: var(--background-sub);
	color: #ffffff;
}

/* ./parts/index-applications.html */

#applications-preview {
	padding-top: clamp(3rem, 5vw, 5rem);
	padding-bottom: clamp(3rem, 5vw, 5rem);
	background-color: #F3F4F6;
}

.applications-wrapper {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.applications-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 3rem;

}

@media (min-width: 768px) {

	.applications-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem
	}
}

.app-card {
	background: white;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	position: relative;
}

.app-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.app-card .app-image {
	width: 100%;
	height: 240px;
	background-color: #E5E7EB;
	overflow: hidden;
}

.app-card .app-image img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.app-card .app-content {
	padding: 2rem;
}

.app-card .app-content .app-category {
	color: var(--secondary-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
	margin-bottom: 0.5rem;
	display: block;
}

.app-card .app-content h3 {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 1rem;
}

.app-card .app-content p {
	color: #6B7280;
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.app-card .app-content .product-tag {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	background-color: #C6CDE7;
	color: var(--secondary-color);
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 600;
	margin-right: 0.5rem;
	margin-bottom: 1rem;
}

.user-icon-inline {
	position: absolute;
	bottom: 1.5rem;
	right: 1.5rem;
	width: 70px;
	height: 70px;
	background-color: #F5F6FA;
	color: var(--primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.user-icon-inline .material-symbols-outlined {
	font-size: 50px;
	font-variation-settings: 'FILL' 1;
}

.applications-cta {
	text-align: center;
	margin-top: 3rem;
}