/* ---------------------------------------------------------
カラーパレット & フォント設定
--------------------------------------------------------- */
:root {
	--font-color-base: #fff;
	--font-color-accent: #C8881C;
	--font-body: 'Kiwi Maru', sans-serif;
	--font-heading: 'Limelight', cursive;
	--btn-color-text: #333;
	--btn-color-bg: #09424F;

	/* line-heightの上下の余白（ハーフ・レディング）を打ち消す */
	--leading-trim: calc((1em - 1lh) / 2);

	/* フォントサイズ */
	--font-size_8: 0.5rem;
	--font-size_9: 0.5625rem;
	--font-size_10: 0.625rem;
	--font-size_11: 0.6875rem;
	--font-size_12: 0.75rem;
	--font-size_13: 0.8125rem;
	--font-size_14: 0.875rem;
	--font-size_15: 0.9375rem;
	--font-size_16: 1rem;
	--font-size_17: 1.0625rem;
	--font-size_18: 1.125rem;
	--font-size_19: 1.1875rem;
	--font-size_20: 1.25rem;
	--font-size_21: 1.3125rem;
	--font-size_22: 1.375rem;
	--font-size_23: 1.4375rem;
	--font-size_24: 1.5rem;
	--font-size_25: 1.5625rem;
	--font-size_26: 1.625rem;
	--font-size_27: 1.6875rem;
	--font-size_28: 1.75rem;
	--font-size_29: 1.8125rem;
	--font-size_30: 1.875rem;
	--font-size_31: 1.9375rem;
	--font-size_32: 2rem;
	--font-size_33: 2.0625rem;
	--font-size_34: 2.125rem;
	--font-size_35: 2.1875rem;
	--font-size_36: 2.25rem;
	--font-size_37: 2.3125rem;
	--font-size_38: 2.375rem;
	--font-size_39: 2.4375rem;
	--font-size_40: 2.5rem;
	--font-size_41: 2.5625rem;
	--font-size_42: 2.625rem;
	--font-size_43: 2.6875rem;
	--font-size_44: 2.75rem;
	--font-size_45: 2.8125rem;
	--font-size_46: 2.875rem;
	--font-size_47: 2.9375rem;
	--font-size_48: 3rem;
	--font-size_49: 3.0625rem;
	--font-size_50: 3.125rem;
	--font-size_51: 3.1875rem;
	--font-size_52: 3.25rem;
	--font-size_53: 3.3125rem;
	--font-size_54: 3.375rem;
	--font-size_55: 3.4375rem;
	--font-size_56: 3.5rem;
	--font-size_57: 3.5625rem;
	--font-size_58: 3.625rem;
	--font-size_59: 3.6875rem;
	--font-size_60: 3.75rem;
	--font-size_61: 3.8125rem;
	--font-size_62: 3.875rem;
	--font-size_63: 3.9375rem;
	--font-size_64: 4rem;
	--font-size_65: 4.0625rem;
	--font-size_66: 4.125rem;
	--font-size_67: 4.1875rem;
	--font-size_68: 4.25rem;
	--font-size_69: 4.3125rem;
	--font-size_70: 4.375rem;
	--font-size_71: 4.4375rem;
	--font-size_72: 4.5rem;
	--font-size_73: 4.5625rem;
	--font-size_74: 4.625rem;
	--font-size_75: 4.6875rem;
	--font-size_76: 4.75rem;
	--font-size_77: 4.8125rem;
	--font-size_78: 4.875rem;
	--font-size_79: 4.9375rem;
	--font-size_80: 5rem;
}

/* -------------------------------------------------------------------------------
	初期設定
--------------------------------------------------------------------------------*/
html {
	font-size: 100%;
	scroll-behavior: smooth;
	scroll-padding: clamp(100px, 10vw, 125px);
}

body {
	line-height: 2.5;
	color: var(--font-color);
	background-color: #f8f9fa;
	font-family: var(--font-body);
}

p {
	font-size: clamp(var(--font-size_12), 1.9vw, var(--font-size_16));
	line-height: 2;
}

img {
	width: 100%;
	height: 100%;
	max-width: 100%;
}

