/* ベース設定 */

:root {
	--color-text-main: #333333;
	--color-text-sub: #666666;
	/* ▼▼▼ 色変更：落ち着いたレモンイエロー ▼▼▼ */
	/* 文字や細い線に使っても見えにくくならないよう、少し濃いめのレモン色にしています */
	--color-accent: #D4BD00;
	/* ▼▼▼ 追加：ボタンの背景用（少し明るめのフレッシュなレモン色） ▼▼▼ */
	--color-accent-bg: #F2D900;
	--color-bg-gray: #F5F5F3;
	/* そのまま */
	--font-serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
	--font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
}

.only_sp {
	display: none;
}

@media screen and (max-width: 768px) {
	.only_sp {
		display: block;
	}
}

/* =========================================
    MV Section Layout
    ========================================= */

.top_mv_section {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 700px;
	overflow: hidden;
	background-color: var(--color-bg-gray);
	color: var(--color-text-main);
	font-family: var(--font-sans);
}

.top_mv_container {
	position: relative;
	z-index: 2;
	width: auto;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* =========================================
    Typography
    ========================================= */

.top_mv_title {
	margin-bottom: 60px;
	font-feature-settings: "palt";
}

.top_mv_copy_main {
	display: block;
	font-family: var(--font-serif);
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 24px;
	letter-spacing: 0.1em;
}

.top_mv_copy_lead {
	display: block;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.8;
	color: var(--color-text-sub);
	letter-spacing: 0.05em;
}

.top_mv_sp_only {
	display: none;
}

/* =========================================
    CTA Buttons (修正版)
   ========================================= */

.top_mv_cta_wrapper {
	display: flex;
	gap: 20px;
	margin-top: 40px;
	/* タイトルとの間隔 */
}

.top_mv_btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* 文字を中央揃え */
	text-align: center;
	width: 300px;
	/* 日本語が読みやすいよう少し幅広に */
	padding: 18px 24px;
	background-color: rgba(255, 255, 255, 0.85);
	/* 可読性のため少し濃く */
	border: 1px solid #ddd;
	text-decoration: none;
	transition: all 0.3s ease;
	backdrop-filter: blur(5px);
	border-radius: 4px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 上の大きい文字 */

.top_mv_btn_sub {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-text-sub);
	margin-bottom: 6px;
	/* メインとの間隔 */
	display: block;
	letter-spacing: 0.05em;
	position: relative;
}

.top_mv_btn .top_mv_btn_sub {
	color: #06c755;
}

.top_mv_btn.top_mv_btn--store .top_mv_btn_sub {
	color: var(--color-accent);
}

/* サブテキストの横に小さな装飾（吹き出しっぽく） */

.top_mv_btn--consult .top_mv_btn_sub::before {
	content: "●";
	color: #06c755;
	/* LINEっぽい緑 */
	font-size: 0.8em;
	margin-right: 5px;
}

.top_mv_btn--store .top_mv_btn_sub::before {
	content: "●";
	color: var(--color-accent);
	/* レモン色 */
	font-size: 0.8em;
	margin-right: 5px;
}

/* 下の大きい文字（メイン） */

.top_mv_btn_main {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-text-main);
	line-height: 1.3;
	letter-spacing: 0.05em;
	display: block;
}

/* ▼▼▼ ホバー時の挙動 ▼▼▼ */

.top_mv_btn:hover {
	background-color: var(--color-accent-bg);
	/* 明るいレモン色 */
	border-color: var(--color-accent-bg);
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(220, 200, 0, 0.25);
}

.top_mv_btn.top_mv_btn--consult:hover {
	background-color: rgb(6, 199, 85);
	border-color: rgb(6, 199, 85);
	box-shadow: 0 10px 20px rgba(6, 199, 85, 0.25);
}

/* ホバー時の文字色 */

.top_mv_btn:hover .top_mv_btn_sub {
	color: #f7f7f7;
	/* 薄くせず読みやすく */
}

.top_mv_btn:hover .top_mv_btn_main {
	color: #f7f7f7;
	/* くっきり黒 */
}

/* =========================================
    Responsive (SP)
   ========================================= */

@media screen and (max-width: 768px) {
	.top_mv_cta_wrapper {
		flex-direction: column;
		/* 縦並び */
		width: 100%;
		gap: 15px;
		margin-top: 30px;
	}
	.top_mv_btn {
		width: 100%;
		/* 横幅いっぱい */
		padding: 20px 15px;
	}
	.top_mv_btn_main {
		font-size: 1.2rem;
		/* スマホでも読みやすいサイズ */
	}
}

/* =========================================
    Scroll Indicator
    ========================================= */

.top_mv_scroll {
	position: absolute;
	bottom: 40px;
	left: 40px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	writing-mode: vertical-rl;
	color: var(--color-text-sub);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
}

.top_mv_scroll_line {
	display: block;
	width: 1px;
	height: 60px;
	background-color: var(--color-accent);
	/* ★ここをグレーからレモン色に変更してアクセントに */
	animation: top_mv_scroll_anim 2s infinite;
}

@keyframes top_mv_scroll_anim {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}
	50% {
		transform: scaleY(1);
		transform-origin: top;
	}
	50.1% {
		transform: scaleY(1);
		transform-origin: bottom;
	}
	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

/* =========================================
    Responsive (SP)
    ========================================= */

@media screen and (max-width: 768px) {
	.top_mv_section {
		height: calc(100vh - 70px);
		min-height: calc(100vh - 70px);
		padding-bottom: 60px;
	}
	.top_mv_container {
		padding: 20px 20px 0;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: calc(100vh - 70px);
	}
	.top_mv_copy_main {
		font-size: 2.2rem;
	}
	.top_mv_sp_only {
		display: inline;
	}
	.top_mv_cta_wrapper {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	.top_mv_btn {
		width: 100%;
		align-items: center;
		text-align: center;
	}
	.top_mv_scroll {
		display: none;
	}
}

/* =========================================
   Background Slider
   ========================================= */

.top_mv_slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.top_mv_slide_item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation: top_mv_fade_2items 10s infinite;
}

