/* Theme Name: munikyoto
Theme URI: https://clavispartners.co.jp/themes/munikyoto-wp 
Description: MUNI KYOTO向けに設計された、洗練されたレスポンシブWordPressテーマ。 
Author: 株式会社Clavis Partners 
Author URI: https://clavispartners.co.jp 
Version: 1.0 
License: Split License (PHP: GPLv2 or later, Others: Proprietary) 
License URI: https://clavispartners.co.jp/license 
Text Domain: munikyoto 
*/

/* ================================================== 
	CSS変数定義 
	サイト全体で使用する色、フォント、サイズなどの共通値を定義 
================================================== */

:root {
	/* Colors */
	--color-base: #333;
	/* 本文の基本色 */
	--color-text-sub: #fff;
	/* テキストサブカラー */
	--color-text-main: #333;
	/* メインテキスト色 */
	--color-subtitle: #E4D2B9;
	/* サブタイトルや区切り線などに使用 */
	--color-accent: #756B66;
	/* ブランドの強調色、リンクやボタンに使用 */
	--color-accent-hover: #5E5652;
	/* アクセント色のホバー状態 */
	--color-background: #F2F2F2;
	/* セクションの背景色など、薄いグレー */
	--color-bg-emphasis: #F8F6F2; 
	/* 例: 薄いベージュ系など */
	--color-shadow: rgba(0, 0, 0, 0.3);
	/* テキストやボックスシャドウの基本色 */
	--color-shadow-light: rgba(0, 0, 0, 0.15);
	/* ライトなシャドウ用 */
	--color-shadow-subtle: rgba(0, 0, 0, 0.08);
	/* より控えめなシャドウ用 */
	--color-shadow-strong: rgba(0, 0, 0, 0.25);
	/* 強めのシャドウ用 */
	--color-bg-overlay: rgba(0, 0, 0, 0.8);
	/* ドロワーメニューなどのオーバーレイ背景色 */
	--color-card: #FAF6F2;
	/* カードコンポーネントの背景色 */
	--color-border: #E0E0E0;
	/* ボーダー色 */
	--color-success: #6CAE7E;
	/* 成功メッセージの色（緑系）*/
	--color-error: #D9534F;
	/* エラーメッセージの色（赤系）*/
	--color-white: #fff;
	/* 白色 */
	/* Layout & Spacing */
	--container-max-width: 120rem;
	/* .inner と合わせる */
	--spacing-unit: 1.6rem;
	/* 16pxを基本単位とする */
	--spacing-unit-xsmall: 0.4rem;
	/* 4px */
	--spacing-unit-small: 0.8rem;
	/* 8px */
	--spacing-unit-medium: 1.6rem;
	/* 16px */
	--spacing-unit-large: 2.4rem;
	/* 24px */
	--spacing-unit-xlarge: 4rem;
	/* 40px */
	--section-padding-y: 8rem; /* セクションの上下パディングを増やす (80px) */
	--section-margin-bottom: 12rem; /* セクションの下マージンを増やす (120px) */
	/* Typography */
	--font-base: "游明朝", "Yu Mincho", serif;
	/* 本文用フォント */
	--font-menu: "Poppins ExtraLight", sans-serif;
	/* メニュー用フォント */
	--font-heading: "游明朝", "Yu Mincho", serif;
	/* 見出し用フォント */
	--font-size-base: 1.6rem;
	/* 16px (rem単位で定義) */
	--font-size-small: 1.4rem;
	--font-size-large: 1.8rem;
	--font-size-xl: 2.4rem;
	/* 追加 */
	/* Transitions */
	--transition-speed-fast: 0.2s;
	--transition-speed-medium: 0.3s;
	--transition-speed-slow: 0.5s;
	--transition-timing-ease: ease;
	--transition-timing-ease-in-out: ease-in-out;
}

/* ================================================== 
	ベースリセットと共通スタイル 
	全要素に対するブラウザデフォルトスタイルのリセットと基本設定 
================================================== */

*, *::before, *::after {
	box-sizing: border-box;
	/* padding/borderをwidth/heightに含める */
	margin: 0;
	/* デフォルトマージンをリセット */
	padding: 0;
	/* デフォルトパディングをリセット */
}
html {
	font-size: 62.5%;
	/* 1rem = 10px となるように設定 */
	scroll-behavior: smooth;
}
body {
	font-family: var(--font-base);
	/* 基本フォント */
	font-size: var(--font-size-base);
	/* 1.6rem = 16px */
	line-height: 1.8;
	/* 基本行の高さ */
	color: var(--color-base);
	/* 基本テキスト色 */
	background-color: var(--color-white);
	/* 基本背景色 */
	-webkit-font-smoothing: antialiased;
	/* フォントのアンチエイリアシング */
	-moz-osx-font-smoothing: grayscale;
}
img {
	max-width: 100%;
	/* 親要素からはみ出さないように */
	height: auto;
	/* 縦横比を維持 */
	display: block;
	/* 画像下の余白を削除 */
}
a {
	color: var(--color-accent);
	/* リンクカラーをアクセント色に設定 */
	text-decoration: none;
	/* 下線を削除 */
	transition: opacity var(--transition-speed-medium) var(--transition-timing-ease);
	/* ホバー時のトランジション */
}
a:hover {
	opacity: 0.7;
	/* ホバーで透明度を下げる */
}
/* ================================================== 
	タイポグラフィ（見出し・本文） 
================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	/* 見出しフォント */
	font-weight: bold;
	color: var(--color-base);
	/* 見出しの基本色をテキスト色に */
	line-height: 1.4;
	/* 行の高さ */
	margin-bottom: 1em;
	/* 下マージン */
}
p {
	font-size: var(--font-size-base);
	/* 段落のフォントサイズ */
	margin-bottom: 1em;
	/* 下マージン */
}
strong {
	font-weight: bold;
	/* 太字 */
}
/* ================================================== 
	共通ユーティリティクラス 
================================================== */

/* コンテナ内余白（最大幅と自動余白） */

.inner {
	max-width: var(--container-max-width);
	/* コンテンツの最大幅 */
	margin: 0 auto;
	/* 中央揃え */
	padding-inline: clamp(1.6rem, 5vw, 3.2rem);
	/* 画面幅によって自動調整される左右余白 (16px, 32px) */
}
/* セクション共通スタイル (BEM: .section) */

.section {
	/* セクション要素にこのクラスを適用 */
	margin-bottom: var(--section-margin-bottom);
	/* 各セクションの下に余白 */
	padding-top: var(--section-padding-y);
	/* セクション上部のパディング */
	padding-bottom: var(--section-padding-y);
	/* セクション下部のパディング */
}
.section__title {
	/* BEM: section__title */
	font-size: clamp(2rem, 4vw, 2.5rem);
	/* レスポンシブ見出しサイズ */
	font-family: var(--font-heading);
	text-align: center;
}
.section__subtitle {
	/* BEM: section__title */
	font-size: clamp(1.6rem, 2.5vw, 2.0rem);
	/* レスポンシブ見出しサイズ */
	font-family: var(--font-heading);
	text-align: center;
	margin-bottom: 1rem;
}
.section__lead {
	/* BEM: section__lead */
	text-align: left;
	font-size: clamp(1.4rem, 2vw, 1.6rem);
	/* レスポンシブリードテキストサイズ */
	color: var(--color-text-main);
	margin-bottom: 3rem;
	line-height: 1.8;
	max-width: 80rem;
	/* リードテキストの読みやすさを確保 (800px) */
	margin-inline: auto;
	/* 中央揃え */
}
/* ==================================================
   ボタン スタイル（汎用）
   ベースとなるボタンのスタイルと、そのバリエーションを定義します。
================================================== */

