/*
Theme Name:bodycarestyle
Theme URI: テーマのURL（任意）
Description: テーマの説明文（任意）
Version: テーマのバージョン（任意）
Author: 作者名（任意）
Author URI: 作者のウェブサイトURL（任意）
License: ライセンス（任意）
License URI: ライセンスのURL（任意）
Tags: テーマのタグ（任意、複数指定可、カンマ区切り）
Text Domain: テキストドメイン（多言語対応する場合に必要）
*/

@charset "UTF-8";

/* ======================================== */
/* CSSカスタムプロパティ（変数）の定義
/* ======================================== */
:root {
	--color-primary: #4b463f; /* 主要なテキスト色 */
	--color-accent-red: #DFA999; /* アクセント色（赤） */
	--color-accent-blue: #596F8E; /* アクセント色（青） */
	--color-accent-green: #8DB89F; /* アクセント色（緑） */
	--base-bg-color: #f8f6f3; /* ベースとなる背景色 */
	--sb-bg-color:#FFFDF9;/* サブとなる背景色 */

	--font-body-jp: "Zen Kaku Gothic New","YuGothic", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif; /* 本文日本語 */
	--font-body-en: "Barlow"; /* 本文英語（Barlowが日本語を含まない場合） */
	--font-heading-jp: "Zen Kaku Gothic New","Shippori Mincho B1", serif; /* 見出し日本語 */
	--font-heading-en: "Barlow", sans-serif; /* 見出し英語 */

	/* フォントサイズ定義（以前のclamp関数とvwのルールも適用） */
	--font-size-base-sp: 4.5vw;
	--font-size-base-pc: clamp(1rem, 1.25vw, 24px);

	--font-size-h1-sp: 8vw;
	--font-size-h1-pc: clamp(2rem, 3vw, 56px);

	--font-size-h2-sp: 9vw;
	--font-size-h2-pc: clamp(2rem, 4vw, 72px);

	--font-size-h3-sp: 5vw;
	--font-size-h3-pc: clamp(1rem, 1.7vw, 30px); /* 例: 最小28px, 最大40px */

	--secondary-accent-color: #dfa999; /* 第二のアクセント色（予約ボタンなど） */
	--heading-color: #4B463F; /* h1,h3-h6のデフォルト色 (例:濃い灰色) */
	--h1-specific-color: #8DB89F; /* h1専用の色 (例:緑色) */
	--h2-specific-color: #8DB89F; /* h2専用の色 (例:緑色) */
	--text-color: #4b463f; /* テキスト色 */
}

/* ======================================== */
/* CSSカスタムプロパティ（変数）の定義 end
/* ======================================== */


.fadein {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}

/* active クラスが付与されたらフェードイン */
.fadein.active {
	opacity: 1;
	transform: translateY(0);
}


/* ======================================== */
/* 基本スタイル
/* ======================================== */
body {
	margin: 0;
	font-family: var(--font-body-en), var(--font-body-jp), sans-serif;
	line-height: 1.8; /* 行の高さを調整推奨 */
	color: var(--text-color);
	background-color: var(--base-bg-color);
	-webkit-font-smoothing: antialiased; /* フォントの表示を滑らかにする */
	-moz-osx-font-smoothing: grayscale; /* Macでのフォント表示を滑らかにする */
}

/* 見出しのフォント統一 */
h1 {
	margin-bottom: 2vw;
	font-family:"Shippori Mincho B1";
	line-height: 1.5; /* 行の高さを調整推奨 */
	letter-spacing:0.3vw;
}

h2, h3, h4, h5, h6 {
	margin-bottom: 10px;
	font-family: var(--font-heading-jp); /* 見出しに適用 */
	line-height: 1.5; /* 行の高さを調整推奨 */
	color: var(--heading-color); /* h1,h2以外の見出しに適用される */
}

/* 見出しが英語の場合のフォント */
h2, h3, h4, h5, h6[lang="en"] {
	margin: 0;
	font-family: var(--font-heading-en);
	line-height: 1.5; /* 行の高さを調整推奨 */
}

/* h1,h2 のみを緑色に変更 */
h1,h2 {
	color: var(--h2-specific-color); /* h2専用の色を適用 */
}


/* フォントサイズ（clamp関数とvwのルール適用） */
html {
	font-size: 16px; /* remの基準値として残す */
}

/* bodyのフォントサイズは変数で定義 */
body {
	font-size: var(--font-size-base-pc); /* PC版のベースフォントサイズ */
}

@media (max-width: 479px) { /* あなたのサイトのSP用ブレークポイントに合わせて調整 */
	body {
		font-size: var(--font-size-base-sp); /* SP版のベースフォントサイズ */
	}
}

/* 各見出しにフォントサイズ変数を適用 */
h1 {
	font-size: var(--font-size-h1-pc);
}
h2 {
	font-size: var(--font-size-h2-pc);
}
h3 {
	font-size: var(--font-size-h3-pc);
}
h4 {
	font-size: var(--font-size-h4-pc);
}
h5 {
	font-size: var(--font-size-h5-pc);
}
h6 {
	font-size: var(--font-size-h6-pc);
}

/* SP版のブレークポイント内での見出しサイズ適用 */
@media (max-width: 479px) { /* あなたのサイトのSP用ブレークポイントに合わせて調整 */
	h1 {
		font-size: var(--font-size-h1-sp);
		font-family:"Shippori Mincho B1";
	}
	h2 {
		font-size: var(--font-size-h2-sp);
	}
	h3 {
		font-size: var(--font-size-h3-sp);
	}
	h4 {
		font-size: var(--font-size-h4-sp);
	}
	h5 {
		font-size: var(--font-size-h5-sp);
	}
	h6 {
		font-size: var(--font-size-h6-sp);
	}
	p {
		font-size: 0.9rem;
	}
}

/* ======================================== */
/* 基本スタイル end
/* ======================================== */

/* ======================================== */
/* ヘッダーセクション
/* ======================================== */
/* PC版ヘッダーセクション(常に画面の右下に出るように変更) */
.site-header {
	background: var(--base-bg-color); /* ヘッダーの背景色 */
	border-radius: 20px 0px 0px 0px; /* 角丸の指定 */
	display: flex;
	flex-wrap: nowrap; /* ★追加: 子要素を折り返さない */
	gap: 40px;
	align-items: center; /* 縦方向中央揃え */
	justify-content: space-between; /* ★変更: 要素を両端に寄せ、間にスペースを均等に入れる */
	box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
	/* 常に画面の右下に固定するための設定 */
	position: fixed; /* ビューポートに対して固定 */
	bottom: 0px;       /* 画面の下端からの距離 */
	right: 0px;        /* 画面の右端からの距離 */
	z-index: 1000;        /* 他のコンテンツより手前に表示 */
	width: auto;        /* コンテンツに合わせて幅を自動調整 */
	box-sizing: border-box;
	padding-left: 20px;
}

/* ヘッダー内のロゴ (常に画面の左上に出るように変更) */
.site-branding { /* ヘッダー内のロゴを対象 */
	/* 常に画面の左上に固定するための設定 */
	position: fixed; /* ビューポートに対して固定 */
	top: 30px;  /* 画面の上端からの距離 */
	left: 30px; /* 画面の左端からの距離 */
	z-index: 1001; /* ヘッダーよりさらに手前に表示 */
}

.site-logo {
	width: 263px; /* ロゴの幅 */
	height: 64px; /* ロゴの高さ */
	object-fit: contain;
}

/* ナビゲーション */
.main-navigation {
	flex-grow: 1; /* 利用可能なスペースを埋める */
}

.header-nav-list {
	display: flex;
	flex-direction: row;
	gap: 40px;
	list-style: none;
	padding: 0;
	margin: 0;
	justify-content: center; /* ナビゲーション項目を中央に配置 */
}

.header-nav-item {
	position: relative;
}

.header-nav-link {
	color: var(--text-color);
	font-size: 1.3vw;
	line-height: 1.2;
	font-weight: 700;
	transition: color 0.3s ease;
	text-decoration: none;
}

.header-nav-link:hover {
	color: var(--color-accent-red);
}

/* 予約ボタン */
.reserve-button-wrap {
	flex-shrink: 0;
	list-style:none;
}

.header-reserve-button {
	background: var(--secondary-accent-color);
	padding: 32px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--base-bg-color);
	font-size: 1.5vw;
	line-height: 1.2;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.header-reserve-button:hover {
	opacity: 0.9;
}



/* ========================================
// 1. sp版ヘッダー共通スタイル
// ======================================== */
.sp-header {
	background: var(--base-bg-color); /* ヘッダーの背景色 */
	border-radius: 20px 0px 0px 0px; /* 角丸の指定 */
	align-items: center; /* 縦方向中央揃え */
	box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
	/* 常に画面の右下に固定するための設定 */
	position: fixed; /* ビューポートに対して固定 */
	bottom: 0px;       /* 画面の下端からの距離 */
	right: 0px;        /* 画面の右端からの距離 */
	z-index: 1000;        /* 他のコンテンツより手前に表示 */
	width: auto;        /* コンテンツに合わせて幅を自動調整 */
	box-sizing: border-box;
	padding-left: 20px;

	/* PC版では非表示 */
	display: none;
}

/* 769px以上の画面幅でSPヘッダーを非表示 */
/* PC版ではこれらの要素を非表示にするための設定 */
.sp-header,
.sp-header-logo-fixed,
.sp-bottom-fixed-menu,
.sp-nav { /* .sp-navは元からfixedですが、念のため */
	display: none; /* デフォルトで非表示 */
}