.top_mv_slide_item--01 {
	background-image: url('../img/top/top_slide01.png');
	animation-delay: 0s;
}

.top_mv_slide_item--02 {
	background-image: url('../img/top/top_slide02.png');
	animation-delay: 5s;
}

@keyframes top_mv_fade_2items {
	0% {
		opacity: 0;
		transform: scale(1.05);
		z-index: 2;
	}
	10% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	50% {
		opacity: 0;
		transform: scale(1);
		z-index: 1;
	}
	100% {
		opacity: 0;
		z-index: 1;
	}
}

.top_mv_slider::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* 白のフィルターを少し強めにして、レモン色を目立たせる */
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(2px);
	z-index: 3;
}

@media screen and (max-width: 768px) {
	.top_mv_slider {
		/* height: calc(100vh - 70px); */
	}
}

/* =========================================
   Alert Section (偽物注意喚起)
   ========================================= */

.top_alert_section {
	background-color: #FFF5F5;
	/* 薄い赤背景 */
	border: 1px solid #EE827C;
	padding: 20px 0;
	text-align: center;
	font-family: var(--font-sans);
	width: calc(100% - 40px);
	margin: 20px auto;
}

.top_alert_container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}

.top_alert_title {
	font-size: 1.6rem;
	font-weight: bold;
	color: #CC0000;
	/* 警告色 */
	margin-bottom: 8px;
	display: inline-block;
}

/* アイコンっぽくビックリマークをつける */

.top_alert_title::before {
	content: "!";
	display: inline-block;
	width: 24px;
	height: 24px;
	line-height: 24px;
	background-color: #CC0000;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	margin-right: 8px;
	font-weight: bold;
}

.top_alert_text {
	font-size: 1.4rem;
	color: #333;
	line-height: 1.6;
}

.top_alert_text strong {
	color: #CC0000;
	font-weight: bold;
	border-bottom: 1px solid #CC0000;
}

@media screen and (max-width: 768px) {
	.top_alert_title {
		font-size: 1.4rem;
		text-align: center;
	}
	.top_alert_text {
		font-size: 1.2rem;
		text-align: left;
	}
}

/* =========================================
   Concept Section
   ========================================= */

.top_concept_section {
	position: relative;
	padding: 120px 20px;
	/* 上下に余白を持たせる */
	background-color: #fff;
	/* ベースは白、またはMVと同じグレーでもOK */
	overflow: hidden;
	font-family: var(--font-sans);
}

/* 背景のレモン色のあしらい（参考画像の金色のモヤをCSSで表現） */

.top_concept_decoration {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	/* ぼかしを入れてふんわりさせる */
	z-index: 0;
	opacity: 0.6;
}

.top_concept_decoration--01 {
	top: -10%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, var(--color-accent-bg), transparent 70%);
}

.top_concept_decoration--02 {
	bottom: -10%;
	left: -10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, #ffeebb, transparent 70%);
	/* 少し薄めの黄色 */
}

.top_concept_container {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	/* カード幅を考慮して少し狭めに */
	margin: 0 auto;
}

/* タイトルエリア */

.top_concept_header {
	text-align: center;
	margin-bottom: 60px;
}

.top_concept_title_en {
	font-family: var(--font-serif);
	font-size: 3.5rem;
	/* 大きくエレガントに */
	color: var(--color-accent);
	/* 濃いレモン色 */
	margin-bottom: 8px;
	letter-spacing: 0.05em;
}

.top_concept_title_ja {
	display: block;
	font-size: 1.6rem;
	/* 16px */
	font-weight: 600;
	color: var(--color-text-main);
	letter-spacing: 0.1em;
}

/* 白いコンテンツボックス（カード） */

.top_concept_box {
	position: relative;
	background-color: #fff;
	border-radius: 30px;
	/* 角丸を大きめに */
	padding: 60px 80px 60px 60px;
	/* 右側に画像が来るので右パディング調整 */
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
	/* ふんわりした影 */
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 40px;
}

/* テキストエリア */

.top_concept_text_area {
	width: 60%;
	/* テキスト幅 */
	padding-right: 40px;
}

.top_concept_lead {
	font-family: var(--font-serif);
	font-size: 2.4rem;
	/* 24px */
	line-height: 1.6;
	color: var(--color-accent);
	margin-bottom: 40px;
	font-feature-settings: "palt";
}

.top_concept_body {
	margin-bottom: 40px;
}

.top_concept_p {
	font-size: 1.6rem;
	/* 16px確保 */
	line-height: 2;
	/* 読みやすく行間を広めに */
	color: var(--color-text-sub);
	margin-bottom: 24px;
	text-align: justify;
	/* 両端揃えできれいに */
}

.top_concept_p:last-child {
	margin-bottom: 0;
}

.top_concept_footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #eee;
	display: flex;
	gap: 20px;
	align-items: center;
}

.top_concept_brand {
	font-family: var(--font-serif);
	font-size: 1.8rem;
	color: var(--color-text-main);
}

.top_concept_company {
	font-size: 1.4rem;
	color: var(--color-text-sub);
}

/* 画像エリア（参考画像のように枠からはみ出させる） */

.top_concept_image_area {
	position: absolute;
	top: -40px;
	/* 上にはみ出す */
	right: -40px;
	/* 右にはみ出す */
	width: 35%;
	/* 画像の幅 */
	max-width: 320px;
	height: auto;
	z-index: 2;
}

.top_concept_figure {
	margin: 0;
	width: 100%;
	height: auto;
	border-radius: 20px;
	/* 画像も角丸 */
	overflow: hidden;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	background-color: #eee;
	/* 画像読み込み前の背景色 */
}

.top_concept_img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 3 / 4;
	/* 縦長比率 */
}

/* レモン色の装飾線（参考画像の左下にあるようなあしらい） */