/* 1. ベースボタン（共通プロパティの抽出）*/
.btn {
	display: inline-block;
	font-family: var(--font-base);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	text-decoration: none; /* a要素の場合に備えて */
	/* トランジションは共通 */
	transition: background-color var(--transition-speed-medium) var(--transition-timing-ease),
				color var(--transition-speed-medium) var(--transition-timing-ease),
				border-color var(--transition-speed-medium) var(--transition-timing-ease),
				box-shadow var(--transition-speed-medium) var(--transition-timing-ease),
				transform var(--transition-speed-medium) var(--transition-timing-ease); /* SVGアイコン用も考慮 */
	border-radius: 0.8rem; /* デフォルトの角丸 */
}

/* 2. 汎用的なフォーカススタイル */
/* ボタンやリンクのアクセシビリティ向上のためのフォーカススタイル */
button:focus-visible,
a:focus-visible {
	outline: 0.2rem solid var(--color-accent);
	outline-offset: 0.6rem;
	border-radius: 1.8rem; /* フォーカスリングの角丸 */
	box-shadow: 0 0 0 0.3rem rgba(102, 93, 82, 0.2);
	transition: outline var(--transition-speed-fast) var(--transition-timing-ease),
				box-shadow var(--transition-speed-fast) var(--transition-timing-ease);
}

/* 3. ボタンの「タイプ」を定義するモディファイア */

/* --- アウトラインボタン（現行の.btnと.btn-reserveの共通部分をベースに） --- */
.btn--outline {
	background-color: transparent; /* 背景色は透明 */
	color: var(--color-accent); /* メインカラー */
	border: 0.1rem solid var(--color-accent);
	padding: 1rem 2.4rem; /* デフォルトのパディング */
	font-size: var(--font-size-large); /* デフォルトのフォントサイズ */
}

.btn--outline:hover {
	background-color: var(--color-background);
	color: var(--color-text-main);
	border-color: var(--color-accent);
	box-shadow: 0 0.6rem 1.6rem var(--color-shadow-light);
}

/* --- 塗りつぶしボタン（現行の.btn--card） --- */
.btn--filled {
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	border: 0.1rem solid var(--color-accent);
	padding: 1.2rem 3.2rem; /* .btn--cardのパディング */
	font-size: var(--font-size-base);
}

.btn--filled:hover {
	background-color: var(--color-accent-hover);
	color: var(--color-text-sub);
	box-shadow: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.15);
}

/* --- 宿泊予約ボタン（.btn--outlineのバリエーションとして） --- */
.btn-reserve {
	/* .btn--outline をベースにしている場合、上書きしたいプロパティだけ記述 */
	padding: 1.2rem 1.8rem;
	font-size: 1.8rem;
	color: var(--color-text-main);
	border-radius: 1.6rem;
	/* background-color, border, color は .btn--outline から継承 */
}
.btn-reserve:hover {
	/* .btn--outline:hover をベースに、box-shadowだけ上書き */
	box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
}

/* SVGアイコン付きボタン */
.btn-more-svg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #000;
	text-decoration: none;
	/* transition: all 0.3s; は .btn で定義済み */
}
.arrow-icon {
	transition: transform 0.3s;
}
.btn-more-svg:hover .arrow-icon {
	transform: translateX(3px);
}

/* ================================================== 
	フローティングヘッダーの基本設定 
	ヘッダー全体を画面上部に固定表示 
================================================== */

.l-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.05);
	z-index: 1000;
	height: 8rem;
	display: flex;
	align-items: center;
}
.l-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
}
.site-logo, .custom-logo-link {
	margin-right: 0.6rem; /* ロゴの右側にマージンを追加 */
	flex-shrink: 0;
	display: block;
}
.site-logo img {
	max-height: 3.6rem;
	width: auto;
	object-fit: contain;
	display: block;
}
.l-header .site-logo svg {
	height: 3.6rem;
	width: auto;
	display: block;
	object-fit: contain;
}
.global-nav {
  flex: 1;
  display: flex;
  align-items: flex-end; /* 下揃え */
  margin-top: auto; /* 下に寄せる */
  padding-left: 1rem; /* ロゴの左端からの距離に合わせてパディングを0に調整 */
}
.global-nav__list {
	display: flex;
	gap: 1rem; /* 各メニューアイテム間の隙間を狭める */
	list-style: none;
	margin: 0;
	padding: 0;
}
.global-nav__list li {
	display: flex;
	align-items: center;
}

.global-nav__link {
	/* BEM: グローバルナビゲーションリンク */
	font-family: var(--font-menu);
	font-weight: 200;
	font-size: 1.6rem;
	color: var(--color-text-main);
	padding: 0.8rem 1rem; /* 上下のパディングを減らし、左右も調整 */
	position: relative;
	text-align: center;
	display: block;
	letter-spacing: 0.05em;
}
.global-nav__link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.1rem;
	background-color: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease-in-out;
}
.global-nav__link:hover::after, .global-nav__link.current-menu-item::after {
	transform: scaleX(1);
}
.header-actions {
  display: flex;
  align-items: flex-end; /* 下揃え */
  gap: 1rem;
}

.fv-area {
    position: relative;
    width: 100%;
    height: 100dvh; /* 現代のブラウザではこれが推奨 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8rem;
    background-image: url('<?php echo esc_url(get_template_directory_uri()); ?>/assets/img/default-fv.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 背景メディア（画像 or 動画ファイル）*/
.fv-area video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* キャッチコピー表示 */

.fv-catch {
	position: absolute;
	text-align: center;
	color: var(--color-text-sub);
	z-index: 2;
	left: 24%;
	transform: translateX(-50%);
	bottom: 30%; 
}
.fv-catch h1 {
	font-size: clamp(4rem, 5vw, 6rem);
	font-family: var(--font-heading);
	color: var(--color-text-sub);
	margin-bottom: 0.2em;
	text-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.7);
}
.fv-catch p {
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	margin-bottom: 0;
	text-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.7);
}


/* ================================================== 
	YouTube埋め込み動画用ラッパー 
	（FV背景以外での標準的な埋め込み動画サイズ維持にも対応） 
================================================== */

.video-wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 192rem;
	margin: 0 auto;
	overflow: hidden;
}
.video-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
}
/* FV背景動画として YouTube iframe を扱う場合 */

.fv-area.fv-video .video-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: unset;
}
.fv-area.fv-video .video-wrapper iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	object-fit: cover;
	pointer-events: none;
}
/* ================================================== 
	ブランドコンセプトのスタイル 
================================================== */