a {
	transition: all .2s;
}

a:hover {
	cursor: pointer;
}

/* @media (hover: hover) and (pointer: fine) {
	a:hover {
		cursor: pointer;
		opacity: .7;
	}
} */

/* タッチ環境では hover 効果をキャンセル */
/* @media (hover: none) {
	a:hover {
		opacity: 1;
	}
} */


/* ---------------------------------------------------------
	共通レイアウト
----------------------------------------------------------*/
.contents_wrap {
	margin: 0 auto;
	max-width: 1440px;
	padding: clamp(70px, 9vw, 120px) clamp(20px, 5vw, 120px);
}


/* ---------------------------------------------------------
	汎用パーツ
----------------------------------------------------------*/
/* --- ディスプレイサイズで表示・非表示を切り分ける --- */
/* 基本は全部隠す */
.sp_only,
.sp_tablet_only,
.tablet_pc_only,
.pc_only {
	display: none;
}

/* 〜480px：スマホ */
@media (max-width: 480px) {
	.sp_only {
		display: block;
	}

	.sp_tablet_only {
		display: block;
	}
}

/* 481～850px：タブレット */
@media (min-width: 481px) and (max-width: 850px) {
	.sp_tablet_only {
		display: block;
	}

	.tablet_pc_only {
		display: block;
	}
}

/* 851px〜：PC */
@media (min-width: 851px) {
	.tablet_pc_only {
		display: block;
	}

	.pc_only {
		display: block;
	}
}


/* ---------------------------------------------------------
見出し
--------------------------------------------------------- */
.site_title {
	color: var(--font-color-accent);
	font-family: var(--font-heading);
	text-transform: uppercase;
	text-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.section_title {
	margin-block: var(--leading-trim);
	margin-bottom: clamp(60px, 10vw, 100px);
	color: var(--font-color-base);
	font-family: var(--font-heading);
	font-size: clamp(var(--font-size_20), 9vw, var(--font-size_62));
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .08em;
	line-height: 1.2;
}

.section_title.section_title--bg {
	text-shadow: 1px 1px 20px rgb(158 252 255 / 60%);
}

/* ---------------------------------------------------------
ボタン
--------------------------------------------------------- */
.btn_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: clamp(40px, 5vw, 80px);
}

.btn_wrap .btn {
	font-size: clamp(var(--font-size_16), 2.5vw, var(--font-size_22));
}

.btn {
	position: relative;
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: .5em 0;
	color: var(--btn-color-text);
	font-weight: 700;
	font-size: clamp(var(--font-size_14), 2.5vw, var(--font-size_18));
	line-height: 1.4;
	transition: .3s;
}

.btn:hover {
	cursor: pointer;
}

.btn::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: currentColor;
	transition: width 0.3s ease;
}

.btn::after {
	content: '\f061';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* margin-left: 1em; */
	width: 30px;
	height: 30px;
	background-color: var(--btn-color-bg);
	background-image: linear-gradient(to right,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.4) 50%,
			rgba(255, 255, 255, 0) 100%);
	background-repeat: no-repeat;
	background-size: 200% 100%;
	background-position: -100% 0;
	border-radius: 50%;
	color: #fff;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: clamp(var(--font-size_12), 1vw, var(--font-size_14));
	transition: background-position 0.5s ease;
}

.btn:hover::after {
	/* ホバーでグラデーションが左→右に流れる */
	background-position: 100% 0;
}

.btn.btn--white {
	color: #fff;
}

.btn.btn--white::after {
	background-color: #fff;
	color: var(--btn-color-bg);
}

.btn.disabled {
	pointer-events: none;
}

/* マウス操作時のみホバーで左から右へ下線を伸ばす */
@media (hover: hover) and (pointer: fine) {
	.btn:hover::before {
		width: calc(100% - 40px);
	}

	.btn.disabled:hover::before {
		width: 0;
	}
}

/* タッチ環境ではホバー効果を無効化 */
@media (hover: none) {
	.btn:hover::before {
		width: 0;
	}
}