.top_concept_box::before {
	content: "";
	position: absolute;
	bottom: 40px;
	left: -20px;
	width: 60px;
	height: 4px;
	background-color: var(--color-accent);
	border-radius: 2px;
}

/* =========================================
	 Responsive (SP)
	 ========================================= */

@media screen and (max-width: 768px) {
	.top_concept_section {
		padding: 60px 20px;
	}
	.top_concept_box {
		flex-direction: column-reverse;
		/* スマホでは画像を上に */
		padding: 40px 15px;
		margin-top: 60px;
		/* 画像がはみ出す分下げる */
	}
	.top_concept_text_area {
		width: 100%;
		padding-right: 0;
	}
	.top_concept_image_area {
		position: relative;
		top: -80px;
		/* 大きく上にずらしてアイコンのように見せる */
		right: auto;
		width: 180px;
		margin: 0 auto -40px;
		/* 下マージンでテキストとの距離調整 */
	}
	.top_concept_figure {
		border: 5px solid #fff;
		/* 画像の周りに白い縁取りを入れて切り抜き感を出す */
	}
	.top_concept_title_en {
		font-size: 2.8rem;
		margin-bottom: 0;
	}
	.top_concept_title_ja {
		display: block;
		font-size: 1.4rem;
	}
	.top_concept_lead {
		font-size: 2rem;
		text-align: center;
		margin-bottom: 20px;
	}
	.top_concept_p {
		font-size: 1.4rem;
		margin-bottom: 20px;
	}
	.top_concept_body {
		margin-bottom: 20px;
	}
	.top_concept_footer {
		margin-top: 20px;
	}
	.top_concept_box::before {
		bottom: 30px;
	}
}

/* =========================================
   Product Section (Lemon Bottle)
   ========================================= */

.top_product_section {
	position: relative;
	width: 100%;
	padding: 100px 0;
	overflow: hidden;
	font-family: var(--font-sans);
	display: flex;
	align-items: center;
}

/* 背景画像エリア */

.top_product_bg_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.top_product_bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	/* 画像が少しゆっくり動くパララックス効果（任意） */
	transform: scale(1.05);
}

/* 文字を読みやすくするための白いグラデーション */

.top_product_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.9) 60%);
}

.top_product_container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

/* --- 左側：ビジュアル --- */

.top_product_visual {
	position: relative;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 背面の黄色い円（ブランドカラーの強調） */

.top_product_circle {
	position: absolute;
	width: 500px;
	height: 500px;
	background-color: var(--color-accent-bg);
	/* 明るいレモン色 */
	border-radius: 50%;
	opacity: 0.2;
	filter: blur(40px);
	z-index: 0;
	/* ふわふわ動かす */
	animation: top_product_float 6s ease-in-out infinite;
}

@keyframes top_product_float {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-20px) scale(1.05);
	}
}

.top_product_figure {
	position: relative;
	z-index: 1;
	/* ボトル画像のサイズ調整 */
	height: auto;
	/* ボトルを少し傾けて動きを出す */
	transform: rotate(-5deg);
	transition: transform 0.5s ease;
}

/* ホバーでボトルが起き上がる演出 */

.top_product_section:hover .top_product_figure {
	transform: rotate(0deg) scale(1.05);
}

.top_product_img {
	width: 140px;
	height: auto;
	drop-shadow: 20px 30px 40px rgba(0, 0, 0, 0.3);
	/* リアルな影 */
}

.top_product_section--machine .top_product_img {
	max-width: 420px;
	width: 100%;
}

/* No.1バッジ */

.top_product_badge {
	position: absolute;
	top: 0;
	right: 20px;
	background: #fff;
	border: 1px solid var(--color-accent);
	padding: 15px;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	z-index: 2;
	transform: rotate(10deg);
}

.top_product_badge_text {
	font-family: var(--font-serif);
	font-size: 1.8rem;
	font-weight: bold;
	color: var(--color-accent);
	line-height: 1;
}

.top_product_badge_sub {
	font-size: 0.6rem;
	color: var(--color-text-sub);
	text-align: center;
	line-height: 1.2;
	margin-top: 4px;
}

/* --- 右側：コンテンツ --- */

.top_product_content {
	flex: 1;
	padding-left: 40px;
}

.top_product_label {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
	padding: 6px 16px;
	border-radius: 50px;
	margin-bottom: 24px;
	letter-spacing: 0.1em;
	background-color: #fff;
}

.top_product_title {
	font-family: var(--font-serif);
	font-size: 3.2rem;
	/* 32px */
	line-height: 1.4;
	color: var(--color-text-main);
	margin-bottom: 32px;
	font-feature-settings: "palt";
}

.top_product_highlight {
	background: linear-gradient(transparent 60%, var(--color-accent-bg) 60%);
	display: inline;
	padding-bottom: 2px;
}

.top_product_desc {
	font-size: 1.6rem;
	/* 16px */
	line-height: 2;
	color: var(--color-text-sub);
	margin-bottom: 40px;
}

/* ボタン（MVのスタイルを継承しつつ微調整） */

.top_product_btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 300px;
	padding: 20px 30px;
	background-color: var(--color-text-main);
	/* 黒背景で締める */
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	/* 少しシャープに */
	transition: all 0.3s ease;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.top_product_btn:hover {
	background-color: var(--color-accent);
	/* ホバーでレモン色 */
	transform: translateY(-3px);
	box-shadow: 0 15px 25px rgba(212, 189, 0, 0.3);
}