.brand-concept .inner {
	text-align: center;
	margin-top: var(--spacing-unit-xlarge);
	margin-bottom: var(--spacing-unit-xlarge);
}
.brand-concept .inner p {
	font-size: var(--font-size-large);
}
.brand-concept h2 {
	text-align: center;
	font-size: var(--font-size-xl);
	margin-bottom: 4rem;
}
/* ================================================== 
	単一ニュースページ（詳細表示） 
================================================== */

.news-single__footer {
	text-align: center;
}
/* 単一ニュースページ：画像（代替画像含む） */

.news-single__image {
	margin-block: 3rem;
	text-align: center;
}
.news-single__image img {
	max-width: 100%;
	height: auto;
	border-radius: 0.8rem;
	box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.1);
	transition: transform var(--transition-speed-medium) var(--transition-timing-ease);
}
.news-single__image--no-image img {
	object-fit: contain;
	background-color: var(--color-background);
}

.news-single.is-single {
	margin-top: 8rem;
}

/* ================================================== 
	カードレイアウト（ニュースなど） 
================================================== */

.single-news main {
  margin-top: 16rem;
  padding: 0 var(--spacing-unit-large);
}

.news-section {
	position: relative;
	z-index: 1;
	background-color: transparent;
	padding-top: var(--section-padding-y);
	padding-bottom: var(--section-padding-y);
	margin-bottom: var(--spacing-unit-medium);
}
/* ずらした背景用の擬似要素 */
.news-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-background); /* 薄いグレーの背景 */
	z-index: -1;
	transform: translateY(4rem);
}
.news-section__footer {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-unit-xlarge); /* ボタンのマージンを調整 */
}
/* newsセクションのタイトルとサブタイトルを中央寄せにする */

.news-section .section__title, .news-section .section__subtitle {
	text-align: center;
	margin-bottom: 0.5rem;
}
/* サブタイトル（-新着情報-）のフォントサイズやマージンを調整 */

.news-section .section__subtitle {
	font-size: var(--font-size-medium);
	margin-top: 0;
}

.news-card__category-tag {
	display: inline-block;
	width: fit-content;
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	font-size: 1.0rem;
	padding: 0.2rem 0.6rem;
	border-radius: 0.4rem;
	margin-bottom: 0.6rem;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
}
.news-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2.4rem; /* ギャップを調整 */
	justify-items: stretch;
	align-items: stretch;
	margin-bottom: var(--spacing-unit-large);
	width: 100%;
	max-width: 100%;
}
.news-card:hover {
box-shadow: 0 0.8rem 2.4rem var(--color-shadow-light); /* ホバー時のシャドウを強化 */
}
.news-card__image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	text-align: center;
}
.news-card__image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 1.2rem 1.2rem 0 0;
  object-position: center center;
  background: #f3f3f3;
  border: 1px solid #e0e0e0;
}
.news-card__content {
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: space-between;
}
.news-card__date {
	font-size: 1.2rem;
	color: var(--color-accent);
	margin-left: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.06em;
}
.news-card__title {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--color-text-main);
	line-height: 1.5;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ================================================== 
	投稿 
================================================== */

.news-card {
	background: var(--color-text-sub);
	border-radius: 1.2rem;
	box-shadow: 0 0.2rem 0.8rem var(--color-shadow-subtle); /* シャドウを控えめに */
	overflow: hidden;
	transition: transform var(--transition-speed-medium) var(--transition-timing-ease), box-shadow var(--transition-speed-medium) var(--transition-timing-ease); /* シャドウもトランジション対象に */
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.card-link {
	display: inline-block;
	margin-top: 0.8rem;
	font-size: 1.6rem;
	color: var(--color-accent);
		align-items:flex-end;
}
/* セクションのタイトルとサブタイトルを中央寄せにする */
/* セクション全体レイアウト */
.content-section {
	padding: var(--section-padding-y) 0;
	margin-bottom: var(--section-margin-bottom);
	background-color: var(--color-background); /* 背景強調 */
	text-align: center; /* タイトルとサブタイトルの中央寄せを一括適用 */
}

/* タイトル＆サブタイトル */
.content-section .section__title {
	font-size: 2.4rem;
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--color-text-main);
}
.content-section .section__subtitle {
	font-size: 1.6rem;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 2rem;
	color: var(--color-text-subtle);
}

/* 特徴カードリスト */
.offers-feature__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 3rem;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

/* カードデザイン */
.offers-feature__card {
	background-color: var(--color-card);
	border-radius: 12px;
	padding: 2.5rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	box-shadow: 0 0.2rem 0.8rem var(--color-shadow-subtle);
	transition: box-shadow 0.3s ease;
}

.offers-feature__card:hover {
	box-shadow: 0 0.8rem 2.4rem var(--color-shadow-light);
}

/* イメージスタイル */
.offers-feature__image {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 1.5rem;
}
.offers-feature__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
}
.offers-feature__card:hover .offers-feature__image img {
	filter: none;
}

/* テキストコンテンツ */
.offers-feature__subtitle {
	font-size: 1.2rem;
	color: var(--color-text-subtle);
	margin-bottom: 0.3rem;
}
.offers-feature__title {
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--color-text-main);
	margin-bottom: 0.8rem;
}
.offers-feature__desc {
  font-size: var(--font-size-small);
  color: var(--color-text-main);
  line-height: 1.6;
  max-width: 280px;
  margin: 0 auto 1rem;
  text-align: left;
}

/* CTAボタン（offerカード内） */
.offers-feature__card .btn {
	margin-top: 1.2rem;
}
.offers-feature__card .btn--outline {
	padding: 1.2rem 3.2rem;
	font-size: var(--font-size-base);
}

/* コンテンツブロック ボタン - 色修正 */

.content-block__body .btn {
	display: inline-block;
	padding: 0.8em 1.6em;
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	text-decoration: none;
	border-radius: 4px;
	transition: background-color var(--transition-speed-medium);
}

/* ================================================== 
	アーカイブ 
================================================== */

/* archive-news.php */
.archive-news main {
	background-color: var(--color-background); /* 例: 強調背景色 */
	padding-top: var(--section-padding-y);
	padding-bottom: var(--section-padding-y);
}
.news-card__meta {
	/* news-card__content と同様のスタイル、または追加のメタ情報用 */
	padding: 0 1.6rem 1.6rem; /* news-card__content のパディングを考慮して調整 */
}

.archive-news {
	margin-top: 16rem;
}

/* ニュースフィルター */
.news-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	justify-content: center;
	margin-bottom: var(--spacing-unit-large);
	padding: 0;
	list-style: none;
}

.news-filter li a {
	display: inline-block;
	padding: 0.8rem 2rem;
	font-size: var(--font-size-small);
	border: 1px solid var(--color-border);
	background-color: var(--color-text-sub);
	color: var(--color-base);
	border-radius: 9999px;
	text-decoration: none;
	transition: background-color 0.3s ease;
}
.news-filter li a.is-active {
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	border-color: var(--color-accent);
}
.news-filter li a:hover {
	background-color: var(--color-background);
}
/* ================================================== 
	エクスペリエンスカード
================================================== */
.experience-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 2rem;
	text-align: center;
}
.experience-card {
	display: block;
	background: var(--color-white); /* #fff を変数に置き換え */
	text-decoration: none;
	border-radius: 0.8rem;
	overflow: visible;
	transition: 0.3s;
}