/* ---------------------------------------------------------
ヘッダー
--------------------------------------------------------- */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	z-index: 1000;
	backdrop-filter: blur(6px);
}

/* show クラスがついたらスライドダウンで表示 */
.header.show {
	transform: translateY(0);
}

.header_inner {
	margin: 0 auto;
	max-width: 1440px;
	padding: 20px;
}

.header .site_title {
	font-size: clamp(var(--font-size_14), 4vw, var(--font-size_24));
}

.global_nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.global_nav_list {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 1.5rem;
}

.global_nav_title {
	color: var(--font-color-base);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(var(--font-size_16), 6vw, var(--font-size_20));
	transition: color .25s;
}

.global_nav_title:hover {
	color: var(--font-color-accent);
}

.global_nav_sub_list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: .8rem 1rem;
}

.sns_link {
	color: var(--font-color-base);
	font-size: clamp(var(--font-size_24), 4vw, var(--font-size_28));
}

.sns_link.cart {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--font-color-base);
	border-radius: 50%;
	font-size: clamp(var(--font-size_18), 4vw, var(--font-size_18));
}

.hamburger {
	display: none;
}


@media (max-width: 850px) {
	.header::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		transform: translateX(100%);
		transition: 1s ease;
		z-index: 0;
		opacity: 0;
	}

	.header_inner {
		position: relative;
		z-index: 1;
	}

	/* メニュー開閉時に背景だけ右→左にスライドイン */
	.header:has(.global_nav_list.open)::before {
		transform: translateX(0);
		opacity: 1;
	}

	/* グローバルナビを右→左にスライドさせる */
	.global_nav_list {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 100vh;
		padding-top: 60px;
		background-color: #fff;
		transform: translateX(100%);
		opacity: 0;
		visibility: hidden;
		transition: 1s ease;
	}

	.global_nav_list.open {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}

	.global_nav_list.open .global_nav_title {
		color: var(--font-color-accent);
	}

	.global_nav_list.open .sns_link {
		color: var(--font-color-accent);
	}

	.global_nav_list.open .sns_link.cart {
		border-color: var(--font-color-accent);
	}


	/* -------------------
	ハンバーガーメニュー
	------------------- */
	.hamburger {
		display: block;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		position: relative;
		width: clamp(var(--font-size_24), 6vw, var(--font-size_32));
		height: clamp(var(--font-size_24), 6vw, var(--font-size_32));
	}

	.hamburger i {
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: clamp(var(--font-size_24), 6vw, var(--font-size_32));
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
		opacity: 0;
		color: var(--font-color-base);
		transition: 0.3s ease;
	}

	.hamburger.active i {
		color: var(--font-color-accent);
	}

	.hamburger .open-icon {
		opacity: 1;
	}

	.hamburger.active .open-icon {
		transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);
		opacity: 0;
	}

	.hamburger .close-icon {
		transform: translate(-50%, -50%) rotate(90deg) scale(0.5);
		opacity: 0;
	}

	.hamburger.active .close-icon {
		transform: translate(-50%, -50%) rotate(0deg) scale(1);
		opacity: 1;
	}
}



/* ---------------------------------------------------------
メインビジュアル
--------------------------------------------------------- */
.mv {
	position: relative;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

/* ★ 背景画像を position: fixed でピン留め */
.mv::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-image: url('../images/mv.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: -10;
	pointer-events: none;
	transition: transform 0.5s ease, filter 0.5s ease;
}

/* about セクションが見えたら .blur を付与 */
.mv.blur::before {
	transform: scale(1.05);
	filter: blur(4px);
}

.mv_title {
	position: absolute;
	top: 10vw;
	left: 7vw;
	font-size: clamp(var(--font-size_20), 6vw, var(--font-size_64));
}

/* タイトル文字を一文字ずつフェードアップ */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(1em);
	}

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

/* 分割した文字(span.char)にアニメを適用 */
.mv_title.site_title .char {
	display: inline-block;
	opacity: 0;
	animation: fadeInUp 0.5s forwards;
}

@media (max-width: 480px) {
	.mv_title {
		top: 20vw;
	}
}