.top_product_btn_text {
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.top_product_btn_arrow {
	font-size: 1.4rem;
	transition: transform 0.3s ease;
}

.top_product_btn:hover .top_product_btn_arrow {
	transform: translateX(5px);
}

/* --- レスポンシブ (SP) --- */

@media screen and (max-width: 768px) {
	.top_product_section {
		padding: 60px 0;
		min-height: auto;
	}
	.top_product_overlay {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.95) 40%);
	}
	.top_product_container {
		flex-direction: column;
		padding: 0 20px;
		gap: 40px;
	}
	.top_product_visual {
		width: 100%;
	}
	.top_product_circle {
		width: 300px;
		height: 300px;
	}
	.top_product_content {
		padding-left: 0;
		text-align: center;
	}
	.top_product_title {
		font-size: 2.4rem;
	}
	.top_product_desc {
		text-align: justify;
		font-size: 1.4rem;
	}
	.top_nutrition_btn_area {
		display: flex;
		justify-content: center;
	}
	.top_product_btn {
		width: auto;
		justify-content: center;
		gap: 10px;
	}
	.top_product_btn_text {
		font-size: 1.4rem;
	}
	.top_product_img {
		width: 100px;
	}
}

/* =========================================
   Product Section (Sil Body Cream)
   ========================================= */

/* レモンボトル用のスタイルを継承しつつ、
   このセクションだけ色を薄ピンクに上書きする */

.top_product_section--sil {
	/* ▼▼▼ 色の上書き（ここがポイント） ▼▼▼ */
	/* 薄ピンクのアクセントカラー */
	--color-accent: #E6Aac4;
	/* 背景用の明るいピンク */
	--color-accent-bg: #FDEEF4;
	/* ボタンの文字色も見やすいように調整（濃いピンクグレー） */
	--color-text-main: #5E4B53;
}

/* 反転時のボトルの傾きを逆にする（お好みで） */

.top_product_section--reverse .top_product_figure {
	transform: rotate(5deg);
	/* レモンは-5degだったので逆に */
}

.top_product_section--reverse:hover .top_product_figure {
	transform: rotate(0deg) scale(1.05);
}

/* 反転時のバッジ位置調整 */

.top_product_section--reverse .top_product_badge {
	right: auto;
	left: 20px;
	/* 左側に配置 */
	transform: rotate(-10deg);
}

/* --- レスポンシブ (SP) --- */

@media screen and (max-width: 768px) {
	/* スマホでは左右反転を解除し、上（画像）→下（テキスト）の順に戻す */
	.top_product_section--reverse .top_product_container {
		flex-direction: column-reverse;
	}
	.top_product_section--reverse .top_product_content {
		padding-right: 0;
	}
}

/* =========================================
   Product Section (HD Super EX Alpha)
   ========================================= */

.top_product_section--hd {
	/* ▼▼▼ 色の上書き：ヘルシーな薄い赤（ブラッドオレンジ系） ▼▼▼ */
	/* アクセントカラー：少し彩度を抑えた朱色・サーモンピンク系 */
	--color-accent: #EE827C;
	/* 背景用：ごく薄い赤 */
	--color-accent-bg: #FFF0F0;
	/* ボタンの文字色：赤背景に合う濃い赤茶色 */
	--color-text-main: #6E3D3D;
}

/* HDセクションだけの特別演出：円のアニメーションを変更 */

/* 「代謝のスイッチが入る」イメージで、ふわふわではなく「ドクン、ドクン」と脈打つ動きに */

.top_product_section--hd .top_product_circle {
	animation: top_product_pulse 3s ease-in-out infinite;
	opacity: 0.3;
	/* 少し濃いめにしてエネルギー感を出す */
}

@keyframes top_product_pulse {
	0% {
		transform: scale(0.95);
		opacity: 0.3;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.15;
	}
	100% {
		transform: scale(0.95);
		opacity: 0.3;
	}
}

/* バッジの角度を少し変えてリズムを出す */

.top_product_section--hd .top_product_badge {
	transform: rotate(-10deg);
	/* レモンとは逆向きに */
}

.top_product_section--hd .top_product_img {
	width: 450px;
}

/* 注釈（※）のスタイル */

.top_product_note {
	font-size: 1.2rem;
	color: #999;
	/* 目立ちすぎないグレー */
	margin-top: -20px;
	/* 説明文との距離を詰める */
	margin-bottom: 30px;
	line-height: 1.4;
	display: block;
}

/* スマホ表示時の調整 */

@media screen and (max-width: 768px) {
	.top_product_figure {
		transform: none;
	}
	.top_product_section--reverse .top_product_figure {
		transform: none;
	}
	.top_product_note {
		text-align: left;
		/* スマホでは左寄せで見やすく */
		margin-top: -10px;
	}
	.top_product_section--hd .top_product_img {
		width: 300px;
	}
}

/* =========================================
   Lineup Section (Recommended Items)
   ========================================= */

.top_lineup_section {
	position: relative;
	padding: 100px 0;
	overflow: hidden;
	font-family: var(--font-sans);
}

/* 背景設定 */

.top_lineup_bg_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.top_lineup_bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/* 商品を見やすくするための白透過レイヤー */

.top_lineup_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.6);
}

.top_lineup_container {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ヘッダー */

.top_lineup_header {
	text-align: center;
	margin-bottom: 60px;
}

.top_lineup_title_en {
	font-family: var(--font-serif);
	font-size: 3rem;
	color: #D4BD00;
	/* レモン色 */
	margin-bottom: 8px;
	letter-spacing: 0.05em;
}

.top_lineup_title_ja {
	font-size: 1.4rem;
	color: var(--color-text-sub);
	letter-spacing: 0.1em;
}

/* スライダーカードのデザイン */

.top_lineup_slider_wrapper {
	margin: 0 -15px;
	/* スライド間の余白調整 */
}

.top_lineup_item {
	padding: 0 15px;
	width: 400px;
}

.top_lineup_card {
	display: block;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	height: 100%;
	/* 高さ揃え */
}

.top_lineup_card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(212, 189, 0, 0.2);
	/* 黄色っぽい影 */
}

/* 画像エリア：正方形にトリミングして統一感を出す */

.top_lineup_img_area {
	position: relative;
	width: 100%;
	padding-top: 100%;
	/* アスペクト比 1:1 */
	background-color: #f9f9f9;
	overflow: hidden;
}