.card-thumb img {
	height: 300px;
}
.card-body {
	padding: 1rem;
	color: var(--color-accent);
}
.card-thumb_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-speed-medium) var(--transition-timing-ease);
}
.card-title {
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
	height: 6rem;
}
.card-excerpt {
	font-size: 1.6rem;
	line-height: 1.6;
}

/* ==================================================
  共通：導線ブロックの基本構造（MUNI KYOTO Meta Box Style）
================================================== */

.content-block {
	padding: var(--section-padding-y) 0;
	background-color: transparent;
	position: relative;
	overflow: hidden;
	margin-bottom: var(--section-margin-bottom); /* 各コンテンツブロックの下に余白 */
}
.content-block+.content-block {
	margin-top: 0;
}
/* 最初のブロックは余白ゼロ */

.content-block:first-of-type {
	margin-top: 0;
}
/* 交互背景色 */

.content-block:nth-child(even) {
	background-color: var(--color-background);
}
.content-block:nth-child(odd) {
	background-color: var(--color-white);
}
/* ラッパーの横並び配置（画像とテキスト） */

.content-block__wrapper {
	display: flex;
	align-items: center;
	gap: var(--spacing-unit-xlarge);
	flex-direction: row;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-unit-large);
}
/* 奇数番目のブロックは画像左、テキスト右 */

.content-block:nth-child(odd) .content-block__wrapper {
	flex-direction: row;
}
/* 偶数番目のブロックは画像右、テキスト左 */

.content-block:nth-child(even) .content-block__wrapper {
	flex-direction: row-reverse;
}
/* 画像エリア */

.content-block__image {
	flex: 1;
	max-width: 50%;
}
.content-block__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0.8rem;
	box-shadow: 0 0.8rem 2.4rem var(--color-shadow-light);
	transition: transform var(--transition-speed-medium) var(--transition-timing-ease);
}
.content-block__image img:hover {
	transform: scale(1.02);
}
/* テキストエリア */

.content-block__body {
	flex: 1;
	max-width: 50%;
	padding: var(--spacing-unit-large);
}
.content-block__category {
	display: inline-block;
	font-size: var(--font-size-small);
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--spacing-unit-small);
	font-weight: 600;
}
/* タイトル色はカスタムプロパティで制御 */
.content-block__title {
  color: var(--color-subtitle);
	font-size: clamp(2.0rem, 2.4rem, 3.2rem);
	font-family: var(--font-heading);
	margin-bottom: var(--spacing-unit-medium);
	line-height: 1.3;
}
.content-block__text {
	font-size: var(--font-size-base);
	line-height: 1.8;
	margin-bottom: var(--spacing-unit-large);
	color: var(--color-base);
}
/* ボタン（CTA） */

.content-block__body .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	padding: 1.2rem 2.4rem;
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	text-decoration: none;
	border-radius: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	transition: all var(--transition-speed-medium);
	border: 0.1rem solid var(--color-accent);
}
.content-block__body .btn:hover {
	background-color: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	transform: translateY(-0.2rem);
	box-shadow: 0 0.4rem 1.2rem var(--color-shadow-light);
}
.content-block__body .btn svg {
	width: 1.6rem;
	height: 1.6rem;
	transition: transform var(--transition-speed-medium);
}
.content-block__body .btn:hover svg {
	transform: translateX(0.4rem);
}

/* ================================================== 
	バナー 
================================================== */
/*experience.php*/
.experience-banner {
  width: 100%;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/wp-content/themes/munikyoto/assets/img/gallery/banner-experience.png');
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
  color: var(--color-text-sub);
  text-align: center;
  position: relative;
}

.experience-banner__title {
    color: var(--color-text-sub);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-family: var(--font-heading);
    margin-bottom: 0;
    letter-spacing: 0.05em;
}
.experience-banner__subtitle {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}
.experience-banner__btn {
    background-color: white; /* 背景を白に設定 */
    color: var(--color-text-main); 
    border: 1px solid var(--color-text-sub); /* 白い枠線を追加 */
border-radius: 1.6rem;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 0.8rem 1.6rem;
}
.gallery-banner {
  width: 100%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/wp-content/themes/munikyoto/assets/img/gallery/banner-gallery.jpg');
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
  color: var(--color-text-sub);
  text-align: center;
  position: relative;
}

.gallery-banner h2{
	color: var(--color-text-sub);
}
.gallery-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	/* 背景をほんのり暗くして文字を見やすく */
	z-index: 1;
}
.gallery-banner__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	margin: 0 auto;
}
.gallery-banner__title {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-family: var(--font-heading);
	margin-bottom: 0.5rem;
	letter-spacing: 0.05em;
}
.gallery-banner__subtitle {
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
	opacity: 0.8;
}
.gallery-banner__description {
	font-size: 1rem;
	line-height: 1.8;
	max-width: 90%;
	margin: 0 auto;
	opacity: 0.9;
}

.content-col {
	flex: 1;
	padding-left: 8%;
}


/* single.php エクスペリエンス記事反映*/
.single dd {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 0;
	padding-left: 1em;
}

.single dt {
	padding-top: 1rem;
	font-weight: bold;
}
.single-article {
	max-width: 120rem; /* 記事本文の最大幅 */
	margin: 0 auto;
	padding: 10rem;
	background-color: var(--color-white);
	box-shadow: 0 4px 12px var(--color-shadow-subtle);
	border-radius: 0.8rem;
	margin-bottom: var(--section-margin-bottom);
}


.single-meta {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 2rem;
	font-size: var(--font-size-small);
	color: var(--color-text-light);
}

.single-date {
	font-weight: bold;
}

.single-cat {
	background-color: var(--color-background);
	padding: 0.4rem 1rem;
	border-radius: 9999px;
	color: var(--color-base);
}

.single-title {
	font-size: clamp(2.8rem, 4vw, 3.8rem);
	margin-bottom: 3rem;
	text-align: left;
	color: var(--color-base);
}

.single-content {
	line-height: 1.8;
	color: var(--color-base);
}

.single-content img {
	margin: 2rem auto;
	border-radius: 0.8rem;
	box-shadow: 0 4px 12px var(--color-shadow-subtle);
}

.single-thumb {
	text-align: center;
	margin-bottom: 3rem;
}

.single-thumb img {
	max-width: 100%;
	height: auto;
	border-radius: 0.8rem;
	box-shadow: 0 4px 12px var(--color-shadow-light);
}

.single-footer {
	display: flex;
	/* justify-content: space-between; /* 削除: 他のアイテムがある場合にボタンが左右に動く原因となっていました */
	justify-content: center; /* 追加: フッター内のコンテンツを中央に配置します */
	align-items: center;
	margin-top: 5rem;
	padding-top: 3rem;
	/* flex-wrap: wrap; /* 削除: 単一の中央配置アイテムには不要です */
}
.btn--call {
  display: inline-flex;
  align-items: center;
  padding: 1.2rem 2.4rem;
  background-color: var(--color-accent);
  color: var(--color-text-sub);
  text-decoration: none;
  border-radius: 0.8rem;
  font-weight: bold;
  font-size: var(--font-size-base);
  margin-top: 1.2rem;
  transition: background-color var(--transition-speed-medium), transform var(--transition-speed-medium);
}
.btn--call::before {
  content: "\260E"; 
  margin-right: 0.5em;
}
.btn--call:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