/* ---------------------------------------------------------
About
--------------------------------------------------------- */
.about {
	overflow: hidden;
	padding: 140px 0;
}

.about_text {
	margin-bottom: clamp(40px, 11vw, 100px);
	padding: 0 20px;
	color: var(--font-color-base);
	font-size: clamp(var(--font-size_14), 2.5vw, var(--font-size_26));
	line-height: 2.5;
	text-align: center;
}

.picture_gallery {
	display: flex;
	gap: 1rem;
}

.picture_gallery_item {
	flex: 0 0 clamp(180px, 36vw, 340px);
}

.marquee {
	animation: scroll-left 20s infinite linear .5s both;
}

@keyframes scroll-left {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

/* ---------------------------------------------------------
Products  (Swiper)
--------------------------------------------------------- */

.products {
	position: relative;
	z-index: 2;
	margin-top: -180vh;
}

.products .section_title {
	margin-bottom: unset;
}

/* ★ 背景画像を position: fixed でピン留め */
.products_event_bg {
	position: sticky;
	/* ← ビューポート上端でピタッと止まる */
	top: 0;
	left: 0;
	width: 100%;
	height: 200vh;
	z-index: 2;
	background-image: url('../images/products_event_bg.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	pointer-events: none;
}

/* --- カルーセルの設定 --- */
.products .products_slider {
	max-width: 1440px;
	padding-top: clamp(60px, 10vw, 100px);
}

.products .swiper-wrapper {
	display: flex;
	margin-bottom: 60px;
}

.products .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(.9);
	transition: .5s;
}

.products .swiper-slide-active {
	transform: scale(1.05);
}

.products .swiper-button-prev,
.products .swiper-button-next {
	background-color: rgba(255, 123, 36, .5);
	border-radius: 50%;
	color: var(--font-color-base);
	width: clamp(40px, 4vw, 60px);
	height: clamp(40px, 4vw, 60px);
	top: 42%;
}

.products .swiper-button-prev::after,
.products .swiper-button-next::after {
	font-family: "Font Awesome 6 Free";
	font-size: clamp(var(--font-size_18), 2vw, var(--font-size_24));
	font-weight: 900;
}

.products .swiper-button-prev::after {
	content: '\f060';
}

.products .swiper-button-next::after {
	content: '\f061';
}

.products .swiper-pagination-bullet {
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	font-size: clamp(var(--font-size_20), 4vw, var(--font-size_28));
	color: #CD7B24;
	opacity: .3;
	margin: 0 .4rem;
}

.products .swiper-pagination-bullet-active {
	opacity: 1;
	color: var(--font-color-accent);
}

.products .swiper-pagination-bullet::before,
.products .swiper-pagination-bullet::after {
	background: none !important;
}

.products .swiper-pagination {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.5vw, 20px);
}

/* --- 商品リストカード --- */
.products_card_link {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 40px 60px;
	width: 100%;
	max-width: 400px;
	background-image: url('../images/products_card_bg.webp');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: transform 0.5s ease;
}

/* --- 画像コーナーの三角形 --- */
.products_thumb {
	position: relative;
	box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, .1);
}

.products_thumb::before,
.products_thumb::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
}

/* 右上（三角が左下へ向く） */
.products_thumb::before {
	top: -5px;
	right: -5px;
	border-top: clamp(25px, 2vw, 30px) solid #CD7B24;
	border-left: clamp(25px, 2vw, 30px) solid transparent;
}

/* 左下（三角が右上へ向く） */
.products_thumb::after {
	bottom: -5px;
	left: -5px;
	border-bottom: clamp(25px, 2vw, 30px) solid #CD7B24;
	border-right: clamp(25px, 2vw, 30px) solid transparent;
}

.products_card_link .products_body {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 5px;
	text-align: center;
}

.products_card_link .products_name {
	margin-block: var(--leading-trim);
	font-size: clamp(var(--font-size_16), 2.5vw, var(--font-size_20));
	line-height: 1.4;
	text-align: center;
}

.products_card_link .products_meta {
	font-size: clamp(var(--font-size_14), 2.5vw, var(--font-size_18));
	line-height: 1.6;
}