.top_lineup_img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* または contain (商品全体を見せたい場合) */
	transition: transform 0.5s ease;
}

.top_lineup_card:hover .top_lineup_img {
	transform: translate(-50%, -50%) scale(1.05);
}

/* テキストエリア */

.top_lineup_body {
	padding: 20px;
	text-align: center;
}

.top_lineup_brand {
	font-size: 1.1rem;
	color: #999;
	margin-bottom: 8px;
	font-family: var(--font-serif);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.top_lineup_name {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-text-main);
	margin-bottom: 12px;
	line-height: 1.4;
	/* 2行で省略する設定 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.top_lineup_price {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-text-main);
	font-family: "Helvetica Neue", Arial, sans-serif;
}

.top_lineup_tax {
	font-size: 1rem;
	font-weight: normal;
	color: #999;
}

/* Slick Custom Style (矢印のカスタマイズ) */

.slick-prev, .slick-next {
	width: 50px;
	height: 50px;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	z-index: 2;
	transition: all 0.3s ease;
}

.slick-prev:hover, .slick-next:hover {
	background-color: #D4BD00;
	/* ホバーでレモン色 */
}

.slick-prev:before, .slick-next:before {
	color: #333;
	/* 矢印の色 */
	font-size: 24px;
	opacity: 1;
}

.slick-prev:hover:before, .slick-next:hover:before {
	color: #fff;
}

.slick-prev {
	left: -50px;
}

.slick-next {
	right: -50px;
}

/* ドット（ページネーション） */

.slick-dots li button:before {
	font-size: 10px;
	color: #D4BD00;
}

.slick-dots li.slick-active button:before {
	color: #D4BD00;
}

/* View All ボタン */

.top_lineup_btn_area {
	margin-top: 50px;
	text-align: center;
}

.top_lineup_more_btn {
	display: inline-block;
	padding: 12px 40px;
	border: 1px solid #333;
	color: #333;
	text-decoration: none;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	transition: all 0.3s ease;
}

.top_lineup_more_btn:hover {
	background-color: #333;
	color: #fff;
}

/* レスポンシブ (SP) */

@media screen and (max-width: 768px) {
	.top_lineup_section {
		padding: 60px 0;
	}
	.slick-prev, .slick-next {
		display: none !important;
		/* スマホは矢印消してスワイプのみ */
	}
	.top_lineup_container {
		padding: 0 20px;
	}
	.top_lineup_slider_wrapper {
		margin: 0;
	}
	.top_lineup_card {
		margin: 0 10px;
		/* カード間の隙間 */
	}
	.top_lineup_item {
		max-width: 250px;
		width: 100%;
	}
	.top_lineup_header {
		margin-bottom: 40px;
	}
}

/* =========================================
   Useful Info Section
   ========================================= */

.top_useful_section {
	position: relative;
	padding: 100px 0;
	overflow: hidden;
	font-family: var(--font-sans);
	background-color: #f9f9f9;
	/* 背景画像読み込み前の保険の色 */
}

/* 背景設定 */

.top_useful_bg_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.top_useful_bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.top_useful_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	/* 白くフェードさせる */
}

.top_useful_container {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ヘッダー */

.top_useful_header {
	text-align: center;
	margin-bottom: 60px;
}

.top_useful_title_en {
	font-family: var(--font-serif);
	font-size: 3rem;
	color: #D4BD00;
	/* レモン色 */
	margin-bottom: 8px;
	letter-spacing: 0.05em;
}

.top_useful_title_ja {
	font-size: 1.4rem;
	color: var(--color-text-sub);
	letter-spacing: 0.1em;
	font-weight: 600;
}

/* 記事リスト（グリッドレイアウト） */

.top_useful_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* PCは3列 */
	gap: 30px;
	/* カード間の余白 */
	margin-bottom: 60px;
}

/* 記事カード */

.top_useful_card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	height: 100%;
}

.top_useful_card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* サムネイルエリア */

.top_useful_thumb {
	position: relative;
	width: 100%;
	padding-top: 66.6%;
	/* アスペクト比 3:2 (一般的なブログ画像比率) */
	overflow: hidden;
	background-color: #eee;
}

.top_useful_img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.top_useful_card:hover .top_useful_img {
	transform: translate(-50%, -50%) scale(1.05);
	/* ホバーで拡大 */
}

/* カテゴリラベル */

.top_useful_cat {
	position: absolute;
	top: 15px;
	left: 15px;
	background-color: #D4BD00;
	/* レモン色 */
	color: #fff;
	font-size: 1.1rem;
	padding: 4px 12px;
	border-radius: 20px;
	z-index: 1;
	font-weight: 600;
}

/* テキストエリア */

.top_useful_body {
	flex: 1;
	/* 高さを揃えるために伸長させる */
	padding: 24px;
	display: flex;
	flex-direction: column;
}

.top_useful_date {
	font-size: 1.2rem;
	color: #999;
	margin-bottom: 12px;
	font-family: "Helvetica Neue", Arial, sans-serif;
}

.top_useful_ttl {
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--color-text-main);
	line-height: 1.5;
	margin: 0;
	/* 3行で省略 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ボタンエリア */

.top_useful_btn_area {
	text-align: center;
}

.top_useful_more_btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 40px;
	background-color: #fff;
	border: 1px solid #D4BD00;
	color: #D4BD00;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s ease;
	min-width: 240px;
}

.top_useful_more_btn:hover {
	background-color: #D4BD00;
	color: #fff;
}