.cta-button {
	display: inline-block; /* パディングと幅の調整に必須です */
	padding: 1.5rem 3rem;
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	text-decoration: none;
	/* 削除: display: flex; justify-content: center; align-items: center;
	   これらはボタン内部のコンテンツを中央に配置するためのものでしたが、
	   テキストのみの場合は不要です。内部テキストの中央揃えが必要な場合は
	   `text-align: center;` が適切ですが、`inline-block` とパディングで十分です。 */
	border-radius: 0.8rem;
	font-weight: bold;
	font-size: 1.8rem;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
	background-color: var(--color-accent-hover);
}
/* 関連する Experience 紹介 (single.php) */
.related-experience {
	margin-top: var(--section-margin-bottom);
	padding: var(--section-padding-y) 0;
	background-color: var(--color-background);
	text-align: center;
}

.related-title {
	font-size: clamp(2.4rem, 4vw, 3.2rem);
	margin-bottom: 4rem;
	color: var(--color-base);
}

.related-carousel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 関連カードのグリッド */
	gap: 2rem;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 2rem;
}

.related-card {
	background-color: var(--color-white);
	border-radius: 0.8rem;
	overflow: hidden;
	box-shadow: 0 2px 8px var(--color-shadow-subtle);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: left;
}

.related-card:hover {
	transform: translateY(-0.5rem);
	box-shadow: 0 6px 16px var(--color-shadow-light);
}

.related-card a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.related-thumb {
	aspect-ratio: 4/3;
	overflow: hidden;
	text-align: center;
	border-radius: 1.2rem 1.2rem 0 0;
}

.related-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 1.2rem 1.2rem 0 0;
	display: block;
}

.related-heading {
	font-size: 1.6rem;
	font-weight: bold;
	padding: 1.5rem;
	margin: 0;
	color: var(--color-text-main);
}


/* page.php */
.page-fv {
	position: relative;
	width: 100%;
	height: 30vh; /* サブページ用のFVの高さ */
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	color: var(--color-text-sub);
	text-align: center;
	margin-top: 8rem; /* ヘッダーの高さ分下げる */
}
.page-fv::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4); /* オーバーレイ */
}
.page-fv__inner {
	position: relative;
	z-index: 2;
}
.page-fv__title {
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-family: var(--font-heading);
	color: var(--color-text-sub);
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	margin-bottom: 0;
}
.page-main {
	padding: var(--section-padding-y) 0;
}
.page-main__inner {
	max-width: 90rem; /* コンテンツの最大幅 */
	margin: 0 auto;
	padding: 0 2rem;
	line-height: 1.8;
	color: var(--color-base);
}
.page-main__inner h1, .page-main__inner h2, .page-main__inner h3 {
	margin-top: 2em;
	margin-bottom: 1em;
}
.page-main__inner p {
	margin-bottom: 1.5em;
}

/* ================================================== 
	店舗情報 
================================================== */

.store-info-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
}
.store-info-text {
	flex: 1 1 300px;
}
.store-info-image {
	flex: 1 1 300px;
	text-align: center;
}

.store-info-block {
	padding: var(--section-padding-y) 0;
		margin-top: var(--spacing-unit-xlarge);
	margin-bottom: var(--section-margin-bottom);
	background-color: var(--color-white); /* 背景色 */
}
.store-info-block section {
	padding: 4rem 0; /* セクションの上下パディング */
	border-bottom: 1px solid var(--color-border); /* セクション間の境界線 */
background-color: var(--color-background); /* セクションの背景色 */
}
.store-info-block__inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
  margin-top: 4rem;
	padding: 0 var(--spacing-unit-large);
		
}
.official-statement {
  padding: 4rem 0;
}

.official-statement .store-info-block__inner {
  background-color: var(--color-white);
}


.store-info__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem; /* 間隔を広げる */
	align-items: start;
}

.store-info__title {
	font-size: clamp(2.4rem, 4vw, 3.2rem);
	font-family: var(--font-heading);
	color: var(--color-base);
	margin-bottom: 1.5rem;
}
.store-info__lead {
	font-size: var(--);
	line-height: 1.8;
	color: var(--color-text-main);
	margin-bottom: 2.5rem;
}
.store-info__details li {
	margin-bottom: 1rem;
	font-size: var(--font-size-base);
	color: var(--color-base);
}
.store-info__details li strong {
	color: var(--color-accent); /* 強調色 */
	margin-right: 0.5rem;
}

.store-info__image img {
	width: 100%;
	height: auto;
	border-radius: 0.8rem;
	object-fit: cover;
	box-shadow: 0 4px 12px var(--color-shadow-light);
}

.pdf-link {
	display: inline-block;
	color: var(--color-accent);
	text-decoration: none;
	margin-bottom: 0.5rem;
	font-size: var(--font-size-small);
}
.pdf-link::after {
	font-size: 0.8em;
	vertical-align: super;
}
.pdf-link::before {
  content: '📄';
  margin-right: 0.3em;
  font-size: 1em;
}
.pdf-link:hover {
  text-decoration: none;
  color: var(--color-text-sub);
  background-color: var(--color-accent-hover);
  padding: 0.2em 0.5em;
  border-radius: 8%;
  transition: all 0.3s ease;
}
.store-info__menu-links a.pdf-link {
  display: inline-block;
  margin-top: 1.6rem;
  padding: 0.4em 0.8em;
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  background-color: var(--color-card);
  color: var(--color-accent);
  font-weight: 500;
}
/* ================================================== 
	フッター 
================================================== */

.site-footer {
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	margin-top: var(--section-margin-bottom);
	padding-top: 8rem;
	padding-bottom: 2rem;
	position: relative;
}
/* PAGE TOPボタン */

.footer-gotop-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	position: absolute;
	top: -3rem;
	left: 50%;
	transform: translateX(-50%);
	transition: background-color 0.3s ease;
	z-index: 10;
}
.footer-gotop-btn:hover {
	background-color: rgba(255, 255, 255, 0.5);
}
.footer-gotop-btn .arrow-up {
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	transform: rotate(45deg);
	border-top: 0.2rem solid var(--color-accent);
	border-left: 0.2rem solid var(--color-accent);
	top: 0.2rem;
}
/* フッターコンテンツのグリッドレイアウト */

.footer-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	padding-bottom: 6rem;
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
	margin-bottom: 2rem;
	align-items: end;
}
/* ==================================================
   フッター
================================================== */

.site-footer {
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	margin-top: var(--section-margin-bottom);
	padding-top: 8rem;
	padding-bottom: 2rem;
	position: relative;
}
/* PAGE TOPボタン */

.footer-gotop-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	position: absolute;
	top: -3rem;
	left: 50%;
	transform: translateX(-50%);
	transition: background-color 0.3s ease;
	z-index: 10;
}
.footer-gotop-btn:hover {
	background-color: rgba(255, 255, 255, 0.5);
}
.footer-gotop-btn .arrow-up {
	width: 1.5rem;
	height: 1.5rem;
	position: relative;
	transform: rotate(45deg);
	border-top: 0.2rem solid var(--color-accent);
	border-left: 0.2rem solid var(--color-accent);
	top: 0.2rem;
}
/* フッターコンテンツのグリッドレイアウト */