.products_card_link .products_meta span {
	font-size: clamp(var(--font-size_12), 2.5vw, var(--font-size_14));
}

/* マウス操作時のみホバーでサイズを拡大 */
@media (hover: hover) and (pointer: fine) {
	.products_card_link:hover {
		opacity: 1;
		transform: scale(1.05);
	}
}

/* タッチ環境ではホバー効果を無効化 */
@media (hover: none) {
	.products_card_link:hover {
		transform: none;
	}
}

@media (max-width: 480px) {
	.products_card_link {
		width: 80%;
	}

}

/* ---------------------------------------------------------
Modal
--------------------------------------------------------- */
/* === モーダルポップアップ === */
/* === Modal with fade & slide animation === */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.modal.open {
	visibility: visible;
	opacity: 1;
	animation: modal-bg-fade 0.4s ease forwards;
	transition-delay: 0s;
}

.modal_content {
	position: relative;
	max-width: 900px;
	width: 80%;
	max-height: 90vh;
	overflow: auto;
	padding: 2em;
	background-image: url(../images/products_card_bg.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 8px;
	z-index: 10;
	opacity: 0;
	transform: translateY(-20px) scale(0.95);
}

.modal.open .modal_content {
	animation: modal-content-show 0.4s ease forwards;
}

.modal_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 1;
	/* .modal_content より下に */
}

.modal_close {
	position: absolute;
	top: 0;
	right: 0.5em;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
}

.modal_image {
	margin: 0 auto 1rem;
	width: clamp(200px, 40%, 400px);
}

.modal_image img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.modal_title {
	font-size: var(--font-size_20);
	border-bottom: 1px solid #ccc;
	padding-bottom: 0.5em;
	line-height: 1.4;
}

.modal_body {
	margin-top: 1em;
	line-height: 1.5;
}

.modal_concept {
	/* font-weight: bold; */
	margin-top: 1em;
}

.modal_keynote {
	margin-bottom: 1em;
}

@keyframes modal-bg-fade {
	from {
		background: rgba(0, 0, 0, 0);
	}

	to {
		background: rgba(0, 0, 0, 0.5);
	}
}

@keyframes modal-content-show {
	from {
		transform: translateY(-20px) scale(0.95);
		opacity: 0;
	}

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


/* ---------------------------------------------------------
Event
--------------------------------------------------------- */
.event {
	position: relative;
	z-index: 2;
	padding-bottom: 200px;
}

.event .contents_wrap {
	padding-bottom: 150px;
}

.event_list {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 30px;
}

.event_list .event_item {
	flex: 0 1 42%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 30px;
}

.comming_soon {
	position: absolute;
	width: 110%;
	height: 110%;
	top: 50%;
	left: 50%;
	background-color: rgba(217, 217, 217, 0.8);
	translate: -50% -50%;
	z-index: 10;
}

.comming_soon .comming_soon_text {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 70px;
	font-size: clamp(var(--font-size_40), 10vw, var(--font-size_70));
	font-family: var(--font-heading);
	color: var(--font-color-base);
	translate: -50% -50%;
	rotate: 12deg;
	line-height: 1.2;
	text-align: center;
}

.event_list .event_body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	color: var(--font-color-base);
	text-align: center;
}

.event_list .event_text_area {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 20px;
}

.event_list .event_title {
	margin-block: var(--leading-trim);
	font-size: clamp(var(--font-size_14), 2.5vw, var(--font-size_26));
}

.event_list .event_text {
	font-size: clamp(var(--font-size_12), 2.5vw, var(--font-size_20));
	text-align: left;
}

@media (max-width: 850px) {
	.event_list {
		flex-direction: column;
	}

	.comming_soon {
		width: 102%;
		height: 102%;
	}
}

@media (max-width: 480px) {
	.event .contents_wrap {
		padding-bottom: unset;
	}

	.comming_soon {
		height: 102%;
	}
}