.top_useful_btn_text {
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.top_useful_btn_arrow {
	font-size: 1.4rem;
	transition: transform 0.3s ease;
}

.top_useful_more_btn:hover .top_useful_btn_arrow {
	transform: translateX(5px);
}

/* レスポンシブ (SP) */

@media screen and (max-width: 768px) {
	.top_useful_section {
		padding: 60px 0;
	}
	.top_useful_container {
		padding: 0 20px;
	}
	/* スマホは1列表示 */
	.top_useful_list {
		grid-template-columns: 1fr;
		gap: 20px;
		max-width: 300px;
		margin: 0 auto 40px;
	}
	/* スマホでは画像を少し小さくしてテキストとのバランスを取る */
	.top_useful_card {
		flex-direction: row;
		/* 横並びにする案もありますが、今回はカード型を維持 */
	}
	.top_useful_ttl {
		font-size: 1.4rem;
		-webkit-line-clamp: 2;
		/* スマホは2行で省略 */
	}
	.top_useful_more_btn {
		width: auto;
		justify-content: center;
		gap: 10px;
	}
	.top_useful_header {
		text-align: center;
		margin-bottom: 20px;
	}
	/* 記事カード */
	.top_useful_card {
		display: block;
	}
	.top_useful_body {
		padding: 20px 15px;
	}
	.top_useful_thumb {
		padding-top: 46.6%;
	}
}

/* =========================================
   Access & Showroom Section
   ========================================= */

.top_access_section {
	position: relative;
	padding: 100px 0;
	overflow: hidden;
	font-family: var(--font-sans);
}

/* 背景設定 */

.top_access_bg_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.top_access_bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	filter: blur(2px);
	/* 少しぼかして奥行きを出す */
}

.top_access_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.85);
	/* 白くフェードさせる */
}

.top_access_container {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ヘッダー */

.top_access_header {
	text-align: center;
	margin-bottom: 60px;
}

.top_access_title_en {
	font-family: var(--font-serif);
	font-size: 3rem;
	color: #D4BD00;
	/* レモン色 */
	margin-bottom: 8px;
	letter-spacing: 0.05em;
}

.top_access_title_ja {
	font-size: 1.4rem;
	color: var(--color-text-sub);
	letter-spacing: 0.1em;
	font-weight: 600;
}

/* コンテンツエリア（2カラム） */

.top_access_body {
	display: flex;
	justify-content: space-between;
	gap: 60px;
	align-items: flex-start;
}

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

.top_access_info {
	flex: 1;
	max-width: 45%;
}

.top_access_office_name {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-text-main);
	margin-bottom: 24px;
	font-family: var(--font-serif);
	position: relative;
	padding-left: 20px;
}

/* オフィス名の左にレモン色のアクセント線 */

.top_access_office_name::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 100%;
	background-color: #D4BD00;
	border-radius: 2px;
}

.top_access_address_block {
	margin-bottom: 30px;
}

.top_access_text {
	font-size: 1.6rem;
	line-height: 2;
	color: var(--color-text-main);
}

.top_access_note {
	font-size: 1.4rem;
	color: var(--color-text-sub);
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid #ddd;
	margin-bottom: 40px;
}

/* ボタン（他セクションと共通デザイン） */

.top_access_btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 30px;
	background-color: #333;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s ease;
	width: 100%;
	max-width: 320px;
}

.top_access_btn:hover {
	background-color: #D4BD00;
}

.top_access_btn_text {
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.top_access_btn_arrow {
	font-size: 1.4rem;
}

/* 右側：ビジュアル＆マップ */

.top_access_visual {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* ショールーム画像 */

.top_access_figure {
	margin: 0;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.top_access_img {
	width: 100%;
	height: auto;
	display: block;
}

/* Googleマップ（レスポンシブ対応） */

.top_access_map_wrapper {
	position: relative;
	width: 100%;
	padding-top: 76.25%;
	/* アスペクト比 16:9 */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	border: 2px solid #fff;
	/* 白い枠を付けて清潔感 */
}

.top_access_map_wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/* レスポンシブ (SP) */

@media screen and (max-width: 768px) {
	.top_access_section {
		padding: 60px 0;
	}
	.top_access_container {
		padding: 0 20px;
	}
	.top_access_body {
		display: block;
		gap: 40px;
	}
	.top_access_info {
		max-width: 100%;
		display: table;
		margin: 0 auto;
	}
	.top_access_btn {
		max-width: auto;
		width: auto;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}
	.top_access_map_wrapper {
		padding-top: 300px;
	}
	.top_access_office_name {
		font-size: 2rem;
		margin-bottom: 20px;
		padding-left: 15px;
	}
	.top_access_text {
		font-size: 1.4rem;
	}
	.top_access_note {
		font-size: 1.3rem;
		padding: 10px;
	}
	.top_access_visual {
		margin-top: 40px;
	}
}

/* =========================================
   News Section
   ========================================= */

.top_news_section {
	position: relative;
	padding: 80px 0;
	overflow: hidden;
	font-family: var(--font-sans);
}

/* 背景設定 */

.top_news_bg_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.top_news_bg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0.8;
	/* 少し背景を薄くする */
}

.top_news_container {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	/* テキストメインなので少し幅を絞る */
	margin: 0 auto;
	padding: 0 40px;
}

/* レイアウト：左に見出し、右にリスト（PC時） */

.top_news_inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 60px;
}

/* 見出しエリア */

.top_news_header {
	width: 200px;
	padding-top: 10px;
	/* リストとの高さ合わせ */
}

.top_news_title_en {
	font-family: var(--font-serif);
	font-size: 3.5rem;
	color: var(--color-accent);
	margin-bottom: 8px;
	letter-spacing: 0.05em;
}

.top_news_title_ja {
	font-size: 1.2rem;
	color: var(--color-text-sub);
	letter-spacing: 0.1em;
	font-weight: 600;
}

/* ニュースリストエリア */

.top_news_list {
	flex: 1;
	width: 100%;
}

/* ニュースアイテム（行） */

.top_news_item {
	display: flex;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid #ddd;
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
}

/* 最初の線 */

.top_news_item:first-child {
	border-top: 1px solid #ddd;
}

/* ホバー時の挙動 */

.top_news_item:hover {
	background-color: rgba(255, 255, 255, 0.5);
	/* 背景色変化（任意） */
}

/* ホバー時にタイトル色を変える */

.top_news_item:hover .top_news_ttl {
	color: #D4BD00;
}

/* 日付エリア */

.top_news_meta {
	width: 120px;
	flex-shrink: 0;
	/* 縮まないように */
}

.top_news_date {
	font-size: 1.4rem;
	color: #999;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
}

/* タイトルエリア */

.top_news_ttl {
	flex: 1;
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--color-text-main);
	margin: 0;
	padding-right: 20px;
	line-height: 1.6;
	transition: color 0.3s ease;
}