.footer-content {
	display: grid;
	grid-template-columns: 1fr 1fr; /* 左カラムと右カラムに分割 */
	gap: 4rem;
	padding-bottom: 6rem;
	border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
	margin-bottom: 2rem;
	align-items: end; /* カラムの底部を揃える */
}

/* ================================
   フッターロゴ（SVG表示対応）
================================ */

/* .footer-logo-area .site-logo {
	position: static;
} */ /* HTML構造から.site-logoを削除したので不要 */

.footer-logo-social-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;      /* ロゴとアイコンの間隔 */
	margin-bottom: 6rem; /* SNSアイコンと連絡先情報の間のスペース */
	flex-wrap: wrap; /* 小さい画面で折り返す */
	justify-content: flex-start; /* ロゴに左揃え */
}

/* ロゴ画像のスタイル */
.footer-logo-link .footer-logo-img { /* セレクタを具体的に */
	max-width: 10rem; /* 元々の max-width を活かす */
	height: 48px; /* カンプに合わせて指定 */
	display: block;
	/* margin-bottom は .footer-logo-social-wrapper で管理されるため削除 */
	object-fit: contain;
}

.footer-col {
	flex: 1;
	padding-left: 8%;
}

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

.social-links img {
	width: 24px;
	height: 24px;
	transition: transform 0.2s ease, filter 0.2s ease;
}

.social-links a:hover img {
	transform: scale(1.1);
	filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
}
/* 連絡先情報 */
.footer-contact-info p {
	font-size: 1.4rem;
	margin-bottom: 0.8rem;
	color: var(--color-text-sub); /* pタグ内の直接のテキストに適用 */
	text-align: left;
	margin-left: 2rem;
}

/* pタグの中のaタグにスタイルを適用 */
.footer-contact-info p a {
	color: var(--color-text-sub); /* ここで目的の白色（--color-text-sub）を適用 */
	text-decoration: none; /* 下線が不要であれば追加 */
}

.footer-contact-info .hotel-name {
	color: var(--color-white);
	font-weight: bold;
	margin-bottom: 1rem;
}

/* フッターリンク (よくあるご質問など) */

.footer-links ul {
	font-size: 1.4rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-links li {
	margin-bottom: 1rem;
}
.footer-links li a {
	color: inherit;
	display: flex;
	align-items: center; /* アイコンとテキストを中央揃え */
}
.footer-links li a::before {
	content: '›';
	margin-right: 0.8rem;
	font-weight: bold;
	line-height: 1;
	align-self: center; /* テキストと中央揃え */
}
.footer-links li a:hover {
	color: var(--color-subtitle);
	opacity: 1;
}
/* 著作権表示 */

.footer-copyright {
	text-align: center;
	font-size: 1.2rem;
	color: rgba(255, 255, 255, 0.7);
}
/* ==================================================
   メディアクエリ
================================================== */
@media (min-width: 769px) {
	/* モバイル専用要素の非表示 */
	.sp-nav,
	.js-sp-nav,
	.hamburger,
	.js-hamburger,
	.reserve-btn-mobile,
	.wpml-ls-mobile-dropdown {
		display: none;
	}

	/* グローバルナビゲーション（PC用）の表示 */
	.global-nav {
		display: flex;
		flex: 1;
		align-items: center;
		padding-left: 6rem;
	}

	/* PC用の言語スイッチャーの表示 */
	.header-actions .lang-switcher {
		display: block;
	}

	/* ヘッダー内部のレイアウト調整 */
	.l-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 var(--spacing-unit-large);
		width: 100%;
		max-width: var(--container-max-width);
		margin: 0 auto;
		flex-wrap: nowrap;
		position: relative;
	}

	.l-header .site-logo {
		margin-left: 0;
		order: 0;
	}

	.header-actions {
		display: flex;
		gap: 1rem;
		align-items: center;
		justify-content: flex-start;
		order: initial;
		flex: initial;
		margin-right: 0;
	}

	.header-actions .reserve-btn {
		order: initial;
		align-self: initial;
		text-align: initial;
		margin-left: 4rem;
	}

	/* ニュースカードのレイアウト（デスクトップ全般） */
	.news-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 4rem;
		max-width: var(--container-max-width);
		margin: 0 auto;
		width: 100%;
	}

	.news-card {
		min-width: 0;
		width: 100%;
	}

	.news-card__image {
	display: block;
	overflow: hidden;
	min-height: 1px; 
	}

	.news-card__image img {
		display: block;
		max-width: 100%;
		height: auto;
		transition: transform var(--transition-speed-medium) var(--transition-timing-ease);
	}

	.news-card:hover .news-card__image img {
		transform: scale(1.05);
	}

	.news-section .inner {
		max-width: var(--container-max-width);
		margin: 0 auto;
		padding-left: clamp(1.6rem, 5vw, 3.2rem);
		padding-right: clamp(1.6rem, 5vw, 3.2rem);
	}

	.gallery-banner {
		height: 400px;
	}

	/* ギャラリーとテキストセクションのデスクトップスタイル */
	.gallery-text-layout {
		flex-direction: row;
		gap: var(--spacing-unit-large);
	}

	.gallery-text-layout__gallery,
	.gallery-text-layout__content {
		max-width: 50%;
	}

	.gallery-text-layout__content {
		padding-left: var(--spacing-unit-large);
	}

	.sliderArea {
		justify-content: space-between;
	}

	.photo-gallery {
		flex-direction: row;
	}

	.photo-gallery__main {
		max-width: 70%;
	}

	.photo-gallery__thumbs {
		display: flex;
	}

	.gallery-modal__thumbs {
		display: flex;
	}

	.brand-concept .inner p {
		text-align: center;
	}

	/* 単一記事ページ（single.php）のデスクトップスタイル */
	.single-footer {
		flex-wrap: nowrap; /* PCでは改行しない */
	}

	.single-cta {
		flex: none; /* PCでは幅を固定 */
		margin-bottom: 0;
		text-align: center;
	}

	.single-prev,
	.single-next {
		flex: 1 1 0%; /* 左右に広がる */
	}

	.single-prev {
		text-align: left;
	}

	.single-next {
		text-align: right;
	}
}


/* --- モバイル・タブレット縦向き (768px 以下) --- */
@media (max-width: 768px) {
	/* モバイル専用要素の表示 */
	  .single-article {
	padding: 2rem;
  }
#bookingBtnHeader {
  position: fixed;
  top: 2.4rem;
  right: 8.6rem; /* ハンバーガーとの余白を意識して調整 */
  z-index: 10002;
}

	/* ハンバーガーアイコンの表示 (デフォルト状態) - 展開前も展開後も右上固定 */
	.hamburger, .js-hamburger {
		display: flex;
		position: fixed;
		top: 0.2rem;
		left: 4.8rem; 
		z-index: 10003;
		order: 2;
		cursor: pointer;
		background: none;
		border: none;
		padding: 0;
		width: 2.4rem;
		height: 2rem;
		flex-direction: column;
		justify-content: space-between;
		outline: none;
		margin-left: 1rem;
	}