/* ---------------------------------------------------------
Blog
--------------------------------------------------------- */
.blog {
	position: relative;
	/* z-index: -2; */
	z-index: 1;
	margin-top: -320px;
	background-image: url(../images/blog_bg.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: #000;
}

.blog .contents_wrap {
	padding-top: 400px;
}

.blog_list {
	display: flex;
	justify-content: space-between;
	gap: clamp(20px, 2vw, 30px);
}

.blog_list .blog_item {
	flex: 0 0 31.5%;
}

.blog_list .blog_link {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(20px, 2vw, 30px);
	height: 100%;
	background: rgba(0, 0, 0, .4);
	border: 2px solid #fff;
	color: var(--font-color-base);
	transition: transform 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
	.blog_list .blog_link {
		box-shadow: 1px 1px 50px 10px rgba(95, 246, 251, .3);
	}

	.blog_list .blog_link:hover {
		transform: scale(1.05);
	}
}

/* タッチ環境では hover 効果をキャンセル */
@media (hover: none) {
	.blog_list .blog_link {
		box-shadow: unset;
	}

	.blog_list .blog_link:hover {
		transform: scale(1);
	}
}

.blog_thumb img {
	aspect-ratio: 310 / 200;
	object-fit: cover;
}

.blog_list .blog_body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;
	height: 100%;
	white-space: normal;
}

.blog_list .blog_body_header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.blog_list .blog_body_text_group {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.blog_list .blog_title {
	margin-block: var(--leading-trim);
	font-size: clamp(var(--font-size_14), 1.5vw, var(--font-size_18));
	line-height: 1.4;
}

.blog_list .blog_text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	margin-block: var(--leading-trim);
	font-size: clamp(var(--font-size_12), 1.5vw, var(--font-size_16));
	line-height: 1.6;
}

.blog_list .btn {
	align-self: flex-end;
}

.blog_meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-block: var(--leading-trim);
	font-size: clamp(var(--font-size_12), 1.5vw, var(--font-size_16));
	line-height: 1;
}

.blog_meta .blog_category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .2em .5em;
	color: #000;
}

.blog_meta .blog_category.fermentation {
	background-color: rgba(255, 255, 3, .8);
}

.blog_meta .blog_category.microorganisms {
	background-color: rgba(245, 107, 255, .8);
}


@media screen and (max-width: 850px) {
	.blog .contents_wrap {
		padding-right: unset;
	}

	.blog .section_title {
		margin-right: clamp(20px, 9vw, 120px);
	}

	.blog .btn_wrap {
		margin-right: clamp(20px, 9vw, 120px);
	}

	.blog .scrollbar {
		overflow-x: scroll;
		white-space: nowrap;
		padding-right: 20px;
	}

	.blog_list .blog_item {
		flex: 0 0 50%;
	}
}

@media screen and (max-width: 480px) {
	.blog_list .blog_item {
		flex: 0 0 80%;
	}
}


/* ---------------------------------------------------------
News
--------------------------------------------------------- */
.news_access_wrap {
	background-color: #000;
	background-image: url(../images/news_access_bg.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.news {
	/* padding: 120px 0; */
}

.news_inner.contents_wrap {
	display: flex;
	justify-content: space-between;
	gap: 12%;
}

.news .btn {
	font-size: clamp(var(--font-size_14), 2.5vw, var(--font-size_20));
}

.news_list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 5vw, 60px);
}

.news_list .news_link {
	display: flex;
	flex-direction: column;
	gap: clamp(.5em, 2vw, 1em);
	color: var(--font-color-base);
}

@media (hover: hover) and (pointer: fine) {
	a:hover {
		opacity: .8;
	}
}

/* タッチ環境では hover 効果をキャンセル */
@media (hover: none) {
	a:hover {
		opacity: 1;
	}
}

.news_list .news_meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: clamp(var(--font-size_12), 2.5vw, var(--font-size_16));
	line-height: 1;
}

.news_list .news_meta .news_category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .2em .5em;
	background: var(--font-color-accent);
	color: #000;
}

.news_list .news_title {
	margin-block: var(--leading-trim);
	font-size: clamp(var(--font-size_14), 2.5vw, var(--font-size_20));
	line-height: 1.6;
}