/* 769px以上の画面幅でSPヘッダー関連を非表示 */
@media (max-width: 768px) {
	.sp-header {
		display: none; /* 今回の要件ではヘッダー自体は表示しない */
	}

	.site-header {
		display: none; /* スマホ画面では完全に非表示にする */
	}

	/* モバイル時のヘッダー内のロゴ */
	.site-branding { /* ヘッダー内のロゴを対象 */
		position: static; /* モバイルでは通常フローに戻す */
		top: auto;
		left: auto;
		width: 100%;
		text-align: center; /* 中央寄せ */
		padding-bottom: 15px; /* 下部との間隔 */
		margin-left: 0; /* Flexboxで中央寄せするため */
		margin-right: 0;
		z-index: auto; /* 固定解除により不要 */
	}

	.site-logo {
		width: 200px; /* モバイルでのロゴサイズ調整 */
		height: auto;
		margin: 0 auto; /* 中央寄せ */
	}

	/* --- ロゴを左上に固定 --- */
	.sp-header-logo-fixed {
		display: block; /* スマホサイズで表示 */
		position: fixed;
		top: 15px; /* 上からの距離を調整 */
		left: 20px; /* 左からの距離を調整 */
		z-index: 1000; /* 最前面に表示 */
	}


	/* --- ハンバーガーメニューと予約ボタンを右下に固定 --- */
	.sp-bottom-fixed-menu {
		display: flex; /* Flexboxで横並びにする */
		position: fixed;
		bottom: 0px; /* 下からの距離を調整 */
		right: 0px; /* 右からの距離を調整 */
		z-index: 1000; /* 最前面に表示 */
		align-items: center; /* 垂直方向中央揃え */
		gap: 15px; /* ボタン間の隙間を調整 */
		padding-left: 20px;
		/* 必要であれば背景色や影 */
		background: var(--base-bg-color); /* ヘッダーの背景色を適用 */
		border-radius: 20px 0px 0px 0px; /* 角丸の指定 */
		box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
	}

	/* ========================================
	// 2. ハンバーガーメニューボタン
	// ======================================== */
	.hamburger-button {
		background: none; /* 親の .sp-bottom-fixed-menu で背景色を設定するため */
		border: none;
		padding: 0; /* 親でパディングを設定するためリセット */
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 50px; /* ボタン全体の幅 */
		height: 50px; /* ボタン全体の高さ */
		border-radius: 8px; /* 角丸 */
		box-sizing: border-box;
		position: relative;
		outline: none;
		overflow: hidden;
		/* z-indexは親のsp-bottom-fixed-menuで管理されるためここでは不要 */
	}

	.hamburger-icon {
		display: block;
		width: 30px;
		height: 3px;
		background-color: #333;
		border-radius: 2px;
		transition: all 0.3s ease;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.hamburger-icon:nth-child(1) {
		top: 15px;
	}

	.hamburger-icon:nth-child(2) {
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.hamburger-icon:nth-child(3) {
		bottom: 15px;
	}

	.hamburger-button.is-active .hamburger-icon:nth-child(1) {
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.hamburger-button.is-active .hamburger-icon:nth-child(2) {
		opacity: 0;
	}

	.hamburger-button.is-active .hamburger-icon:nth-child(3) {
		bottom: 50%;
		transform: translate(-50%, 50%) rotate(-45deg);
	}


	/* ========================================
	// 3. 予約ボタン
	// ======================================== */
	.sp-booking-button-wrapper {
		margin-left: 0; /* 親のgapで間隔を管理するためリセット */
		list-style: none;
	}

	.sp-booking-button {
		display: block;
		padding: 15px 20px;
		background-color: #e6a798;
		color: #F8F6F3;
		text-align: center;
		text-decoration: none;
		font-size: 1.2em;
		font-weight: bold;
		transition: background-color 0.3s ease;
		white-space: nowrap;
	}

	.sp-booking-button:hover {
		background-color: #d18f80;
	}

	/* ========================================
	// 4. ドロワーナビゲーション (sp-nav)
	// ======================================== */
	.sp-nav {
		display: block; /* スマホサイズで表示 */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 999; /* 他の固定要素より低いz-index */
		display: flex;
		align-items: center;
		justify-content: center;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		overflow-y: auto;
		/* ロゴや下部のボタンと被らないように調整が必要かもしれません */
		/* padding-top: 60px; */ /* 固定ヘッダーの高さ分開ける設定は状況により不要 */
		box-sizing: border-box;
	}

	.sp-nav[aria-hidden="false"] {
		visibility: visible;
		opacity: 1;
	}

	.sp-nav-list {
		list-style: none;
		padding: 0;
		margin: 0;
		text-align: center;
		width: 80%;
		max-width: 300px;
	}

	.sp-nav-list li {
		margin-bottom: 20px;
	}

	.sp-nav-list li a {
		display: block;
		padding: 15px 0;
		color: #fff;
		text-decoration: none;
		font-size: 1.2em;
		font-weight: bold;
		transition: color 0.3s ease;
	}

	.sp-nav-list li a:hover {
		color: #e6a798;
	}
}
/* ======================================== */
/* ヘッダーセクション end
/* ======================================== */


/* ======================================== */
/* ヒーローセクション
/* ======================================== */
.hero-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	min-height: inherit; /* 親のmin-heightを継承 */
	z-index: 0; /* ヘッダーとロゴより下 */
}

.hero-text-overlay1 { /* section-hero1.php のキャッチコピーを想定 */
	z-index: 1; /* 画像の上に表示 */
	position: absolute;
	width: 45%; /* オーバーレイ全体の幅 */
	top: clamp(190px, calc(-88.33333333333333vw + 1886px), 200px);
	left: 50%;
}

.hero-text-overlay2 { /* section-hero2.php のキャッチコピーを想定 */
	z-index: 1; /* 画像の上に表示 */
	position: absolute;
	transform: translate(-50%, -50%); /* 自身のサイズを考慮して中央に配置 */
	width: 100%; /* オーバーレイ全体の幅 */
	display: flex; /* Flexboxコンテナにする */
	flex-direction: column; /* 子要素を縦に並べる */
	top: 70%;
	left: 55%;
}

/*section-hero1*/
.hero-catchcopy1 {
	width: 100%;
}

.FVwomantext1 {
	display: none;
}
.FVwomantext2 {
	display: none;
}

/*スマホ*/
@media (max-width: 768px) {
	.hero-text-overlay1 { /* section-hero1.php のキャッチコピーを想定 */
		z-index: 1; /* 画像の上に表示 */
		width: 90%; /* オーバーレイ全体の幅 */
		top: 50%;
		transform: translate(-50%, -50%); /* 自身のサイズを考慮して中央に配置 */
	}
	.hero-catchcopy1 {
		display: none;
	}
	.FVwomantext1 {
		display: block;
		margin-bottom: 250px;
		width: 100%;
		z-index: 1;
	}
	.FVwomantext2 {
		display: block;
		width: 100%;
		z-index: 2;
		margin-bottom: 15%;
	}
}

/*section-hero2*/

.hero-catchcopy2 {
	width: 50%;
}

.try-img2 {
	position: absolute;
	max-width: 50%;
	margin-top: 14%;
	margin-left: 53%;
}

.try-spimg {
	display: none;
}

.try-img-sp2 {
	display: none;
}

/*スマホ*/
@media (max-width: 768px) {
	.try-img2 {
		display: none;
	}

	.hero-catchcopy2 {
		display: none;
	}

	.try-spimg {
		display: block;
	}

	.try-img-sp2 {
		display: block;
		max-width: 60%;
		margin-top: 10vw;
	}

	.hero-text-overlay2 { /* section-hero1.php のキャッチコピーを想定 */
		z-index: 1; /* 画像の上に表示 */
		position: absolute;
		transform: translate(-50%, -50%); /* 自身のサイズを考慮して中央に配置 */
		width: 90%; /* オーバーレイ全体の幅 */
		flex-direction: column; /* 子要素を縦に並べる */
		top: 55%;
		left: 50%;
	}
}


/*section-hero3*/
.hero-section {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 600px; /* 最小高さを設定 (必要に応じて調整) */
	overflow: hidden;
}

.hero-image { /* FVother_1x.webp の背景画像 */
	width: 100%;
	height: 100%; /* 親要素の高さに合わせる */
	object-fit: cover; /* 画像がセクション全体を覆うように拡大縮小 */
	object-position: center top; /* 画像の上部を中央に配置するイメージ */
	z-index: 0; /* 最背面 */
	position: absolute; /* 親要素に対して絶対配置 */
	top: 0;
	left: 0;
}

.hero-text-overlay3 { /* section-hero1.php のキャッチコピーを想定 */
	z-index: 1; /* 画像の上に表示 */
	position: absolute;
	transform: translate(-50%, -50%); /* 自身のサイズを考慮して中央に配置 */
	width: 100%; /* オーバーレイ全体の幅 */
	display: flex; /* Flexboxコンテナにする */
	align-items: center;
	top: 50%;
	left: 50%;
}

.hero-catchcopy3 {
	position: absolute;
	max-width: 60vw; /* 親要素の幅を超えないように */
	min-width: 450px;
	height: auto;
	margin-left: 2vw;
	z-index: 1;
}

.hero-catchcopy3-sp {
	display: none;
}

.try-img3 {
	position: absolute;
	max-width: 35vw; /* 画像のサイズを調整 */
	min-width: 300px;
	height: auto;
	transform: translateX(calc(90vw - 90%)); /* 全体的に少し右にずらす (画像を見て調整) */
	z-index: 2;
	margin-top: clamp(20px, 25vw, 500px);
}

.try-img3-sp {
	display: none;
}

.hero-bottom-info {
	position: absolute;
	bottom: 50px; /* 画面下からの距離 */
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	display: flex;
	justify-content: center; /* 中央に配置 */
	gap: 20px; /* アイテム間の間隔 */
	width: 90%;
	max-width: 800px; /* 適宜調整 */
}

.hero-bottom-info .info-item {
	flex-basis: 1; /* 各アイテムが均等な幅になるように */
	display: flex;
	justify-content: center;
	align-items: center;
}

/*スマホ*/
@media (max-width: 768px) {
	.hero-image {
		position: absolute; /* relativeに戻してフロー内で配置 */
		height: 100%; /* アスペクト比を維持 */
		width: 100%;
		top: 0;
		left: 0;
		object-fit: cover;
		object-position: center center; /* 小画面では中央寄せに */
		z-index: 0;
	}

	.hero-section {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.hero-text-overlay3 { /* section-hero1.php のキャッチコピーを想定 */
		z-index: 1; /* 画像の上に表示 */
		position: absolute;
		transform: translate(-50%, -50%); /* 自身のサイズを考慮して中央に配置 */
		width: 110%; /* オーバーレイ全体の幅 */
		display: flex; /* Flexboxコンテナにする */
		flex-direction: column; /* 子要素を縦に並べる */
		top: 50%;
		left: 50%;
		padding-bottom:10%;
	}

	.hero-catchcopy3 {
		display: none;
	}

	.hero-catchcopy3-sp {
		display: block;
		max-width: 100%; /* 小画面でのキャッチコピー画像の最大幅 */
		margin-bottom: 20px;
		transform: translateX(0); /* ずらしをリセット */
	}

	.try-img3-sp {
		display: block;
		max-width: 300px; /* 小さくする */
		margin-right: 0%;
		margin-top: 60px;
		margin-bottom: 100px;
		align-self: center; /* 中央に配置 */
		transform: translateX(0); /* ずらしをリセット */
		z-index: 2;
	}

	.try-img3{
		display: none;
	}

	.hero-bottom-info {
		flex-direction: column; /* 縦に並べる */
		bottom: 20px;
		gap: 10px; /* 間隔を詰める */
		width: 100%;
		max-width: 300px; /* 中央寄せ用 */
	}

	/* ナビゲーションのモバイル調整 */
	.main-navigation {
		width: 100%;
	}

	.header-nav-list {
		flex-direction: column;
		text-align: center;
		gap: 10px; /* ナビ項目間の隙間を調整 */
	}

	.header-nav-link {
		font-size: 18px;
	}

	.reserve-button-wrap {
		width: 100%;
		text-align: center;
	}

	.header-reserve-button {
		width: 100%;
		padding: 15px 10px;
		font-size: 18px;
	}
}


/* ======================================== */
/* ヒーローセクション end
/* ======================================== */


/* ======================================== */
/* コンセプトセクション
/* ======================================== */
.concept {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5% 0;
	box-sizing: border-box;
}

.concept-inner {
	font-weight: bold;
	display: flex;
	flex-direction: row;
	gap: 3vw;
	align-items: center;
	max-width: 90vw;
	box-sizing: border-box;
}

.concept-image {
	flex-shrink: 0;
	text-align: center;
	max-width: 35vw;
}

.green-ribbon {
	width: 100%;
	height: auto;
}

/* コンセプトセクションのモバイル対応 */
@media (max-width: 768px) {
	.concept {
		padding: 40px 20px;
	}

	.concept-inner {
		flex-direction: column;
		gap: 30px;
		padding: 0 20px;
	}

	.concept-image {
		width: 180px;
		padding-top: 0;
	}
}
/* ======================================== */
/* コンセプトセクション end
/* ======================================== */

/* ======================================== */
/* バナーセクション
/* ======================================== */
.banner {
	display: block;
	padding: 5% 0;
	background-color: var(--base-bg-color);
}

.banner-pc{
	padding: 5% 0;
}

.banner-sp {
	display: none;
}

.banner-area {
	width: 80%;
	margin: 0 auto;
	padding: 0 20px;
	overflow: hidden; /* PCで横並び、モバイルでSwiperがはみ出さないように */
}

.frame {
	display: flex;
	justify-content: space-around; /* バナー間のスペースを均等にする */
	align-items: flex-start; /* 上揃え */
	gap: 20px; /* バナー間の隙間 */
	flex-wrap: nowrap; /* PCでは折り返さない */
}

.frame picture {
	flex-shrink: 0; /* 縮小させない */
	width: calc(33.333% - (40px / 3)); /* 3列表示とgapを考慮 */
	overflow: hidden; /* 画像の角を丸くする */
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

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

/* Swiper関連の追加スタイル */
.banner-slider {
	width: 100%; /* モバイル時にが幅いっぱいに広がるように */
	margin: 0 auto;
	overflow: hidden; /* Swiperのコンテンツがはみ出さないように */
}

.banner-slider .swiper-slide {
	display: flex; /* スライド内の画像を中央揃えにする場合など */
	justify-content: center;
	align-items: center;
}

.banner-slider .swiper-slide picture {
	width: 100%; /* スライド内の画像が幅いっぱいに表示されるように */
	max-width: none; /* 個別のmax-widthを解除してSwiperの幅に合わせる */
	box-shadow: none; /* Swiper内のスライドには個別の影をつけないか、Swiper全体につける */
	transform: none; /* ホバー効果もSwiper内では適用しない */
}

/* Swiper ページネーションのスタイル調整 */
.banner-slider .swiper-pagination.banner-pagination {
	position: static; /* デフォルトの absolute を解除 */
	margin-top: 20px; /* スライダーの下に余白 */
	text-align: center;
}

.banner-slider .swiper-pagination.banner-pagination .swiper-pagination-bullet {
	background: var(--color-accent-red); /* ドットの色 */
	opacity: 0.5;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	transition: all 0.3s ease;
}

.banner-slider .swiper-pagination.banner-pagination .swiper-pagination-bullet-active {
	opacity: 1;
	width: 12px;
	height: 12px;
}

/* --- レスポンシブ対応 --- */
/* バナーセクション - モバイル時のみSwiper適用 */
@media (max-width: 768px) {
	.banner-sp {
		display: block;
	}

	.banner-pc {
		display: none;
	}

	.banner-area {
		padding: 0 20px; /* 左右の余白を少し狭める */
		width:100%;
		margin:0;
	}

	/* Swiperが適用されるため、frameのFlexbox設定を無効化（Swiperが自動でdisplay: flex; を設定する） */
	.frame {
		display: block; /* Swiperコンテナの親要素なのでblockに戻す */
		gap: 0; /* gapも不要 */
		flex-wrap: unset; /* Flexboxの折り返しもunset */
	}

	.frame picture {
		width: 100%; /* Swiperのスライドとして100%幅に */
		max-width: none; /* 個別の最大幅を解除 */
		margin: 0 auto; /* 中央寄せ */
		box-shadow: none; /* Swiper内のスライドには影をつけない */
		transform: none; /* ホバー効果もモバイルでは適用しない */
	}

	/* Swiperが適用されるので、Swiperのクラスに対するスタイルを調整 */
	.banner-slider .swiper-wrapper {
		align-items: center; /* スライド内の画像を垂直中央揃えにする場合 */
	}
	.banner-slider .swiper-slide {
		display: flex; /* スライド内の画像を中央揃え */
		justify-content: center;
		align-items: center;
	}
}
/* ======================================== */
/* バナーセクション end
/* ======================================== */

/* ======================================== */
/* メニューセクション
/* ======================================== */
.price-menu-section {
	padding: 40px 180px 0;
	max-width: 100%;/* '100%'は親要素の幅いっぱいに広がることを意味します。親要素の幅を超えることを許容しないという点で意味があります*/
	margin: 0 auto; /* 要素を親要素内で水平方向に中央寄せにする */
	text-align: center; /* この要素内のインラインコンテンツ（テキスト、画像など）を中央揃えにする */
	box-sizing: border-box; /* paddingとborderを要素のwidth/heightの計算に含めるようにする */
	/* グリッドレイアウトを適用する */
	display: grid;
	/* グリッドの列を1つ定義し、利用可能なすべての幅を占めるようにする */
	grid-template-columns: 1fr;
	/* グリッドの行間の隙間を10pxに設定する */
	row-gap: 10px;
}

/* メニュー切り替えタブのスタイル          */
.menu-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap; /* ボタンが多すぎてはみ出る場合に折り返す */
	margin: 20px 0;
	background-color: var(--sb-bg-color);
	padding: 20px 16px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 影を追加 */
}

.menu-tab-button {
	border: none;
	padding: 12px 1.2vw;
	border-radius: 30px;
	font-size: 1.3vw;
	font-weight: bold;
	white-space: nowrap; /* ボタン内のテキストを改行させない */
	cursor: pointer;
	background-color: var(--sb-bg-color);
	color: var(--font-body-jp);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.menu-tab-button.active {
	background-color: var(--color-accent-green); /* アクティブ時の背景色 */
	color: #fff;
}

@media (max-width: 479px) {
	.price-menu-section {
		padding: 20px 20px;
		width: 100%;
		display: block;
	}
	.menu-tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
		flex-wrap: wrap; /* ボタンが多すぎてはみ出る場合に折り返す */
		background-color: var(--sb-bg-color);
		padding: 0;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 影を追加 */
		margin: 40px 0 20px;
	}
	.menu-tab-button {
		border: none;
		padding: 10px 5px;
		border-radius: 0;
		font-size: 0.85rem;
		font-weight: bold;
		white-space: nowrap; /* ボタン内のテキストを改行させない */
		cursor: pointer;
		background-color: var(--sb-bg-color);
		color: var(--font-body-jp);
		transition: background-color 0.3s ease, color 0.3s ease;
	}
	/* 5番目の要素を中央に配置するためのスタイル */
	.menu-tabs .menu-tab-button:nth-child(5) {
		grid-column: 1 / span 2; /* 1列目から2列目までをまたぐ */
		text-align: center; /* 要素内のテキストを中央揃えにする */
	}
}

/* 各メニュー表示エリアの共通スタイル      */
.menu-content-display,
.deep-menu-display,
.ultimate-menu-display {
	justify-items: center;
	background-color: var(--sb-bg-color);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	padding: 3%;
}

.menu-main-area,
.deep-main-area,
.ultimate-content-wrapper {
	/* グリッドレイアウトを適用する */
	display: grid;
	/* グリッドの列を2つ定義し、各々利用可能なすべての幅を占めるようにする */
	grid-template-columns: 1fr 1fr;
	gap:2vw;
}

@media (max-width: 479px) {
	.menu-content-display,
	.deep-menu-display,
	.ultimate-menu-display {
		justify-items: center;
		background-color: var(--sb-bg-color);
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
		width: 100%;
		padding:4vw;
	}

	.menu-main-area,
	.deep-main-area,
	.ultimate-content-wrapper {
		display: flex;
		flex-direction: column;
		gap: 4vw; /* こちらのgapは有効になります */
		align-items: center; /* 子要素を水平方向に中央寄せ */
		width: 100%;
	}
}

/* 左側（画像エリアとテキストエリアの共通スタイル） */
/*.menu-image-area,
特に記載せず*/

.deep-image-area {
	height: clamp(260px, 7.69vw + 152.31px, 300px);

}

.ultimate-image-area {
	height: clamp(280px, 13.46vw + 91.54px, 350px);
}

.menu-image-area img{
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	margin-bottom: 1vw;
}

.deep-image-area img,
.ultimate-image-area img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.menu-item-title,
.deep-display-title,
.ultimate-title {
	font-size: 1.8vw;
	font-weight: bold;
	color: var(--color-accent-green);
	margin-bottom: 0.5vw;
	text-align: left;
}

.menu-item-description,
.deep-display-description,
.ultimate-description {
	font-size: 1.3vw;
	font-weight: bold;
	line-height: 1.7;
	text-align: left;
	color: #35353B;
	margin-top: auto;
}

@media (max-width: 479px) {
	.menu-image-area img,
	.deep-image-area img,
	.ultimate-image-area img{
		width: 100%;
		height: auto;
		max-height: 400px;
		object-fit: cover;
		border-radius: 8px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
		margin-bottom: 3vw;
	}
	.menu-item-title,
	.deep-display-title,
	.ultimate-title {
		font-size: 24px;
		font-weight: bold;
		color: var(--color-accent-green);
		margin-bottom: 1vw;
		text-align: left;
	}
	.menu-item-description,
	.deep-display-description,
	.ultimate-description {
		font-size: 15px;
		font-weight: bold;
		line-height: 1.7;
		text-align: left;
		color: #35353B;
		margin-top: auto;
	}
}
/* 右側（料金表（と初回限定）エリアの共通スタイル） */
/*.menu-price-table-wrapper {
}
特に記載せず*/

/* --- 初回限定プランのスタイル --- */
.first-time-offer {
	display: flex;
	width: 100%; /* 親要素の幅いっぱいに広げる */
	box-sizing: border-box;
	font-weight: bold;
	font-size: 2.4vw;
	margin-bottom: 1.5vw;
}

/* 左側の「初回限定プラン」部分 */
.first-time-offer .offer-label {
	background-color: #596F8E;
	color: #fff;
	font-size: 1.5vw;
	padding: 8px 0px;
	border-radius: 5px 0 0 5px;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

/* 右側の時間と料金部分 */
.first-time-offer .offer-details {
	display: flex;
	align-items: center; /* 垂直方向の中央揃え */
	justify-content: center; /* 水平方向の中央揃え */
	gap: 8px;
	padding: 8px 30px;
	border-radius: 0 5px 5px 0;
	white-space: nowrap; /* テキストが折り返さないように維持 */
	border: 2px solid #596F8E;
	flex: 1;
}

/* ---料金表の共通スタイル---    */
.menu-price-table,
.deep-price-table {
	width: 100%;
	border-radius: 8px;
	overflow: hidden; /* 角丸を適用するため */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	font-weight: bold;
	text-wrap: nowrap;
	font-size: 1.5vw;
	justify-content: center;
}

.table-header {
	display: flex;
	background-color:var(--color-accent-green);
	color: #fffdf9;
	font-weight: bold;
	width: 100%;
}

.header-cell {
	flex: 1;
	padding: 0.9vw 1vw;
	text-align: center;
	border-right: 2.5px solid #fffdf9; /* ヘッダーの区切り線 */
}

.table-header .header-cell:last-child {
	border-right: none;
}

.table-row {
	display: flex;
	border-bottom: 1.5px solid #EFEFED; /* 行間の区切り線 */
}

.data-cell {
	display: flex;
	flex: 1;
	padding: 12px 15px;
	justify-content: center;
	position: relative;
	align-items: center;
}

.recommended-label {
	color: var(--color-accent-red);
	font-weight: bold;
	text-align: left;
	margin-right: auto;
	font-size: 1.2vw;
}

.time-group {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.table-row .data-cell:last-child {
	font-weight: bold;
	font-size: 1.7vw;
}

@media (max-width: 479px) {
	.menu-price-table-wrapper {
		width: 100%;
	}
	/* --- 初回限定プランのスタイル --- */
	.first-time-offer {
		display: flex;
		width: 100%; /* 親要素の幅いっぱいに広げる */
		box-sizing: border-box;
		font-weight: bold;
		font-size: 1.2rem;
		margin-bottom: 3vw;
	}

	/* 左側の「初回限定プラン」部分 */
	.first-time-offer .offer-label {
		background-color: #596F8E;
		color: #fff;
		padding: 8px 0px;
		font-size: 1rem;
		border-radius: 5px 0 0 5px;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}

	/* 右側の時間と料金部分 */
	.first-time-offer .offer-details {
		display: flex;
		align-items: center; /* 垂直方向の中央揃え */
		justify-content: center; /* 水平方向の中央揃え */
		gap: 8px;
		padding: 8px 20px;
		border-radius: 0 5px 5px 0;
		white-space: nowrap; /* テキストが折り返さないように維持 */
		border: 2px solid #596F8E;
		flex: 1;
	}

	/* ---料金表の共通スタイル---    */
	.menu-price-table,
	.deep-price-table {
		width: 100%;
		border-radius: 8px;
		overflow: hidden; /* 角丸を適用するため */
		box-shadow: none;
		font-weight: bold;
		text-wrap: nowrap;
		font-size: 1.2rem;
		justify-content: center;
	}

	.table-header {
		display: flex;
		background-color:var(--color-accent-green);
		color: #fffdf9;
		font-weight: bold;
		width: 100%;
	}

	.header-cell {
		flex: 1;
		padding: 8px 15px;
		text-align: center;
		border-right: 2.5px solid #fffdf9; /* ヘッダーの区切り線 */
	}

	.table-header .header-cell:last-child {
		border-right: none;
	}

	.table-row {
		display: flex;
		border-bottom: 1.5px solid #EFEFED; /* 行間の区切り線 */
	}

	.data-cell {
		display: flex;
		flex: 1;
		padding: 8px 2px;
		justify-content: center;
		position: relative;
		align-items: center;
	}

	.recommended-label {
		color: var(--color-accent-red);
		font-weight: bold;
		text-align: left;
		margin-right: auto;
		font-size: 0.7rem;
	}

	.time-group {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.table-row .data-cell:last-child {
		font-weight: bold;
		font-size: 1.2rem;
	}
}

/* ======================================== */
/* 極癒トリートメント専用のスタイル        */
/* ======================================== */
/* かなりお疲れなあなたへ */
.deep-catchphrase {
	font-size: 1.2vw;
	color: var(--color-accent-green);
	margin-bottom: 10px;
	font-weight: bold;
	border: 2px solid var(--color-accent-green);
	border-radius: 8px 8px 8px 0;
	max-width: fit-content;
	padding: 0.5rem 1rem;
}

.deep-price-img {
	order: 2;
	width: 100%;
}
.deep-price-table {
	order: 3;
	width: 100%;
}

/* 追加メニューセクションのスタイル */
.additional-menu-section {
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	order:4;
	width:100%;
}

/* 追加メニューセクションのスタイル */
.menu-container {
	display: flex;
	background-color: #F5F8F6;
	overflow: hidden;
	width: 100%;
}

/*  追加メニュー欄 */
.side-text {
	display: flex;
	align-items: flex-start;
	padding-left: 15px;
	padding-right: 15px;
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 1.7vw;
	font-weight: bold;
	color:var(--color-accent-green);
	letter-spacing: 0.1em;
	white-space: nowrap;
	padding-top: 20px;
}

/* メニュー料金欄 */
.menu-items {
	flex-grow: 1;/* flexコンテナ内の余ったスペースをすべて占有するように設定 */
	padding-right: 30px;
	font-weight: bold;
	white-space: nowrap;
}

/* メニュー料金欄の１行 */
.menu-item {
	display: flex;
	padding: 10px 0 6px 0;
	border-bottom: 1.5px solid #EFEFED;
}

/* メニュー */
.item-name {
	font-size: 1.3vw;
	text-align: left;
	flex-grow: 1;
}

/* 料金 */
.item-price {
	font-size: 1.3vw;
	text-align: right;
	min-width: 70px;
}

@media (max-width: 479px) {
	.deep-display-image {
		order: 1;
	}
	.deep-text-area {
		order: 2;
	}
	.deep--price-table {
		order: 3;
	}

	.deep-catchphrase {
		font-size: 1rem;
	}

	.menu-container {
		display: block;
		background-color: transparent;
		width: 100%;
	}

	/*  追加メニュー欄 */
	.side-text {
		display: flex;
		justify-content:  center;
		padding-left: 5px;
		padding-right: 5px;
		writing-mode: unset;
		text-orientation: upright;
		font-size: 1.3rem;
		font-weight: bold;
		color:var(--color-accent-green);
		letter-spacing: 0.1em;
		white-space: nowrap;
		padding-top: 0;
	}
	/* メニュー料金欄 */
	.menu-items {
		flex-grow: 1;/* flexコンテナ内の余ったスペースをすべて占有するように設定 */
		font-weight: bold;
		white-space: normal;
		padding: 0 15px;
	}
	.item-name,.item-price {
		font-size: 18px;
	}
}
/* ======================================== */
/* 至極トリートメント専用のスタイル        */
/* ======================================== */
.ultimate-header {
	width: 100%;
	order: 1;
}

.ultimate-catchphrase {
	font-size: 1.1vw;
	color: var(--color-accent-green);
	margin-bottom: 10px;
	font-weight: bold;
	border: 2px solid var(--color-accent-green);
	border-radius: 8px 8px 8px 0;
	max-width: fit-content;
	padding: 0.5rem 1rem;
}

.ultimate-image-area {
	order :2;
}
.time-value,.time-unit {
	font-weight: bold;
	font-size: 1.7vw;
}

/* 全体のスタイル設定（必要に応じて調整） */
.ultimate-price-block {
	padding: 20px;
	overflow: hidden; /* 子要素のフロート解除 */
	box-sizing: border-box; /* パディングとボーダーを幅に含める */
	order:3;
}

/* 01 極癒トリートメント の部分 */
.ultimate-price-block .block-title {
	display: flex; /* 横並び */
	align-items: center; /* 垂直方向中央揃え */
	margin-bottom: 10px;
}

.ultimate-price-block .block-number {
	color: var(--color-accent-green);
	padding: 5px 12px;
	font-size: 1.5vw; /* フォントサイズ */
	font-weight: bold;
	margin-right: 10px;
}

.ultimate-price-block .block-name {
	background-color: var(--color-accent-green);
	color: #FFFDF9; /* 文字色 */
	padding: 10px 18px;
	border-radius: 999px; /* 角丸の形状 */
	font-size: 1.3vw;
	font-weight: bold;
}

/* オプション部分 (+ 魔法の手 + ホットアイマスク) */
.ultimate-price-block .block-options {
	display: flex; /* 横並び */
	align-items: center; /* 垂直方向中央揃え */
	flex-wrap: wrap; /* 要素が収まらない場合に折り返す */
	margin-bottom: 30px;
	gap: 10px; /* 各要素間の隙間 */
}

.ultimate-price-block .block-options span {
	padding: 8px 15px; /* パディング */
	border-radius: 999px; /* 角丸 */
	font-size: 1.2vw;
	font-weight: bold;
	color: #FFFDF9; /* 文字色 */
	white-space: nowrap; /* テキストの折り返しを防ぐ */
}

/* 「+」記号のスタイル */
.ultimate-price-block .block-options span:nth-child(odd) { /* 1番目と3番目のspan (つまり'+'の部分) */
	background: none; /* 背景なし */
	color: #4b463f; /* 白い文字 */
	padding: 0; /* パディングなし */
	font-size: 1.4vw;
	font-weight: bold;
}

/* 「魔法の手」のスタイル */
.ultimate-price-block .block-options span:nth-child(2) { /* 2番目のspan */
	background-color:var(--color-accent-red); /* 画像の「魔法の手」の色に近似 */
	color: #FFFDF9;
}

/* 「ホットアイマスク」のスタイル */
.ultimate-price-block .block-options span:nth-child(4) { /* 4番目のspan */
	background-color: var(--color-accent-blue); /* 画像の「ホットアイマスク」の色に近似 */
	color: #FFFDF9;
}

/* 美活力 に適用するスタイル */
.note-bivitality {
	font-weight: bold;
	font-size: 1.5vw;
	/* その他のスタイル */
}

/* ドリンク付 に適用するスタイル */
.note-drink {
	font-size: 1vw;
	font-weight: bold;
	/* その他のスタイル */
}

/* 料金テーブル部分 */
.ultimate-price-block .block-prices {
	width: 100%;
}

.ultimate-price-block .price-row {
	display: flex;
	align-items: center; /* 垂直中央揃え */
	padding: 5px 0;
	border-bottom: 1.5px solid #EFEFED;
}

.ultimate-price-block .price-row .recommended-text {
	color: var(--color-accent-red);
	font-weight: bold;
	min-width: 60px; /* 「オススメ」の最低幅を確保 */
	text-align: center;
	flex-shrink: 0; /* 縮小しない */
	font-size:1,1vw;
	margin-right:1vw;
}

.ultimate-price-block .price-row .time {
	flex: 0 0 80px; /* 時間の幅を固定 */
	text-align: center;
	font-size: 1.3vw;
	font-weight: bold;
	margin-right: 20px;
	flex-shrink: 0; /* 縮小しない */
}

.ultimate-price-block .price-row .price {
	flex-grow: 1; /* 残りのスペースを埋める */
	font-size: 2vw;
	font-weight: bold;
	text-align: center; /* 価格の左揃え */
	flex-shrink: 0; /* 縮小しない */
}

.ultimate-price-block .price-row .note {
	font-size: 1.2vw;
	color: #EFEFED(255, 255, 255, 0.7);
	white-space: nowrap; /* テキストの折り返しを防ぐ */
	flex-shrink: 0; /* 縮小しない */
}

/* ========================================= */
/* レスポンシブ対応 (最大479pxまでの画面幅に適用) */
/* ========================================= */
@media (max-width: 479px) {
	.ultimate-image-area {
		order:1;
	}
	.ultimate-header {
		order: 2;
	}
	.ultimate-price-block {
		order: 3;
		padding: 0;
	}
	.time-value, .time-unit {
		font-size: 1.2rem;
	}

	.ultimate-catchphrase {
		font-size: 1rem;
	}

	/* 01 極癒トリートメント の部分 */
	.ultimate-price-block .block-title {
		flex-direction:row; /* 縦並びに変更 */
		align-items: flex-start; /* 左寄せ */
		margin-bottom: 0;
	}

	.ultimate-price-block .block-number {
		margin-right: 0; /* 右マージンをリセット */
		margin-bottom: 10px; /* 下に少しマージン */
		font-size: 1.1em;
		padding: 4px 10px;
	}

	.ultimate-price-block .block-name {
		font-size: 1.1em;
		padding: 4px 12px;
	}

	/* オプション部分 (+ 魔法の手 + ホットアイマスク) */
	.ultimate-price-block .block-options {
		display:block;
		flex-direction:row; /* 縦並びに変更 */
		align-items: flex-start; /* 左寄せ */
		margin-bottom: 0;
		gap: 8px; /* 隙間を少し小さく */
	}

	.ultimate-price-block .block-options span {
		font-size: 0.9em;
		padding: 6px 12px;
	}

	.ultimate-price-block .block-options span:nth-child(odd) {
		font-size: 1.2em; /* '+'記号を少し小さく */
	}

	/* 料金テーブル部分 */
	.ultimate-price-block .price-row {
		flex-wrap: wrap; /* 要素が収まらない場合に折り返す */
		padding: 0;
		align-items: flex-end; /* 下揃え */
	}

	.ultimate-price-block .price-row .recommended-text {
		margin-right: 10px;
		font-size: 0.9em;
		min-width: unset; /* 最低幅を解除 */
		text-align: left; /* 左寄せ */
	}

	.ultimate-price-block .price-row .time {
		flex: none; /* 幅の固定を解除 */
		width: auto; /* 幅を自動調整 */
		margin-right: 10px;
		font-size: 1em;
	}

	.ultimate-price-block .price-row .price {
		font-size: 1.3em;
		margin-right: auto; /* 価格の右側に自動マージンで左寄せ */
	}

	.ultimate-price-block .price-row .note {
		flex-basis: 100%; /* 「美活力ドリンク付」を次の行に配置 */
		text-align: right;
		font-size: 0.8em;
	}

	.note-bivitality {
		font-size: 14px;
	}

	.note-drink {
		font-size: 14px;
	}
}


/* ======================================== */
/* "+"のスタイル   */
/* ======================================== */

.plusicon {
	display: flex;
	margin: 1vw auto;
}

/* ======================================== */
/* "+"のスタイル end  */
/* ======================================== */



/* ======================================== */
/* オプションメニューセクションのスタイル   */
/* ======================================== */
/* オプションメニュー基本スタイル */
.option-menu {
	padding: 0 180px 40px 180px;
}

.option-menu-container {
	display: flex; /* ヘッダーとコンテンツを横並びにする */
	border-radius: 6px; /* 角丸の適用 */
	border: 2px solid #A9A9A9; /* 細いグレーの線で囲む */
	font-weight: bold;
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

/* オプションメニューヘッダーのスタイル */
.option-menu-header {
	flex-shrink: 0; /* ヘッダーが縮まないようにする */
	max-width: fit-content; /* ヘッダーの固定幅を少し広げる */
	background-color: #A9A9A9; /* 画像の左側のグレーの背景色 */
	color: #fffdf9; /* テキストを白に */
	display: flex; /* h4を垂直・水平中央に配置するため */
	align-items: center; /* 垂直方向の中央揃え */
	justify-content: center; /* 水平方向の中央揃え */
	padding: 20px 3vw; /* 内部パディングを調整 */
}

/* オプションメニューヘッダー内のh4のスタイル */
.option-menu-header h4 {
	font-size: 1.4vw; /* フォントサイズ */
	font-weight: bold; /* 太字 */
	color: #fffdf9; /* テキスト色を白に */
	letter-spacing: 0.1em; /* 文字間隔の調整 */
	line-height: 1.8; /* 行の高さ */
	text-align: left; /* テキストを中央揃え */
}

/* コンテンツ部分のスタイル */
.option-menu-content {
	flex-grow: 1; /* 残りのスペースを全て埋めるようにする */
	background-color: #FFFDF9; /* 画像のコンテンツ部分の背景色 */
	padding: 25px 3vw; /* コンテンツ全体のパディングを調整 */
	border: 2px solid #A9A9A9; /* 細いグレーの線で囲む */
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2列表示 */
	gap: 3vw; /* グループ間の縦方向のギャップ */
}

/* オプショングループのスタイル */
.option-group {
	display: flex;
	flex-direction: column; /* グループ内のアイテムを縦に並べる */
}

/* オプションアイテムのスタイル */
.option-item {
	display: flex;
	flex-wrap: wrap; /* 重要: noteが次の行に折り返すようにする */
	justify-content: space-between; /* ラベルと値を左右に配置 */
	align-items: flex-end; /* テキストのベースラインではなく下揃え */
	padding: 8px 0; /* アイテムの上下パディング */
	border-bottom: 1px solid #EFEFED; /* 各アイテム間の点線 */
}

/* オプションラベルのスタイル */
.option-label {
	white-space: nowrap; /* テキストの折り返しを防ぐ */
	/* flex-basis: auto; を指定すると、justify-content: space-between; と合わせて自動調整 */
}

/* オプション値のスタイル */
.option-value {
	font-size: 1.3vw;
	white-space: nowrap; /* テキストの折り返しを防ぐ */
	text-align: right; /* 右寄せ */
}

/* オプション注釈のスタイル (PHPでitem-specific-noteを使っているため、このクラス名に統一) */
.item-specific-note { /* クラス名を修正 */
	font-size: 1vw; /* 注釈のフォントサイズを調整 */
	margin: 2px 0 0 0; /* 上下マージンを調整。下に続くアイテムとの間隔はoption-itemのpadding-bottomで調整 */
	padding-left: 0; /* 左パディングをなくす */
	line-height: 1.4; /* 行の高さ */
	width: 100%; /* ノートが独立した行になるように強制改行 */
	text-align: right; /* 注釈を右寄せに */
}

@media (max-width: 479px) {
	.option-menu {
		padding: 20px 20px;
		width: 100%
	}
	.option-menu-container {
		display: block;
		border-radius: 6px; /* 角丸の適用 */
		border: 4px solid #A9A9A9; /* 細いグレーの線で囲む */
		font-weight: bold;
		box-sizing: border-box;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	/* オプションメニューヘッダーのスタイル */
	.option-menu-header {
		width: 100%; /* ヘッダーの固定幅を少し広げる */
		background-color: #A9A9A9; /* 画像の左側のグレーの背景色 */
		color: #fffdf9; /* テキストを白に */
		display: flex; /* h4を垂直・水平中央に配置するため */
		align-items: center; /* 垂直方向の中央揃え */
		justify-content: center; /* 水平方向の中央揃え */
		padding: 1vw; /* 内部パディングを調整 */
		max-width: 100%;
	}

	/* オプションメニューヘッダー内のh4のスタイル */
	.option-menu-header h4 {
		font-size: 18px; /* フォントサイズ */
		font-weight: bold; /* 太字 */
		color: #fffdf9; /* テキスト色を白に */
		letter-spacing: 0.1em; /* 文字間隔の調整 */
		line-height: 1.8; /* 行の高さ */
		text-align: center; /* テキストを中央揃え */
	}

	/* コンテンツ部分のスタイル */
	.option-menu-content {
		flex-grow: 1; /* 残りのスペースを全て埋めるようにする */
		background-color: #FFFDF9; /* 画像のコンテンツ部分の背景色 */
		padding: 2vw; /* コンテンツ全体のパディングを調整 */
		display: grid;
		grid-template-columns: 1fr; /* 1列表示 */
		gap: 0; /* グループ間の縦方向のギャップ */
		font-size: 14px;
	}

	/* オプショングループのスタイル */
	.option-group {
		display: flex;
		flex-direction: column; /* グループ内のアイテムを縦に並べる */
	}

	/* オプションアイテムのスタイル */
	.option-item {
		display: flex;
		flex-wrap: wrap; /* 重要: noteが次の行に折り返すようにする */
		justify-content: space-between; /* ラベルと値を左右に配置 */
		align-items: flex-end; /* テキストのベースラインではなく下揃え */
		padding: 8px 0; /* アイテムの上下パディング */
		border-bottom: 1px solid #EFEFED; /* 各アイテム間の点線 */
	}

	/* オプションラベルのスタイル */
	.option-label {
		white-space: nowrap; /* テキストの折り返しを防ぐ */
		/* flex-basis: auto; を指定すると、justify-content: space-between; と合わせて自動調整 */
	}

	/* オプション値のスタイル */
	.option-value {
		font-size: 18px;
		white-space: nowrap; /* テキストの折り返しを防ぐ */
		text-align: right; /* 右寄せ */
	}

	/* オプション注釈のスタイル (PHPでitem-specific-noteを使っているため、このクラス名に統一) */
	.item-specific-note { /* クラス名を修正 */
		font-size: 0.8rem; /* 注釈のフォントサイズを調整 */
		margin: 2px 0 0 0; /* 上下マージンを調整。下に続くアイテムとの間隔はoption-itemのpadding-bottomで調整 */
		padding-left: 0; /* 左パディングをなくす */
		line-height: 1.4; /* 行の高さ */
		width: 100%; /* ノートが独立した行になるように強制改行 */
		text-align:left; /* 注釈を左寄せに */
	}
}
/* ======================================== */
/* メニューセクション end
/* ======================================== */

/* ======================================== */
/* ビッグバナーセクション
/* ======================================== */
.bigbanner {
	margin-top: 40px;
}

.bigbanner2 {
	display: block;
	margin: 0 auto;
	max-width: 90%;
	height: auto;
}
/* ======================================== */
/* ビッグバナーセクション end
/* ======================================== */

/* ======================================== */
/* ギャラリーセクション */
/* ======================================== */
.gallery-section {
	padding: 5% 7%;
	text-align: center;
}

.gallery-heading {
	margin-bottom: 2%;
}

.gallery-heading h2 {
	margin-bottom: 5px;
}

.gallery-heading h3 {
	padding-bottom: 10px;
}

/* SWIPERのコンテナ */
.swiper-container.gallery-slider {
	margin: 0 auto;
	position: relative; /* SWIPERのページネーションがposition: absolute;の場合、親要素として必要 */
	overflow: hidden; /* はみ出したコンテンツを隠します */
}

/* SWIPERの各スライド */
.swiper-slide.gallery-item {
	display: flex; /* 画像とテキストを横並びにするため */
	align-items: center;
	justify-content: center; /* 中央寄せ */
	gap: 10%; /* 画像とテキストの間の隙間を少し詰める */
	box-sizing: border-box; /* paddingを含めて幅を計算 */
}
.swiper-slide.gallery-item img {
	aspect-ratio: 16/9;
	overflow: hidden;
	width:40%;
}

.gallery-item img {
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	object-fit: cover; /* 画像が歪まないように */
}

.gallery-text {
	text-align: left;
	width: 35%; /* テキストブロックを画像の拡大に合わせて調整 (例: 35%) */
	margin-top: 5%;
	align-items: flex-start;
}

.gallery-text .label {
	border-radius: 3px;
	font-family: var(--font-heading-en);
	font-weight: bold;
	background-color: var(--color-accent-green);
	color: #FFFDF9;
	padding: 5px 15px;
	font-size: 1.1vw;
	margin-bottom: 10px;
}

.gallery-text .gallery-title {
	font-family: var(--font-heading-jp);
	font-weight: bold;
	font-size: 1.6vw;
	margin-bottom: 15px;
}

.gallery-description {
	font-family: var(--font-body-jp);
	font-weight: bold;
	font-size: 1.2vw;
	line-height: 1.6;
	min-height: 11rem;
}

.swiper-wrapper {
	margin-bottom: 3%;
}

/* SWIPERのページネーション（ドット）スタイル */
.swiper-pagination-gallery {
	display: flex;
	justify-content: center; /* ドット自体を中央に集めるために追加 */
	position: absolute;   /* 親要素(.swiper-container)を基準に配置 */
	z-index: 10;          /* 画像の前面に表示 */
	/* 画像エリアの中央に配置するための設定 */
	left: 27.5%!important; /* (※計算方法：space-evenlyによる余白 (約7.5%)＋画像の幅の半分 (20%)) 画像の中心に合わせるための値 */
	transform: translateX(-50%); /* 要素自体の幅を考慮して中央揃え */
}

.swiper-pagination-bullet {
	background: var(--color-accent-green)!important;
	opacity: 0.5;
	width: 1vw;
	height: 1vw;
	border-radius: 50%;
	transition: opacity 0.3s ease;
	margin: 0 1% !important;
}

.swiper-pagination-bullet-active {
	background: var(--color-accent-green)!important;
	opacity: 1;
}

/* レスポンシブデザインの調整 */
@media screen and (max-width: 767px) {
	/* SWIPERのページネーション（ドット）スタイル - モバイル */
	.swiper-pagination {
		bottom: 10px; /* モバイルでの下からの位置を調整 */
	}

	.swiper-pagination-gallery {
		position: absolute; /* SWIPERのドットは通常absoluteで配置される */
		bottom: 0px !important;
		width: auto; /* 幅をコンテンツに合わせる */
		display: flex; /* ドットを中央に並べるためにflexboxを使用 */
		left: 0 !important; /* (※計算方法：space-evenlyによる余白 (約7.5%)＋画像の幅の半分 (20%)) 画像の中心に合わせるための値 */
		transform: translateX(0%); /* 要素自体の幅を考慮して中央揃え */
		margin:0;
	}

	.gallery-section {
		padding: 50px 0;
	}

	.swiper-container.gallery-slider {
		width: 95%; /* モバイルではさらに幅を広げる */
		max-width: none; /* モバイルでは最大幅の制限をなくす */
	}

	.swiper-slide.gallery-item img {
		width: 100%;
	}

	.swiper-slide.gallery-item {
		flex-direction: column; /* 画像とテキストを縦並びにする */
		gap: 20px;
		padding: 15px; /* モバイルでのパディング */
	}

	.gallery-item img {
		width: 100%; /* モバイルでは画像を幅いっぱいに */
		max-width: 400px; /* モバイルでの画像の最大幅を調整 */
		height: auto;
		aspect-ratio: 16/9;
	}

	.gallery-text {
		text-align: center; /* モバイルではテキストも中央寄せ */
		width: 100%; /* モバイルではテキストブロックも幅いっぱいに */
		max-width: none; /* モバイルでは最大幅の制限をなくす */
	}

	.gallery-text .label {
		font-size: 0.7rem;
	}

	.gallery-text .gallery-title {
		font-size: 1.5rem;
	}

	.gallery-text p {
		font-size: 0.9rem;
	}
	.gallery-description {
		min-height: 3rem;
	}

	.swiper-pagination-bullet {
		width: 12px;
		height: 12px;
		margin: 0 3vw !important;
	}

}
/* ======================================== */
/* ギャラリーセクション end
/* ======================================== */

/* ======================================== */
/* スタッフセクション
/* ======================================== */
.staff {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 5% 10% 0 10%;
	box-sizing: border-box;
}

.staff-inner {
	gap: 3%;
	width: 100%;
	box-sizing: border-box;
	display:grid;
	grid-template-columns:1fr 1.7fr;
}

.staff-image-area {
	overflow: hidden; /* 画像がはみ出た場合に隠す */
	display: flex; /* flexboxを使って画像を中央に配置したり、調整しやすくする */
	justify-content: center; /* 水平方向の中央寄せ */
	align-items: center; /* 垂直方向の中央寄せ */
}

.staffimg {
	border-radius: 8px;
	width: 100%; /* 親要素 (staff-image-area) の幅いっぱいに広げる */
	height: 28vw; /* 幅に合わせて高さを自動調整し、アスペクト比を維持する */
	max-height: 450px;
	display: block; /* 画像の下にできる余白をなくす */
}

.subtext {
	text-align: left;
	margin-top: 1.5rem;
	font-weight: bold;
}

/* --- スタッフセクションレスポンシブ対応 --- */

/* タブレット・スマートフォン向け */
@media (max-width: 768px) {
	.staff {
		padding: 20px 0;
	}

	.staff-inner {
		flex-direction: column; /* 縦並びにする */
		gap: 30px; /* ギャップを小さくする */
		padding: 0 20px; /* 左右のパディングを減らす */
		text-align: center; /* 中央寄せ */
		display:flex;
	}

	.staff-image {
		width: 100%; /* 幅をいっぱいに使う */
		text-align: center; /* テキストを中央寄せ */
	}

	.staff-text {
		text-align: center; /* スタッフ見出しを中央寄せ */
	}

	.subtext {
		text-align: center; /* サブテキストを中央寄せ */
		margin-top: 1rem; /* マージンを調整 */
	}
	.staff-inner picture, /* picture要素も親要素に合わせる */
	.staff-inner picture img { /* 画像自体を親要素に合わせる */
		max-width: 100%; /* 親要素の幅を超えないようにする */
		height: auto;    /* 縦横比を維持する */
		display: block;  /* 画像の下に不要な余白が入るのを防ぐ */
		margin: 0 auto;  /* 中央寄せにする（もし必要なら） */
		border-radius: 8;
	}
}

/* ======================================== */
/* スタッフセクション end
/* ======================================== */


/* ======================================== */
/* 代表メッセージセクション
/* ======================================== */
.message-section {
	padding: 5% 10%; /* セクションの上下の余白 */
}

.message-title-main {
	text-align: left;
	margin-bottom: 10px;
}

.message-subtitle-main {
	margin-bottom: 5%;
	text-align: left;
}

.message-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8%; /* 画像とテキストの間のスペース */
	justify-content: center;
	margin: 0 auto;
}

.message-image-area {
	flex: 0 0 450px; /* 固定幅 */
	border-radius: 8px;
	position: relative;
	display: flex; /* 画像とプレースホルダー名をフレックスアイテムとして扱う */
	flex-direction: column; /* 画像と名前を縦に並べる */
}

.owner-image-box {
	width: 100%;
}

.message-image-area .owner-image {
	object-fit: cover; /* 画像がエリアに合わせてカバー */
	border-radius: 8px;
}

.owner-name-place {
	width: 80%;
	text-align: center;
	margin: -5% auto;
}

.owner-name-placeholder {
	background-color: #DFA999;
	color: #fff;
	padding: 10px 20px;
	border-radius: 5px;
	font-weight: bold;
	white-space: nowrap; /* テキストが改行されないように */
	font-size: clamp(18px,1vw,25px);
}

.message-text-area {
	font-weight: 500;
	font-size: 1.16vw;
	line-height: 1.8; /* 行の高さ */
	color: #333;
	white-space: nowrap;
	margin-top: calc((var(--font-size-h2-pc)*1.5) + 30px + (var(--font-size-h3-pc)*1.5));
}

.highlight {
	color: #7eb091;
}

.message-intro {
	font-weight: bold;
	color: #8bb89c; /* 最初の段落の文字色 */
	margin-bottom: 25px;
	line-height: 1.8;
}

.message-paragraph {
	margin-bottom: 20px; /* 段落間のスペース */
}

.message-paragraph:last-child {
	margin-bottom: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	.message-title-main {
		text-align: center;
		margin-bottom: 0;
	}

	.message-subtitle-main {
		margin-bottom: 0;
		text-align: center;
	}
	.message-content {
		flex-direction: column; /* 縦並びにする */
		align-items: center; /* 中央寄せ */
		margin-left: 0%;
		padding: 0 20px;
		display:flex;
	}

	.message-image-area {
		position: relative;
		flex: 0 0 200px; /* 固定幅 */
		width: 100%;
		max-width: 350px; /* 縦並びになっても画像の最大幅を維持 */
		margin-bottom: 30px;
	}

	.message-image-area .owner-image {
		display: block;
		object-fit: cover; /* 画像がエリアに合わせてカバー */
		border-radius: 8px;
		aspect-ratio: 9/9;
		object-position: 0 100%;
	}

	.owner-name-place {
		width: 80%;
		text-align: center;
		margin: 0;
	}

	.owner-name-placeholder {
		font-size: 17px;
		position: absolute;
		bottom: 0; /* 親要素(.message-image-area)の下端を基準にする */
		left: 50%;
		width: 100%; /* width: 100% から auto に変更 */
		transform: translate(-50%, 0%); /* 水平中央に寄せ、さらに自身の高さの半分だけ下に移動 */
		background-color: #DFA999;
		color: #fff;
		padding: 10px 20px;
		border-radius: 5px;
		font-weight: bold;
		text-align: center;
		white-space: nowrap; /* 元のPC用CSSから継承 */
	}


	.message-text-area {
		text-align: center; /* テキストを中央寄せ */
		font-size: 0.9rem; /* フォントサイズを少し小さく */
		white-space: wrap;
		margin-top:10%;
	}

	.message-intro,
	.message-paragraph {
		text-align: left; /* 各段落は左寄せを維持（必要であれば） */
		/* または text-align: center; に変更することも検討 */
	}

	.message-section {
		padding: 30px 0;
	}

	.message-subtitle-main {
		margin-bottom: 40px;
	}
}
/* ======================================== */
/* 代表メッセージセクション end
/* ======================================== */

/* ======================================== */
/* FAQセクション
/* ======================================== */
.faq-section {
	padding: 40px 20px;
	text-align: center;
	font-size: 1.2vw;
}

.faq-section .container {
	max-width: 55%;
	margin: 0 auto;
}

.faq-subtitle {
	margin-bottom: 3rem;
}

.faq-item {
	background-color: #fff;
	border-bottom: 1px solid #eee;
	margin-bottom: 10px; /* Space between FAQ items */
}

.faq-question {
	display: flex;
	align-items: center;
	padding: 15px 20px;
	font-size: 1.2vw;
	font-weight: 500;
	color: #333;
	cursor: pointer;
	transition: background-color 0.3s ease;
	text-align: left; /* 念のため、テキストが中央寄せされないように */
}

.faq-question .faq-text-wrapper { /* 新しく追加したクラスを指定 */
	flex-grow: 1; /* 残りのスペースをすべて占めるようにする */
	text-align: left; /* テキストを左詰めに */
}

.faq-question .faq-text {
	flex-grow: 1; /* 残りのスペースをすべて占めるようにする */
	text-align: left; /* テキストを左詰めに */
	margin-right: 15px; /* 必要に応じて、質問テキストとトグルアイコンの間隔を調整 */
}

.faq-question:hover {
	background-color: #f5f5f5;
}

.faq-icon {
	border: 2px solid #7eb091;
	background-color: #fff;
	color: #7eb091;
	width: 25px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1vw;
	font-weight: bold;
	margin-right: 15px;
	flex-shrink: 0; /* Prevent shrinking on smaller screens */
}

.faq-toggle {
	position: relative; /* 疑似要素の基準にする */
	display: inline-block; /* サイズ指定のためにブロック要素化 */
	width: 18px; /* アイコンの幅 (font-sizeに合わせる) */
	min-width: 18px;
	height: 18px; /* アイコンの高さ (font-sizeに合わせる) */
	min-height: 18px;
	text-align: center; /* 中央揃えにする */
	line-height: 1; /* 縦方向の中央揃え */
	font-family: sans-serif; /* デフォルトのフォントの+記号を使うと形が崩れる可能性があるため */
	overflow: hidden; /* はみ出しを隠す */
	margin-left: 15px; /* ここでfaq-textとの間隔を調整 */
}

/* 横線 */
.faq-toggle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.67px; /* 横線の太さ */
	background-color: #7eb091; /* 線の色 */
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}

/* 縦線 */
.faq-toggle::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 1.67px; /* 縦線の太さ */
	height: 100%;
	background-color: #7eb091; /* 線の色 */
	transform: translateX(-50%);
	transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle::after {
	/* 縦線を非表示にする */
	transform: translateX(-50%) scaleY(0); /* 高さを0にするか、スケールを0にする */
	opacity: 0; /* 透明度も0にする */
}

.faq-item.active .faq-toggle {
	color: #7eb091; /* Darker color when active */
}

.faq-answer {
	padding: 0 20px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out, padding 0.3s ease-out;
	display: flex; /* answer-icon と p タグを横並びにする */
	align-items: baseline
}

.answer-icon {
	background-color: #7eb091;
	color: #fff;
	width: 25px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1vw;
	font-weight: bold;
	margin-right: 15px;
	flex-shrink: 0; /* Prevent shrinking on smaller screens */
}

.faq-item.active .faq-answer {
	max-height: 200px; /* Adjust as needed based on your answer content */
	padding: 15px 20px;
}

.faq-answer p {
	margin-bottom: 15px; /* Add some space below the paragraph in answer */
	line-height: 1.6;
	text-align: left;
	font-weight: 500;
}

@media (max-width: 768px) {
	.faq-question {
		font-size: 15px;
	}

	.faq-section .container {
		max-width: 95%;
	}

	.faq-icon,.answer-icon{
		font-size: 14px;
	}
}
/* ======================================== */
/* FAQセクション end
/* ======================================== */


/* ======================================== */
/* 店舗一覧セクション
/* ======================================== */
.locations-section .container {
	max-width: 80%; /* Adjust based on your overall site layout */
	margin: 0 auto;
	padding: 50px 20px 20px; /* Top/bottom padding and side padding */
	text-align: center;
}

.locations-title {
	margin-bottom: 5px;
}

.locations-subtitle {
	margin-bottom: 3rem;
}

.location-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); /* Responsive grid */
	gap: 2vw; /* Space between grid items */
	justify-content: center; /* Center items if they don't fill the row */
}

.location-item {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Subtle shadow */
	overflow: hidden; /* Ensures image corners are rounded */
	display: flex;
	flex-direction: column; /* Stack image and details vertically */
}

.location-image img {
	width: 100%;
	height: 200px; /* Fixed height for images, adjust as needed */
	object-fit: cover; /* Ensures image covers the area without distortion */
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.location-details {
	padding: 20px;
	text-align: left;
	display: flex;
	flex-direction: column;
	flex-grow: 1; /* Allows details section to grow and push buttons down */
}

.store-name {
	font-size: 1.5vw;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
}

.address {
	line-height: 1.6;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 1vw;
}

.google-map-link {
	font-size: 1vw;
	margin-bottom: 20px;
}

.google-map-link a {
	color: #4B463F;
	align-items: center;
	gap: 5px; /* Space between icon and text */
	transition: color 0.3s ease;
}

.google-map-link a:hover {
	color: #388E3C; /* Darker green on hover */
}

.google-map-link i {
	font-size: 1.1vw;
}

.contact-buttons {
	display: flex;
	justify-content:space-around;
	gap: 0.6vw; /* Space between buttons */
	margin-top: auto; /* Pushes buttons to the bottom of the card */
}

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border-radius: 30px;
	font-size: 0.9vw;
	text-decoration: none;
	font-weight: bold;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-tel {
	border: 1px solid #596F8E;
	background-color: #fff; /* Darker green for phone */
	color: #596F8E;
	white-space: nowrap;
}

.btn-tel:hover {
	background-color: #5c90d7;
	color: #fff;
}

.btn-line {
	border: 1px solid #00B900;
	background-color: #fff;
	color: #00B900;
	white-space: nowrap;
}

.btn-line:hover {
	background-color: #009900;
	color: #fff;
}

.btn i {
	margin-right: 8px;
	font-size: 1.1vw;
	width: 34px; /* アイコンの幅 */
	height: 34px; /* アイコンの高さ (widthと同じにすると円形に) */
	line-height: 34px; /* アイコンを垂直方向に中央揃え */
	border-radius: 50%; /* 円形にする */
	display: flex; /* flexboxでアイコンを中央揃え */
	align-items: center; /* 垂直方向中央 */
	justify-content: center; /* 水平方向中央 */
	flex-shrink: 0; /* アイコンが縮まないように */
}

.btn-tel i {
	background-color: #596F8E; /* 電話ボタンの枠線と同じ色を背景に */
	color: #fff; /* アイコンの色を白に */
	margin-right: 5px; /* アイコンとテキストの間の余白を広げる */
	font-size: 1.1vw; /* アイコン自体は少し小さめに調整 */
}

/* LINEボタン内のアイコンの背景色と色 */
.btn-line i {
	background-color: #00B900; /* LINEのブランドカラーを背景に */
	color: #fff; /* アイコンの色を白に */
	margin-right: 5px; /* アイコンとテキストの間の余白を広げる */
	font-size: 20px; /* アイコン自体は少し小さめに調整 */
}

/* スマホ対応 */
@media (max-width: 768px) {
	.locations-section .container {
		max-width: 1200px; /* Adjust based on your overall site layout */
		margin: 0 auto;
		padding: 50px 20px 20px; /* Top/bottom padding and side padding */
		text-align: center;
	}

	.locations-title {
		margin-bottom: 5px;
	}

	.locations-subtitle {
		margin-bottom: 3rem;
	}

	.location-grid {
		display: grid;
		grid-template-columns: 1fr; /* Single column on smaller screens */
		gap: 30px; /* Space between grid items */
		justify-content: center; /* Center items if they don't fill the row */
	}

	.location-item {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Subtle shadow */
		overflow: hidden; /* Ensures image corners are rounded */
		display: flex;
		flex-direction: column; /* Stack image and details vertically */
		margin-bottom: 20px; /* Add some space between items on mobile */
	}

	.location-image img {
		width: 100%;
		height: 200px; /* Fixed height for images, adjust as needed */
		object-fit: cover; /* Ensures image covers the area without distortion */
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.location-details {
		padding: 20px;
		text-align: left;
		display: flex;
		flex-direction: column;
		flex-grow: 1; /* Allows details section to grow and push buttons down */
	}

	.store-name {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
	}

	.address {
		line-height: 1.6;
		margin-bottom: 15px;
		font-weight: bold;
		font-size: 0.9rem;
	}

	.google-map-link {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.google-map-link a {
		color: #4B463F;
		align-items: center;
		gap: 5px; /* Space between icon and text */
		transition: color 0.3s ease;
	}

	.google-map-link a:hover {
		color: #388E3C; /* Darker green on hover */
	}

	.google-map-link i {
		font-size: 16px;
	}

	.contact-buttons {
		display: flex;
		justify-content: center;
		gap: 10px; /* Space between buttons */
		margin-top: auto; /* Pushes buttons to the bottom of the card */
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px 10px;
		border-radius: 30px;
		font-size: 3.5vw;
		text-decoration: none;
		font-weight: bold;
		transition: background-color 0.3s ease, color 0.3s ease;
		min-width: 130px; /* Minimum width for buttons */
	}

	.btn-tel {
		border: 1px solid #596F8E;
		background-color: #fff; /* Darker green for phone */
		color: #596F8E;
		white-space: nowrap;
	}

	.btn-tel:hover {
		background-color: #5c90d7;
		color: #fff;
	}

	.btn-line {
		border: 1px solid #00B900;
		background-color: #fff;
		color: #00B900;
		white-space: nowrap;
	}

	.btn-line:hover {
		background-color: #009900;
		color: #fff;
	}

	.btn i {
		margin-right: 8px;
		font-size: 16px;
		width: 34px; /* アイコンの幅 */
		height: 34px; /* アイコンの高さ (widthと同じにすると円形に) */
		line-height: 34px; /* アイコンを垂直方向に中央揃え */
		border-radius: 50%; /* 円形にする */
		display: flex; /* flexboxでアイコンを中央揃え */
		align-items: center; /* 垂直方向中央 */
		justify-content: center; /* 水平方向中央 */
		flex-shrink: 0; /* アイコンが縮まないように */
	}

	.btn-tel i {
		background-color: #596F8E; /* 電話ボタンの枠線と同じ色を背景に */
		color: #fff; /* アイコンの色を白に */
		margin-right: 5px; /* アイコンとテキストの間の余白を広げる */
		font-size: 16px; /* アイコン自体は少し小さめに調整 */
	}

	/* LINEボタン内のアイコンの背景色と色 */
	.btn-line i {
		background-color: #00B900; /* LINEのブランドカラーを背景に */
		color: #fff; /* アイコンの色を白に */
		margin-right: 5px; /* アイコンとテキストの間の余白を広げる */
		font-size: 20px; /* アイコン自体は少し小さめに調整 */
	}
}
/* ======================================== */
/* 店舗一覧セクション end
/* ======================================== */


/* ======================================== */
/* お知らせセクション
/* ======================================== */
.news-section {
	padding: 60px 20px;
}

.news-section .container {
	max-width: 1000px; /* 全体の幅を調整 */
	display: flex; /* ヘッダーとリストを横並びにする */
	gap: 80px; /* ヘッダーとリストの間のスペース */
	padding-left: 10%;
}

.news-header {
	flex-shrink: 0; /* ヘッダーが縮まないようにする */
	text-align: left;
	min-width: 120px; /* ヘッダー部分の最小幅 */
	padding-top: 10px; /* リストのタイトル行と揃えるため */
}

.news-title {
	margin-bottom: 5px;
	text-align: left;
}

.news-subtitle {
	margin-bottom: 3rem;
}

.news-list {
	flex-grow: 1; /* リスト部分が残りのスペースを埋める */
	border-top: 1px solid #ddd; /* 最初の区切り線 */
}

.news-item {
	border-bottom: 1px solid #eee; /* 各お知らせアイテムの下線 */
}

.news-item:last-child {
	border-bottom: none; /* 最後のお知らせには下線なし */
}

.news-link {
	display: block; /* リンク全体をブロック要素にしてクリック可能にする */
	padding: 15px 0; /* 上下のパディング */
	text-decoration: none;
	color: #333;
	transition: background-color 0.3s ease;
}

.news-link:hover {
	background-color: #f5f5f5; /* ホバー時の背景色 */
}

.news-article-title {
	font-size: 1.1vw;
	line-height: 1.6;
	margin-bottom: 10px;
	font-weight: 500;
}

.news-meta {
	display: flex;
	align-items: center;
	gap: 15px; /* 日付とカテゴリの間のスペース */
	font-size: 1vw;
}

.news-date {
	color: #999;
}

.news-category {
	border: 1px solid #7eb091;
	color: #7eb091;
	padding: 3px 15px;
	font-weight: bold;
	display: inline-block; /* インライン要素だが、パディングを適用するために */
}

/*スマホ対応*/
@media (max-width: 768px) {
	.news-section {
		padding-top: 0px;
	}

	.news-section .container {
		flex-direction: column; /* スマートフォンでは縦並びにする */
		gap: 30px;
		padding-left: 5%;
	}

	.news-article-title {
		font-size: 16px;
	}

	.news-date {
		font-size: 14px;
	}
	.news-category{
		font-size: 14px;
	}
}
/* ======================================== */
/* お知らせセクション end
/* ======================================== */

/* ======================================== */
/* フッターセクション
/* ======================================== */
.site-footer {
	padding-top: 0; /* 上のラインがあるためパディングを0にする */
	padding-bottom: 20px; /* コピーライトの下に少しスペース */
	color: #333;
	font-family: 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif; /* フォント調整 */
}

.site-footer .container {
	max-width: 1200px; /* 全体の幅を調整 */
	margin: 0 auto;
	padding: 0 20px; /* 左右のパディング */
}

.footer-top-line {
	border-top: 1px solid #8bb89c; /* 上部のラインの色 */
	margin-bottom: 40px; /* ラインとコンテンツの間のスペース */
	width: 100%;
}

.footer-main-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start; /* 上揃えにする */
	margin-bottom: 40px;
	flex-wrap: wrap; /* レスポンシブ対応で折り返す */
	flex-direction: column;
}

.footer-branding {
	display: flex;
	width: 100%;
	justify-content: space-between;
	flex: 0 0 auto; /* 縮まないようにする */
	margin-right: 40px; /* ナビゲーションとの間にスペース */
	text-align: left; /* 左揃え */
	padding-top: 20px; /* ロゴとテキストの開始位置を合わせるため */
}

.footer-logo-link {
	margin-bottom: 15px;
	text-decoration: none;
}

.footer-logo {
	width: 263px; /* ロゴの幅 */
	height: 64px; /* ロゴの高さ */
	object-fit: contain;
	margin: 0 auto;
}

.footer-company-name {
	font-size: 1.1vw;
	font-weight: bold;
	margin-bottom: 8px;
	color: #555;
}

.footer-address {
	font-style: normal; /* アドレスの斜体を解除 */
	font-size: 1.1vw;
	color: #334155;
	font-weight: bold;
}

.footer-nav {
	display: flex;
	gap: 60px; /* 各カラム間のスペース */
	flex-wrap: wrap; /* ナビゲーションの列も折り返す */
	padding-top: 20px; /* ブランド部分と開始位置を合わせる */
}

.footer-nav-column {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto; /* カラムが伸縮してスペースを埋める */
	min-width: 150px; /* 各カラムの最小幅 */
}

.footer-nav-column li {
	margin-bottom: 10px; /* 項目間のスペース */
}

.footer-nav-column a {
	text-decoration: none;
	color: #334155; /* ナビゲーションリンクの色 */
	font-size: 1.1vw;
	transition: color 0.3s ease;
	font-weight: bold;
}

.footer-nav-column a:hover {
	color: #8bb89c; /* ホバー時の色 */
}

.footer-copyright {
	text-align: center;
	font-size: 1vw;
	color: #888;
	padding-top: 20px; /* 上のコンテンツとのスペース */
	margin-bottom: 80px;
	border-top: 1px solid #eee; /* コピーライトの上に細い線 */
}

/* Responsive adjustments */
@media (max-width: 992px) {
	.footer-main-content {
		flex-direction: column; /* 縦並びにする */
		align-items: center; /* 中央揃えにする */
	}

	.footer-branding {
		flex-direction: column;
		margin-right: 0;
		text-align: center; /* 中央揃え */
		width: 100%; /* 幅を広げる */
	}

	.footer-nav {
		flex-direction: column; /* ナビゲーションカラムも縦並び */
		gap: 0px;
		padding-top:0px;
		width: 100%;
		text-align: center; /* ナビゲーション項目も中央揃え */
	}

	.footer-nav-column {
		min-width: unset; /* 最小幅を解除 */
	}

	.footer-nav-column a {
		font-size: 16px;
	}

	.footer-copyright {
		font-size: 12px;
	}
}

@media (max-width: 576px) {
	.site-footer .container {
		padding: 0 15px; /* さらに狭い画面でのパディング */
	}

	.footer-top-line {
		margin-bottom: 30px;
	}

	.footer-main-content {
		margin-bottom: 30px;
	}

	.footer-nav {
		gap: 0px;
		padding-top:0px;
	}

	.footer-nav-column li {
		margin-bottom: 8px;
	}

}

/* ホバーエフェクト */
@media (hover: hover) {
	.hover-effect {
		display: inline-block;
		width: 100%;
		height: 100%;
		transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.hover-effect:hover {
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
		transform: translateY(-10px);
	}
}

/* レスポンシブ表示切り替え */
.sp {
	display: none;
}
.pc {
	display: block;
}

@media screen and (max-width: 767px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}

	/* モバイル時のbody調整 */
	body {
		padding-top: 0; /* モバイルではpadding-topをリセット */
		padding-bottom: 0; /* モバイルではpadding-bottomもリセット */
	}

}

@media screen and (max-width: 1023px) and (min-width: 768px) {
	/* タブレット用のスタイル */
	.site-header {
		padding: 15px 30px;
		gap: 20px;
		bottom: 15px; /* タブレットでの位置調整 */
		right: 30px; /* タブレットでの位置調整 */
		max-width: 70%; /* タブレットでのヘッダー最大幅調整 */
	}

	/* タブレットでのヘッダー内のロゴ位置調整 */
	.site-branding {
		top: 15px;
		left: 30px;
	}

	.header-nav-link {
		font-size: 18px;
	}

	.header-reserve-button {
		padding: 20px 15px;
		font-size: 18px;
	}

	.concept-inner {
		padding: 60px 40px;
	}
}
/* ======================================== */
/* フッターセクション end
/* ======================================== */

body.no-scroll {
	overflow: hidden;
	width: 100%;
}