@media (max-width: 480px) {
    /* 全体的な調整 */
    .store-info-block section {
        padding: 2rem 0; /* セクションの上下パディングを小さくする */
    }
    .store-info-block__inner {
        padding: 0 var(--spacing-unit-medium); /* 左右のパディングを小さくする */
    }

    /* フレックスコンテナの調整 */
    .store-info-flex {
        flex-direction: column; /* 要素を縦に並べる */
        gap: 1.5rem; /* ギャップを小さくする */
    }
    .store-info-text,
    .store-info-image {
        flex: 1 1 auto; /* 横幅を自動調整し、全幅に近い形で表示 */
    }

    /* グリッドレイアウトの調整 */
    .store-info__grid {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 2rem; /* 間隔を小さくする */
    }

    /* テキスト関連の調整 */
    .store-info__title {
        font-size: 2.2rem; /* タイトルフォントサイズを小さくする */
        margin-bottom: 1rem;
    }
    .store-info__lead {
        font-size: var(--font-size-small); /* リード文のフォントサイズを小さくする */
        margin-bottom: 1.5rem;
    }
    .store-info__details li {
        font-size: var(--font-size-small); /* 詳細リストのフォントサイズを小さくする */
        margin-bottom: 0.8rem;
    }

    /* 画像の調整 */
    .store-info__image img {
        border-radius: 0.5rem; /* 角丸を小さくする */
        box-shadow: 0 2px 8px var(--color-shadow-light); /* シャドウを控えめにする */
    }
    .store-info-image {
        text-align: left; /* モバイルでは画像を左寄せにするか、必要に応じてcenterのままにする */
    }
}

	/* ハンバーガーアイコンの線の太さ（モバイルのみ） */
	.hamburger span, .js-hamburger span {
		display: block; /* 線として表示するために必要 */
		width: 100%; /* 親要素の幅いっぱいに広げる */
		height: 0.3rem;
		border-radius: 0.1rem;
		background-color: var(--color-base); /* 線の色 */
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	}
	/* 疑似要素（上下の線）のスタイル */
	.hamburger::before, .hamburger::after,
	.js-hamburger::before, .js-hamburger::after {
		content: ''; /* 疑似要素にはcontentが必要 */
		display: block; /* 線として表示するために必要 */
		width: 100%; /* 親要素の幅いっぱいに広げる */
		height: 0.3rem;
		border-radius: 0.1rem;
		background-color: var(--color-base); /* 線の色 */
		position: absolute; /* 親要素に対して絶対配置 */
		left: 0;
		transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, opacity 0.3s ease-in-out;
	}

	.hamburger::before, .js-hamburger::before {
		top: 0; /* 上の線 */
	}

	.hamburger::after, .js-hamburger::after {
		bottom: 0; /* 下の線 */
	}

	/* メニューが開いた時のハンバーガーアイコンのアニメーション */
	.hamburger.is-open span, .js-hamburger.is-open span {
		opacity: 0; /* 中央の線を非表示 */
		transform: scaleX(0); /* 中央の線を縮小 */
	}

	.hamburger.is-open::before, .js-hamburger.is-open::before {
		top: 50%;
		transform: translateY(-50%) rotate(45deg); /* 上の線を回転してXの一部に */
		background-color: #fff; /* Xアイコンの色を白に */
	}

	.hamburger.is-open::after, .js-hamburger.is-open::after {
		bottom: 50%;
		transform: translateY(50%) rotate(-45deg); /* 下の線を回転してXのもう一部に */
		background-color: #fff; /* Xアイコンの色を白に */
	}


	/* グローバルナビゲーション（PC用）とPC用の言語スイッチャーを非表示 */
	.global-nav,
	.header-actions .lang-switcher {
		display: none;
	}

	/* ヘッダーのレイアウト調整 */
	.l-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 var(--spacing-unit-large);
		width: 100%;
		max-width: var(--container-max-width);
		margin: 0 auto;
		flex-wrap: nowrap;
		position: relative;
		padding-left: 2.4rem;
		padding-right: 2.4rem;
	}
	.l-header .site-logo {
		margin-left: 0;
		order: 0;
	}
	.header-actions {
		display: flex; /* flexbox を使用 */
		gap: 1rem;
		align-items: center; /* 垂直方向中央揃え */
		justify-content: flex-end; /* 右寄せ */
		order: 1;
		flex: 1;
	}
	.header-actions .reserve-btn {
		order: 2;
		align-self: center; /* align-self: right; は無効なプロパティなので center に修正 */
		text-align: left;
		border-radius: 1.6rem;
margin-right: 0.5rem; /* ハンバーガーと間隔を空けつつ右端へ - 削除または調整 */
	}

	/* その他のモバイル向けレイアウト調整 */
	.news-section {
		padding-top: 3rem;
	}
	.news-cards {
		grid-template-columns: 1fr;
	}
	.store-info-flex {
		flex-direction: column;
	}
	.content-block__wrapper {
		flex-direction: column;
		gap: var(--spacing-unit-large);
		padding: 0 var(--spacing-unit-medium);
	}
	/* モバイルでは全て同じ順序（画像上、テキスト下） */
	.content-block:nth-child(odd) .content-block__wrapper,
	.content-block:nth-child(even) .content-block__wrapper {
		flex-direction: column;
	}
	.content-block__image, .content-block__body {
		max-width: 100%;
	}
	.content-block__body {
		padding: var(--spacing-unit-medium);
		text-align: center;
	}
	.content-block__title {
		font-size: clamp(2rem, 5vw, 2.8rem);
		margin-bottom: var(--spacing-unit-medium);
	}

	/* ブランドコンセプト：モバイル版でテキストを左揃え */
	.brand-concept .inner p {
		text-align: left;
	}

	/* 単一記事ページ（single.php）のモバイルスタイル */
	.single-footer {
		flex-direction: column;
		gap: 2rem;
	}
	.single-prev, .single-next {
		width: 100%;
	}
	.single-prev {
		order: 2; /* 前の記事を下に */
	}
	.single-next {
		order: 1; /* 次の記事を上に */
	}
  
.fv-area {
    height: 60dvh; /* ビューポートの高さの60%に設定 */
    min-height: 320px; /* 最小高さを確保 */
    margin-top: 0;
  }
	/* ① セレクタ詳細度を上げて確実に勝たせる */