.news_list .news_text {
	margin-block: var(--leading-trim);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
}

@media screen and (max-width: 850px) {
	.news_inner.contents_wrap {
		flex-direction: column;
	}

	.news_list {
		margin-bottom: 40px;
	}
}

/* ---------------------------------------------------------
Access
--------------------------------------------------------- */
.access_contents {
	display: flex;
	justify-content: space-between;
}

.access_body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3vw, 30px);
	color: var(--font-color-base);
	font-size: clamp(var(--font-size_12), 2vw, var(--font-size_16));
}

.access_body .access_body_item {
	display: flex;
	gap: 30px;
}

.access_body .access_body_item .access_title {
	flex: 0 0 10%;
}

.access_body .access_body_item .access_text {
	flex: 1;
	line-height: 2;
}

.access_map {
	flex: 0 0 50%;
}

.access_map iframe {
	width: 100%;
	height: clamp(200px, 30vw, 420px);
	filter: grayscale(20%);
}

.access_map_link {
	margin-top: 1rem;
}

@media screen and (max-width: 850px) {
	.access_contents {
		flex-direction: column;
		gap: 30px;
	}

	.access_body .access_body_item .access_text {
		line-height: 1.6;
	}
}

/* ---------------------------------------------------------
Contact
--------------------------------------------------------- */
.contact {
	padding: clamp(40px, 10vw, 120px) 0;
	background-color: #000;
}

.contact .section_title {
	margin-bottom: unset;
}

.contact_contents {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.contact_list {
	display: flex;
	justify-content: center;
	gap: 2rem;
}

.contact_link {
	background-color: #fff;
	width: clamp(60px, 10vw, 120px);
	height: clamp(60px, 10vw, 120px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.contact_link img {
	width: clamp(30px, 5vw, 60px);
	height: auto;
}

@media screen and (max-width: 850px) {
	.contact_contents {
		flex-direction: column;
		gap: 40px;
	}
}

/* ---------------------------------------------------------
Footer
--------------------------------------------------------- */
.footer {
	background-image: url(../images/footer_bg.webp);
	background-repeat: no-repeat;
	background-position: right;
	background-size: cover;
}

.footer_list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.footer_nav {
	font-size: clamp(var(--font-size_14), 2.5vw, var(--font-size_24));
}

.footer_nav_list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	line-height: 1.4;
}

.footer_nav_list .footer_nav_item a {
	color: var(--font-color-base);
	font-family: var(--font-heading);
}

.footer_nav_list .footer_nav_item a:hover,
.footer_nav_list .footer_sns_item a:hover {
	color: var(--font-color-accent);
}

.footer_sns_list {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.footer_sns_list .sns_link {
	font-size: clamp(var(--font-size_18), 4vw, var(--font-size_40));
}

.footer_sns_list .sns_link.cart {
	width: clamp(38px, 4vw, 46px);
	height: clamp(38px, 4vw, 46px);
	font-size: clamp(var(--font-size_12), 4vw, var(--font-size_22));
}

.copyright_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 50px;
}

.copyright {
	color: var(--font-color-base);
	font-size: clamp(var(--font-size_10), 1vw, var(--font-size_12));
	letter-spacing: .1em;
}

.float_btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3em;
	position: fixed;
	bottom: 20px;
	right: 10px;
	width: clamp(80px, 13vw, 110px);
	height: clamp(80px, 13vw, 110px);
	border: none;
	border-radius: 50%;
	color: var(--font-color-base);
	font-size: clamp(var(--font-size_9), 2.4vw, var(--font-size_14));
	line-height: 1.6;
	text-align: center;
	z-index: 1000;
	overflow: visible;
	transition: transform 0.3s ease;
}

.float_btn.bottom {
	transform: translateY(-60px);
}

/* 追加：SVG テキストを円形に配置して回転 */
.float_btn_svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: center center;
	animation: rotateText 40s linear infinite;
	pointer-events: none;
}

@keyframes rotateText {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.float_btn_svg text {
	fill: var(--font-color-base);
	font-size: var(--font-size_8);
	letter-spacing: 0.5px;
}