/* 矢印 */

.top_news_arrow {
	font-size: 1.2rem;
	color: #D4BD00;
	opacity: 0;
	/* 通常時は消しておく、または薄くする */
	transform: translateX(-10px);
	transition: all 0.3s ease;
}

.top_news_item:hover .top_news_arrow {
	opacity: 1;
	transform: translateX(0);
}

/* 一覧を見るボタン（リストの下に配置） */

.top_news_btn_area {
	text-align: right;
	margin-top: 20px;
	width: 100%;
	/* スマホレイアウト考慮 */
	display: none;
	/* デフォルトでは隠す、デザインに合わせて表示 */
}

.top_news_more_link {
	font-size: 1.2rem;
	color: var(--color-text-sub);
	text-decoration: none;
	border-bottom: 1px solid var(--color-text-sub);
	padding-bottom: 2px;
	transition: all 0.3s ease;
}

.top_news_more_link:hover {
	color: #D4BD00;
	border-color: #D4BD00;
}

/* レスポンシブ (SP) */

@media screen and (max-width: 768px) {
	.top_news_section {
		padding: 40px 0 60px;
	}
	.top_news_inner {
		flex-direction: column;
		/* 縦並び */
		gap: 30px;
	}
	.top_news_header {
		width: 100%;
		text-align: left;
		padding-top: 0;
		margin-bottom: 10px;
	}
	.top_news_title_en {
		font-size: 2.8rem;
		margin-bottom: 0;
		letter-spacing: 0.05em;
	}
	.top_news_item {
		flex-wrap: wrap;
		/* 長いタイトル対策 */
		padding: 15px 0;
	}
	.top_news_meta {
		width: 100%;
		/* 日付を上に */
		margin-bottom: 4px;
	}
	.top_news_date {
		font-size: 1.2rem;
	}
	.top_news_ttl {
		font-size: 1.4rem;
		width: 100%;
		padding-right: 0;
	}
	.top_news_arrow {
		display: none;
		/* スマホでは矢印非表示 */
	}
}

/* =========================================
   Nutrition Support Section
   ========================================= */

.top_nutrition_section {
	padding: 100px 0;
	background-color: #F2F9F7;
	/* 非常に薄いミントグリーン（健康的なイメージ） */
	font-family: var(--font-sans);
	position: relative;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.top_nutrition_container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ヘッダー */

.top_nutrition_header {
	text-align: center;
	margin-bottom: 60px;
}

.top_nutrition_title_en {
	font-family: var(--font-serif);
	font-size: 3rem;
	color: #4A6E68;
	/* テーマカラーのグリーン（またはレモン色でも可） */
	margin-bottom: 8px;
	letter-spacing: 0.05em;
}

.top_nutrition_title_ja {
	font-size: 1.4rem;
	color: var(--color-text-sub);
	letter-spacing: 0.1em;
	font-weight: 600;
}

/* コンテンツエリア（左右カラム） */

.top_nutrition_content {
	display: flex;
	align-items: center;
	gap: 60px;
	justify-content: space-between;
}

/* 左側：ビジュアル */

.top_nutrition_visual {
	position: relative;
	flex: 1;
	max-width: 45%;
}

.top_nutrition_figure {
	margin: 0;
	border-radius: 20px 0 20px 0;
	/* 角丸を対角線上に */
	overflow: hidden;
	box-shadow: 0 15px 30px rgba(74, 110, 104, 0.1);
}

.top_nutrition_img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s ease;
}

.top_nutrition_visual:hover .top_nutrition_img {
	transform: scale(1.05);
}

/* 資格バッジ */

.top_nutrition_badge {
	position: absolute;
	bottom: -20px;
	right: -20px;
	background-color: #fff;
	border: 1px solid #4A6E68;
	padding: 15px 25px;
	border-radius: 50px;
	/* カプセル型 */
	text-align: center;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.top_nutrition_badge .badge_sub {
	display: block;
	font-size: 1.1rem;
	color: #4A6E68;
	margin-bottom: 2px;
}

.top_nutrition_badge .badge_main {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-text-main);
	letter-spacing: 0.05em;
}

/* 右側：テキストエリア */

.top_nutrition_text_area {
	flex: 1;
}

.top_nutrition_catch {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 30px;
	font-family: var(--font-serif);
	color: #4A6E68;
}