section.fv-area.light-fv {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ② 下の .fv-area を “高さ指定なし”に一旦して整理 */

  .fv-area video {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* 少し引き気味に */
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }

  /* ③ 画像FVのスタイル調整 */
  .fv-area.fv-image .fv-media__img {
    height: 100%;
    object-fit: contain; /* 画像全体を表示 */
  }

.fv-catch {
  position: absolute;
  bottom: 10%;
  left: 32%;
  padding: 0 1rem;
}

.fv-image__picture {
  display: block;
  width: 100%;
}
.fv-catch h1 {
font-size: 2.4rem; 
 }
 
.fv-catch h1,
.fv-catch p {
  line-height: 1.1;
  letter-spacing: 0.02em;
}




	/* モバイルメニュー（ドロワー）の表示制御 */
	/* custom.css にて詳細なスタイルと is-open の制御が行われているため、ここでは基本の display のみ */
	.sp-nav, .js-sp-nav {
		display: flex; /* モバイルブレークポイントで表示を有効化 */
	}

	/* モバイルWPML用：PC版デザインに合わせるための修正 */
	.lang-switcher-mobile {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 4rem;
	}

	/* モバイルWPMLドロップダウンコンテナ */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown { /* ここを .wpml-ls-mobile-dropdown に変更 */
		position: relative;
		z-index: 1000;
		font-family: var(--font-menu);
		letter-spacing: 0.05em;
		width: auto;
		max-width: none;
		border-radius: 0;
		overflow: visible;
		border: none;
		background: transparent;
		box-shadow: none;
		text-align: center; /* 言語リストを中央揃えにするため追加 */
	}

	/* モバイルWPMLトリガーボタン (PC版の Language ボタンを再現) */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown > ul > li.current-lang > span.wpml-ls-display {
		/* PC版の .js-wpml-ls-item-toggle と同じスタイルを適用 */
		position: relative;
		display: inline-flex; /* flexに変更してアイコンとテキストを並べる */
		align-items: center; /* 垂直方向中央揃え */
		justify-content: center; /* 水平方向中央揃え */
		background-color: transparent;
		border: 1px solid var(--color-subtitle);
		padding: 0.8rem 2.8rem 0.8rem 1.6rem;
		border-radius: 0;
		cursor: pointer;
		font-size: 1.4rem;
		font-family: var(--font-menu);
		font-weight: 200;
		color: var(--color-base);
		transition: all var(--transition-speed-medium) var(--transition-timing-ease);
		min-width: 100px;
		width: auto;
		box-sizing: border-box;
		box-shadow: none;
		/* ドロップダウン矢印のためのスペース */
		padding-right: 3rem; 
	}
	
	/* モバイルWPMLトリガーボタンのホバー/タップ */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown > ul > li.current-lang > span.wpml-ls-display:hover, 
	.lang-switcher-mobile .wpml-ls-mobile-dropdown > ul > li.current-lang > span.wpml-ls-display:active {
		background-color: var(--color-background);
		color: var(--color-accent);
		border: none;
	}

	/* モバイルWPMLの矢印アイコン */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown .dropdown-arrow { /* WPMLプラグインが矢印を生成する場合 */
		position: absolute;
		right: 1.2rem;
		top: 50%;
		transform: translateY(-50%);
		color: var(--color-base);
		transition: transform 0.3s ease;
		width: 16px;
		height: 16px;
	}
	/* モバイルWPMLのドロップダウンが開いた時の矢印 */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown.is-open .dropdown-arrow {
		transform: translateY(-50%) rotate(180deg);
	}

	/* モバイル版のドロップダウンメニュー本体 */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown ul.wpml-ls-mobile-menu { /* ここを ul.wpml-ls-mobile-menu に変更 */
		display: none; /* 初期状態は非表示 */
		position: absolute;
		top: 100%; /* トリガーボタンの下に配置 */
		left: 50%; /* 中央寄せの基準 */
		transform: translateX(-50%); /* 中央寄せ */
		background-color: var(--color-background);
		border-radius: 0;
		list-style: none;
		padding: 0.5rem 0;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease;
		z-index: 999;
		border: 1px solid var(--color-subtitle);
		border-top: none;
		box-sizing: border-box;
		box-shadow: 0 4px 12px var(--color-shadow-light);
		min-width: 100%; /* 親要素の幅に合わせる */
		width: auto; /* left/rightで幅を決定するためauto */
		max-width: none; /* 親要素のmax-widthを継承するためnoneに */
	}
	/* モバイル版のドロップダウンが開いた時 */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown.is-open ul.wpml-ls-mobile-menu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0); /* 中央寄せとY軸調整を組み合わせる */
		display: block;
	}
	/* モバイル版のドロップダウンリストのアイテム */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown ul.wpml-ls-mobile-menu li {
		margin: 0;
		padding: 0;
	}
	/* モバイル版のドロップダウンリストのリンク */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown ul.wpml-ls-mobile-menu li a {
		display: block;
		padding: 0.8rem 1.6rem;
		color: var(--color-base);
		font-size: 1.4rem;
		font-weight: 300;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease;
	}
	/* モバイル版のホバー（タップ）時 */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown ul.wpml-ls-mobile-menu li a:hover, 
	.lang-switcher-mobile .wpml-ls-mobile-dropdown ul.wpml-ls-mobile-menu li a:active {
		background-color: var(--color-accent);
		color: var(--color-text-sub);
	}
	/* 現在の言語表示 */
	.lang-switcher-mobile .wpml-ls-mobile-dropdown ul.wpml-ls-mobile-menu li.current-lang span.wpml-ls-display {
		display: block;
		padding: 0.8rem 1.6rem;
		color: var(--color-base);
		font-size: 1.4rem;
		font-weight: bold; /* 現在の言語は太字に */
		background-color: var(--color-background); /* 背景色を少し変えるなど */
	}
	
	.wpml-ls-legacy-dropdown {
		z-index: 1050; /* 必要であればモバイルでの z-index を調整 */
	}
		/* モバイルメニューのフォントサイズ調整 */
	.sp-nav a {
		font-size: 1.8em; /* フォントサイズを小さく */
		padding: 12rem 0; /* パディングを調整 */
		color: var(--color-text-sub);
		font-family: var(--font-menu);
	}
	/* モバイルメニューの表示制御（sp-navとjs-sp-nav統合） */
	.sp-nav, .js-sp-nav {
		position: fixed;
		top: 0;
		left: 100vw; /* 初期状態：画面外 */
		width: 100%;
		height: 100dvh; /* modern viewport height with fallback */
		background-color: var(--color-bg-overlay);
		opacity: 0;
		visibility: hidden;
		transition: left var(--transition-speed-medium) var(--transition-timing-ease), opacity var(--transition-speed-medium) var(--transition-timing-ease), visibility var(--transition-speed-medium) var(--transition-timing-ease);
		z-index: 9999;
		display: none; /* ← これが重要！ reset.cssを上書きします */
	}
	.sp-nav.is-open, .js-sp-nav.is-open {
		left: 0; /* 開いた状態：画面内 */
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
		display: flex; /* ← こちらにも を追加 */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}


/* --- スマートフォン向けのさらに細かい調整 (480px 以下) --- */

@media (max-width: 480px) {
	/* ヘッダーのロゴサイズ調整 */
	.l-header .site-logo img {
		max-width: 120px; /* ロゴの最大幅を小さく */
		height: auto; /* 高さは自動調整 */
	}

	/* ニュースカードのフォントサイズ調整 */
	.news-card__title {
		font-size: 1.6rem; /* タイトルのフォントサイズを小さく */
	}

	/* ギャラリーとテキストセクションのフォントサイズ調整 */
	.gallery-text-content__title {
		font-size: 2rem; /* タイトルのフォントサイズを小さく */
	}

	/* フッターのフォントサイズ調整 */
	.site-footer p {
		font-size: 1.2rem; /* フォントサイズを小さく */
	}


}