.top_nutrition_catch .highlight {
	background: linear-gradient(transparent 70%, #D4BD00 70%);
	/* 黄色のマーカー */
	/* またはグリーンのマーカーなら #CDE8E3 */
}

.top_nutrition_desc {
	font-size: 1.5rem;
	line-height: 2;
	color: var(--color-text-sub);
	margin-bottom: 40px;
	text-align: justify;
}

.top_nutrition_desc strong {
	color: #4A6E68;
	font-weight: 700;
	border-bottom: 1px solid #4A6E68;
}

/* ボタン */

.top_nutrition_btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 40px;
	background-color: #fff;
	border: 1px solid #4A6E68;
	color: #4A6E68;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s ease;
	min-width: 320px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.top_nutrition_btn_area .top_product_btn:hover {
	background-color: #4A6E68;
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(74, 110, 104, 0.2);
}

.btn_text {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.btn_arrow {
	font-size: 1.4rem;
}

/* レスポンシブ (SP) */

@media screen and (max-width: 768px) {
	.top_nutrition_section {
		padding: 60px 0;
	}
	.top_nutrition_container {
		padding: 0 20px;
	}
	.top_nutrition_content {
		flex-direction: column-reverse;
		gap: 20px;
	}
	.top_nutrition_visual {
		max-width: 300px;
		width: 100%;
		margin: 0 auto 20px;
	}
	.top_nutrition_badge {
		right: 0;
		bottom: -15px;
	}
	.top_nutrition_catch {
		font-size: 2rem;
		text-align: center;
	}
	.top_nutrition_desc {
		font-size: 1.4rem;
		margin-bottom: 20px;
	}
	.top_nutrition_btn {
		width: 100%;
	}
	.top_nutrition_header {
		margin-bottom: 20px;
	}
}

/* =========================================
   Product Section (Machines)
   ========================================= */

.top_product_section--machine {
	/* ▼▼▼ 色の上書き：クールなシルバーグレー ▼▼▼ */
	/* アクセントカラー：少し青みがかったグレー */
	--color-accent: #78909C;
	/* 背景用：明るいグレー */
	--color-accent-bg: #F5F7F8;
	/* ボタンの文字色：濃いグレー */
	--color-text-main: #37474F;
}

/* Machineセクションだけの演出：円をゆっくり回転 */

.top_product_section--machine .top_product_circle {
	animation: top_product_rotate 20s linear infinite;
	opacity: 0.4;
	/* 金属っぽいグラデーションに変更 */
	background: conic-gradient(from 0deg, #F5F7F8, #CFD8DC, #F5F7F8);
	filter: blur(30px);
}

@keyframes top_product_rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* 反転時の画像の傾きをなくす*/

.top_product_section--machine.top_product_section--reverse .top_product_figure {
	transform: none;
}

/* 取扱機器リストのデザイン */

.top_product_machine_list {
	position: absolute;
	bottom: -90px;
	left: -20px;
	/* 左下に配置 */
	background: #fff;
	border: 1px solid var(--color-accent);
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	z-index: 2;
	min-width: 200px;
}

.machine_list_title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-accent);
	margin-bottom: 10px;
	text-align: center;
}

.top_product_machine_list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.top_product_machine_list li {
	font-size: 1.1rem;
	color: var(--color-text-main);
	background-color: var(--color-accent-bg);
	padding: 4px 10px;
	border-radius: 20px;
	font-weight: 500;
}

/* レスポンシブ (SP) */

@media screen and (max-width: 768px) {
	.top_product_machine_list {
		position: static;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: -30px;
		max-width: 400px;
	}
	.top_product_section--machine .top_product_visual {
		flex-direction: column;
	}
}

/* =========================================
   Agency Banner (レモンボトル画像入り版)
   ========================================= */

.top_agency_banner {
	/* 背景を黒から、白→淡いレモン色のグラデーションに変更 */
	background: linear-gradient(135deg, #ffffff 0%, #fffce0 100%);
	padding: 50px 0;
	color: #333;
	/* 文字色を黒に */
	font-family: var(--font-sans);
	border-top: 4px solid #D4BD00;
	/* 上のラインを少し太く強調 */
	border-bottom: 1px solid #eee;
	/* 下に区切り線 */
	overflow: hidden;
}

.top_agency_banner_inner {
	max-width: 900px;
	/* 画像が入るので少し幅を広げる */
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	/* 要素間の間隔 */
}

/* --- テキスト --- */

.top_agency_text_group {
	flex: 2;
	/* テキストエリアを広めに */
}

.top_agency_title .en {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.4rem;
	color: #D4BD00;
	letter-spacing: 0.05em;
	margin-bottom: 5px;
	font-weight: 700;
}

.top_agency_title .ja {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.3;
}

.top_agency_message {
	font-size: 1.3rem;
	line-height: 1.8;
	color: #666;
	margin-top: 15px;
}

/* --- 画像（追加） --- */

.top_agency_figure {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	position: relative;
}

/* ボトルの後ろに光の演出を入れる */

.top_agency_figure::before {
	content: '';
	position: absolute;
	width: 150px;
	height: 150px;
	background: #D4BD00;
	border-radius: 50%;
	filter: blur(50px);
	opacity: 0.3;
	z-index: 0;
}

.top_agency_img {
	width: 100%;
	max-width: 80px;
	/* 画像サイズ調整 */
	height: auto;
	position: relative;
	z-index: 1;
	transform: rotate(-5deg);
	/* 少し傾けて動きを出す */
	drop-shadow: 0 10px 20px rgba(212, 189, 0, 0.4);
	/* 影をつけて立体感 */
}

/* --- ボタン --- */

.top_agency_btn_compact {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #D4BD00;
	color: #000;
	font-weight: 700;
	font-size: 1.4rem;
	padding: 18px 30px;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.3s ease;
	white-space: nowrap;
	box-shadow: 0 5px 15px rgba(212, 189, 0, 0.3);
	max-width: 280px;
	/* ボタン幅を制限 */
}

.top_agency_btn_compact:hover {
	background-color: #fff;
	color: #D4BD00;
	border: 1px solid #D4BD00;
	transform: translateY(-3px);
}

/* レスポンシブ (SP) */

@media screen and (max-width: 768px) {
	.top_agency_banner {
		padding: 40px 0;
	}
	.top_agency_banner_inner {
		flex-direction: column;
		/* スマホでは縦並び */
		text-align: center;
		gap: 25px;
	}
	/* スマホでは画像を一番上に持ってくる */
	.top_agency_figure {
		order: -1;
		margin-bottom: -10px;
	}
	.top_agency_img {
		max-width: 80px;
		/* スマホでの画像サイズ */
	}
	.top_agency_title .ja {
		font-size: 1.8rem;
	}
	.sp_only {
		display: inline;
		/* タイトルを改行させる */
	}
	.top_agency_message {
		font-size: 1.2rem;
		text-align: left;
	}
	.top_agency_btn_compact {
		width: 100%;
		max-width: none;
		padding: 15px;
	}
}