/* ==========================================================================
    WPML言語切り替えドロップダウン
========================================================================== */
.map-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* 言語セレクターのコンテナ */
.lang-switcher, .wpml-ls-legacy-dropdown {
    position: relative;
    z-index: 1000; /* 他の要素より手前に表示 */
    font-family: var(--font-menu); /* テーマで定義されたメニューフォントを使用 */
    letter-spacing: 0.05em; /* 文字間隔を少し広げて高級感を出す */
}

/* 現在の言語表示（ドロップダウントリガー）のボタン風スタイル */
.js-wpml-ls-item-toggle {
    position: relative;
    z-index: 1001; /* ドロップダウンメニューより手前に表示 */
    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; /* ある程度の最小幅を確保 */
    text-align: left; /* テキストを左寄せ */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
    display: flex; /* フレックスボックスで配置制御 */
    align-items: center; /* 上下中央揃え */
    justify-content: flex-start; /* 左右左揃え */
}

/* ホバー時のスタイル */
.js-wpml-ls-item-toggle:hover {
    background-color: var(--color-background); /* ホバーで背景を少し明るく */
    color: var(--color-accent); /* アクセントカラーに */
    border: none;
}

/* 現在の言語テキスト */
.js-wpml-ls-item-toggle .current-lang {
    display: inline-block;
    margin-right: 0.5rem; /* 矢印との間隔 */
}

/* ドロップダウンの矢印 (SVG用) */
.dropdown-arrow {
    position: absolute;
    right: 1.2rem; /* 右端からの位置調整 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem; /* 矢印のサイズ (SVGなのでwidth/heightで調整が主) */
    color: var(--color-base); /* 矢印の色 */
    transition: transform 0.3s ease;
    width: 16px; /* SVGの幅を指定 */
    height: 16px; /* SVGの高さを指定 */
}

/* ドロップダウンメニュー本体（共通プロパティをここに集約） */
.wpml-ls-sub-menu {
    display: none; /* 初期状態は非表示 */
    position: absolute;
    top: 100%; /* トリガーのすぐ下に配置 */
    right: 0; /* デフォルトで右揃えとする */
    min-width: 100%; /* トリガーの幅に合わせる */
    background-color: var(--color-background); /* テーマで定義された背景色 */
    border-radius: 0; /* 角丸をなくす */
    list-style: none;
    padding: 0.5rem 0; /* 上下のパディングを調整 */
    margin: 0;
    z-index: 999; /* トリガーより下 */
    border: 1px solid var(--color-subtitle); /* 外枠をトリガーと合わせる */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
    box-shadow: 0 4px 12px var(--color-shadow); /* シャドウを追加 (デスクトップ版で共通) */

    /* アニメーション関連の初期状態 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease;
}

/* ドロップダウンが開いた時の表示（JSとWPML公式クラスを統合） */
/* WPML公式クラス `wpml-ls-opened` と、JSで付与される `is-open` の両方に対応 */
.js-wpml-ls-legacy-dropdown.is-open .wpml-ls-sub-menu,
.wpml-ls-legacy-dropdown.wpml-ls-opened .wpml-ls-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block; /* WPML公式スクリプト対応のためdisplay: blockも追加 */
}

/* ドロップダウンが開いた時の矢印の回転（JSとWPML公式クラスを統合） */
.js-wpml-ls-legacy-dropdown.is-open .dropdown-arrow,
.wpml-ls-legacy-dropdown.wpml-ls-opened .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* ドロップダウンリストのアイテム */
.wpml-ls-sub-menu li {
    margin: 0;
    padding: 0;
}

/* ドロップダウンリストのリンク */
.wpml-ls-sub-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;
}

/* ドロップダウンリストのアイテムのホバーと現在言語 */
.wpml-ls-sub-menu li a:hover,
.wpml-ls-sub-menu li.current-lang a, /* カスタムで付与される現在言語クラス */
.wpml-ls-sub-menu li.wpml-ls-current-language a { /* WPML公式で付与される現在言語クラス */
    background-color: var(--color-accent); /* ホバー時の背景色をアクセントカラーに */
    color: var(--color-text-sub); /* ホバー時のテキスト色を明るく */
}

/* フラグアイコン（任意で調整） */
.wpml-ls-flag {
    display: inline-block;
    margin-right: 0.8rem;
    width: 18px;
    height: 13px;
    vertical-align: middle;
}

/* WPML公式スクリプトによるクラスも調整 (必要であれば残す) */
.wpml-ls-item-toggle {
    text-transform: uppercase;
}
.wpml-ls-toggle-text, .wpml-ls-display {
    font-weight: 300; /* より細いフォントウェイト */
}

/* ==================================================
    コンポーネント: ギャラリーセクション
================================================== */

.gallery-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  justify-content: center;
  padding: 20px;
}


.gallery-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-blocks {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 800px;
  margin: 0 auto;
}

.gallery-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
}
/* ==================================================
   コンポーネント: ギャラリーセクション (Gallery Section Component)
================================================== */

/* ハイライトされたサブタイトル */
.stay-feature__subtitle--highlight {
  color: var(--color-subtitle);
  font-weight: bold;
  text-align: left;
}

/* ギャラリーブロック全体のコンテナ */
.stay-feature-blocks {
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 32px; /* ブロック間の余白 */
}

/* 各ギャラリーブロックがコンテナ幅いっぱいに広がるように */
.stay-feature-blocks > * {
  width: 100%;
}

/* 部屋の画像（中央寄せとマージン） */
.stay-rooms__image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--spacing-unit-xlarge);
  margin-bottom: var(--spacing-unit-xlarge);
}

/* 部屋のブロック背景色 */
.stay-rooms-blocks {
  background: var(--color-bg-emphasis);
}

/* 塗りつぶしボタンのスタイル */
.stay-feature__btn {
  background: var(--color-accent);
  color: var(--color-text-sub);
  border-radius: 2.4rem;
  padding: 0.8rem 4rem;
  font-weight: bold;
  transition: background-color var(--transition-speed-medium) var(--transition-timing-ease);
}

/* --- 各機能ブロック (stay-feature) のスタイル --- */

/* 各機能ブロックの共通設定 (中央寄せ、パディングなど) */
.stay-feature {
  display: flex;
  flex-direction: column; /* 狭い画面では縦並びをデフォルトに */
  align-items: center; /* アイテムを中央揃え */
  justify-content: center; /* コンテンツを中央寄せ */
  padding: 40px 20px; /* パディング */
  flex: 0 0 30%; /* stay-feature-group 内での幅調整 */
}

/* 機能ブロック内のインナー要素 (画像と本文の配置) */
.stay-feature__inner {
  display: flex;
  flex-direction: row; /* デスクトップでは横並び */
  align-items: center;
  max-width: 1000px; /* 最大幅 */
  width: 100%;
  gap: 48px; /* 要素間の余白 */
}

/* reverseクラスが指定された場合の表示順 */
.stay-feature__inner.reverse {
  flex-direction: row-reverse;
}

/* 画像ブロックの幅指定 */
.stay-feature__image {
  flex: 1 1 100%;
}

/* 画像自体のスタイル (リサイズ、アスペクト比、角丸) */
.stay-feature__image img {
  width: 100%;
  height: auto;
  object-fit: cover; /* または contain */
  aspect-ratio: 4 / 3; /* 比率を統一 */
  border-radius: 8px;
}

/* 本文部分の幅指定 */
.stay-feature__body {
  flex: 1 1 80%;
  text-align: left;
}


/* --- 機能ブロックのグループ化 (stay-feature-group) --- */

/* 複数の機能ブロックをラップするコンテナ */
.stay-feature-group {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap; /* 狭い画面では折り返す */
  padding: 40px 20px;
}

/* ==================================================
   コンポーネント: ギャラリーセクション スライダー
   (Slickスライダーのカスタムスタイル)
================================================== */

/* --- メインギャラリー表示部 --- */
.gallery-with-text__gallery {
    position: relative; /* 矢印の位置調整用 */
    width: 100%; /* 親要素に合わせて調整 */
    overflow: hidden; /* スライドがはみ出さないように */
}

/* メインスライダーの画像サイズ調整 */
.slider_thumb .main-slide__img {
    width: 100%;
    height: 500px; /* 画像の縦横比に合わせて要調整 */
    object-fit: cover; /* 画像がコンテナに収まるように調整 */
    display: block;
}

/* --- サムネイルスライダー表示部 --- */
.thumb {
    margin-top: var(--spacing-unit-medium); /* メインスライダーとの間隔 */
    padding: 0 var(--spacing-unit-small); /* 左右の余白 */
}

/* サムネイル画像共通スタイル */
.thumb .thumb-slide__img {
    width: 100%;
    height: 100px; /* サムネイルの高さ */
    object-fit: cover;
    opacity: 0.6; /* 非アクティブなサムネイルを少し暗くする */
    transition: opacity var(--transition-speed-medium) var(--transition-timing-ease); /* ホバー時のトランジション */
    cursor: pointer;
    border: 2px solid transparent; /* アクティブなサムネイルのボーダー用 */
}

/* アクティブなサムネイルのスタイル */
.thumb .slick-current .thumb-slide__img {
    opacity: 1; /* アクティブなサムネイルは完全に表示 */
    border-color: var(--color-accent); /* アクセントカラーのボーダー */
}

/* --- Slickスライダーの矢印スタイル (メインスライダー用) --- */
.slider_thumb .slick-prev,
.slider_thumb .slick-next {
    font-size: 0; /* テキスト非表示 */
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 4.0rem; /* 40px */
    height: 4.0rem; /* 40px */
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: var(--color-bg-overlay); /* 背景色をオーバーレイ色に */
    z-index: 10;
    border-radius: 50%;
    transition: opacity var(--transition-speed-medium) var(--transition-timing-ease);
}

.slider_thumb .slick-prev:hover,
.slider_thumb .slick-next:hover {
    opacity: 0.8; /* ホバーで透明度調整 */
}

.slider_thumb .slick-prev {
    left: var(--spacing-unit-large); /* 24px */
}
.slider_thumb .slick-next {
    right: var(--spacing-unit-large); /* 24px */
}

/* 矢印アイコンのスタイル (Slickのデフォルトフォントアイコンを想定) */
.slider_thumb .slick-prev::before,
.slider_thumb .slick-next::before {
    font-family: 'slick'; /* Slickのフォントアイコンを使用 */
    font-size: 2.0rem; /* 20px */
    line-height: 1;
    color: var(--color-text-sub); /* 白 */
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slider_thumb .slick-prev::before {
    content: '\2190'; /* 左矢印 (ユニコード) */
}
.slider_thumb .slick-next::before {
    content: '\2192'; /* 右矢印 (ユニコード) */
}

/* --- Slickドットナビゲーション (モバイル用) --- */
.slider_thumb .slick-dots {
    position: absolute;
    bottom: var(--spacing-unit-medium); /* 1.6rem */
    display: flex;
    width: 100%;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.slider_thumb .slick-dots li {
    margin: 0 var(--spacing-unit-xsmall); /* 0.4rem */
}
.slider_thumb .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 1.0rem; /* 10px */
    height: 1.0rem; /* 10px */
    padding: 0.5rem; /* クリックしやすいようにパディング */
    cursor: pointer;
    color: transparent;
    border: 1px solid var(--color-text-sub); /* 白いボーダー */
    background: transparent;
    border-radius: 50%;
    outline: none;
    transition: background-color var(--transition-speed-medium) var(--transition-timing-ease);
}
.slider_thumb .slick-dots li.slick-active button {
    background-color: var(--color-text-sub); /* アクティブなドットは塗りつぶし */
}

/* ==================================================
   STAYページ バスタイムギャラリー
================================================== */
.stay-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.stay-gallery__grid img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #f8f8f8;
}

/* ==================================================
   コンポーネント: ギャラリーモーダル
================================================== */

/* --- モーダルの全体的な表示設定 --- */
.gallery-modal {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-overlay); /* オーバーレイ背景色 */
    z-index: 9999;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed-medium) var(--transition-timing-ease), visibility var(--transition-speed-medium) var(--transition-timing-ease);
}

.gallery-modal.is-open {
    display: flex; /* JavaScriptで .is-open クラスを追加 */
    opacity: 1;
    visibility: visible;
}

/* --- モーダル内のコンテンツエリア --- */
.gallery-modal__content {
    position: relative;
    width: 90%;
    max-width: 120rem; /* 1200px (任意で調整) */
    background: var(--color-card); /* カード背景色 */
    padding: var(--spacing-unit-xlarge); /* 40px */
    box-shadow: 0 0 2rem var(--color-shadow); /* 影 */
    border-radius: 0.8rem; /* 8px */
    display: flex;
    flex-direction: column;
}

/* --- モーダルの閉じるボタン --- */
.gallery-modal__close {
    position: absolute;
    top: var(--spacing-unit-medium); /* 1.6rem */
    right: var(--spacing-unit-medium); /* 1.6rem */
    font-size: var(--font-size-xxxl); /* 32px */
    color: var(--color-text-main); /* メインテキスト色 */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: opacity var(--transition-speed-medium) var(--transition-timing-ease);
}
.gallery-modal__close:hover {
    opacity: 0.7;
}

/* --- モーダル内のメインスライダー --- */
.gallery-modal__slider {
    flex-grow: 1;
    margin-bottom: var(--spacing-unit-xlarge); /* 40px */
}

.modal-slider .modal-slide__img {
    width: 100%;
    height: auto;
    max-height: 70vh; /* モーダル内の画像の最大高さ */
    object-fit: contain; /* 画像全体を表示 */
    display: block;
}

/* --- モーダル内のサムネイルスライダー --- */
.modal-thumb-slider {
    padding: 0 var(--spacing-unit-small); /* 左右の余白 */
}

/* モーダル内のサムネイル画像共通スタイル */
.modal-thumb-slider .modal-thumb-slide__img {
    width: 100%;
    height: 8.0rem; /* 80px (モーダル内のサムネイル高さ) */
    object-fit: cover;
    opacity: 0.6;
    cursor: pointer;
    border: 2px solid transparent;
    transition: opacity var(--transition-speed-medium) var(--transition-timing-ease);
}
/* モーダル内のサムネイルホバー時のスタイル */
body.modal-open {
  overflow: hidden;
}

/* アクティブなモーダル内サムネイルのスタイル */
.modal-thumb-slider .slick-current .modal-thumb-slide__img {
    opacity: 1;
    border-color: var(--color-accent);
}
/* ========================
    Wordpress直投稿画面用ニュース記事スタイル
======================== */

/* 統合: .news-article および子要素 */
.news-article {
    /* ボックスモデル */
    max-width: 800px;
    padding: var(--spacing-unit-large) var(--spacing-unit-medium);
    margin: 0 auto;
    /* 背景・色 */
    background-color: var(--color-text-sub);
    /* フォント・テキスト */
    font-family: var(--font-base);
    line-height: 1.8;
}
.news-article h2 {
    /* フォント・テキスト */
    font-family: var(--font-heading);
    font-size: var(--font-size-large);
    font-weight: 400;
    /* 游明朝は400が標準 */
    /* ボックスモデル */
    margin-bottom: var(--spacing-unit);
    border-left: 4px solid var(--color-accent);
    padding-left: var(--spacing-unit-small);
}
.news-article h3 {
    /* フォント・テキスト */
    font-family: var(--font-heading);
    font-weight: 400;
    /* ボックスモデル */
    margin-top: var(--spacing-unit-large);
    margin-bottom: var(--spacing-unit);
    /* 背景・色 */
    color: var(--color-accent);
}
.news-article p {
    /* ボックスモデル */
    margin-bottom: var(--spacing-unit);
}
.news-article dl {
    /* ボックスモデル */
    padding: var(--spacing-unit-medium);
    border-radius: 8px;
    /* 背景・色 */
    background-color: var(--color-card);
}
.news-article dt {
    /* フォント・テキスト */
    font-weight: bold;
    /* ボックスモデル */
    margin-top: var(--spacing-unit);
    /* 背景・色 */
    color: var(--color-accent);
}
.news-article dd {
    /* ボックスモデル */
    margin-left: var(--spacing-unit);
    margin-bottom: var(--spacing-unit-small);
}

/* ========================
    galleryのyoutube動画バナーセクション
======================== */

/* movie-fvセクションの全体設定 */
.gallery__movie-fv {
    /* 配置・表示形式 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 子要素のはみ出しを隠す */
    /* ボックスモデル */
    width: 100%;
    height: 60dvh;
    min-height: 400px;
    margin-bottom: var(--section-margin-bottom);
}
/* ギャラリー内部の余白調整 */
.gallery__inner {
    /* ボックスモデル */
    padding-top: 0;
}
/* ギャラリーグリッドのレイアウト調整 */
.gallery__grid {
    /* ボックスモデル */
    margin-top: calc(var(--spacing-unit-xlarge) * -1);
    /* 前の要素との重なり調整 */
}
/* セクションタイトルの共通スタイル */
.section__title {
    /* ボックスモデル */
    margin-top: 0;
    margin-bottom: var(--spacing-unit-xlarge);
}
/* 動画バナー背景画像 */
.movie-fv__bg {
    /* 配置・表示形式 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    /* ボックスモデル */
    width: 100%;
    height: 100%;
    /* その他の視覚表現 */
    object-fit: cover;
    /* 縦横比を保ちつつ要素全体をカバー */
}

/* ================================================== 
	特徴カードリスト（ジムの特徴）

/* 特徴カードリスト */
.gym-info__note {
	font-size: var(--font-size-large);
	color: var(--color-text-subtle);
	margin-top: 4rem;
	padding: var(--spacing-unit-xsmall);
	font-size: var(--font-size-large);
	border: 1px solid var(--color-border);
	background-color: var(--color-bg-emphasis);
	border-radius: 0.8rem;
}

.gym-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;
}

.gym-feature__category {
	display: inline-block;
	font-size: var(--font-size-xl);
	color: var(--color-subtitle);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--spacing-unit-small);
	font-weight: 600;
}

/* カードデザイン */
.gym-feature__card {
	background-color: var(--color-white);
	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;
}

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

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

/* テキストコンテンツ */
.gym-feature__subtitle {
	font-size: 1.4rem;
	color: var(--color-accent);
	margin-bottom: 0.3rem;
}
.gym-feature__title {
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--color-text-main);
	margin-bottom: 0.8rem;
}
.gym-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;
}


/* ==========================================================================
    WPML言語切り替えドロップダウン
========================================================================== */

/* 言語セレクターのコンテナ */
.lang-switcher, .wpml-ls-legacy-dropdown {
    position: relative;
    z-index: 1000; /* 他の要素より手前に表示 */
    font-family: var(--font-menu); /* テーマで定義されたメニューフォントを使用 */
    letter-spacing: 0.05em; /* 文字間隔を少し広げて高級感を出す */
}

/* 現在の言語表示（ドロップダウントリガー）のボタン風スタイル */
.js-wpml-ls-item-toggle {
    position: relative;
    z-index: 1001; /* ドロップダウンメニューより手前に表示 */
    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; /* ある程度の最小幅を確保 */
    text-align: left; /* テキストを左寄せ */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
    display: flex; /* フレックスボックスで配置制御 */
    align-items: center; /* 上下中央揃え */
    justify-content: flex-start; /* 左右左揃え */
}

/* ホバー時のスタイル */
.js-wpml-ls-item-toggle:hover {
    background-color: var(--color-background); /* ホバーで背景を少し明るく */
    color: var(--color-accent); /* アクセントカラーに */
    border: none;
}

/* 現在の言語テキスト */
.js-wpml-ls-item-toggle .current-lang {
    display: inline-block;
    margin-right: 0.5rem; /* 矢印との間隔 */
}

/* ドロップダウンの矢印 (SVG用) */
.dropdown-arrow {
    position: absolute;
    right: 1.2rem; /* 右端からの位置調整 */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem; /* 矢印のサイズ (SVGなのでwidth/heightで調整が主) */
    color: var(--color-base); /* 矢印の色 */
    transition: transform 0.3s ease;
    width: 16px; /* SVGの幅を指定 */
    height: 16px; /* SVGの高さを指定 */
}
.stay-rooms__content {
    margin-top: 2rem;
}
/* ドロップダウンメニュー本体（共通プロパティをここに集約） */
.wpml-ls-sub-menu {
    display: none; /* 初期状態は非表示 */
    position: absolute;
    top: 100%; /* トリガーのすぐ下に配置 */
    right: 0; /* デフォルトで右揃えとする */
    min-width: 100%; /* トリガーの幅に合わせる */
    background-color: var(--color-background); /* テーマで定義された背景色 */
    border-radius: 0; /* 角丸をなくす */
    list-style: none;
    padding: 0.5rem 0; /* 上下のパディングを調整 */
    margin: 0;
    z-index: 999; /* トリガーより下 */
    border: 1px solid var(--color-subtitle); /* 外枠をトリガーと合わせる */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
    box-shadow: 0 4px 12px var(--color-shadow); /* シャドウを追加 (デスクトップ版で共通) */

    /* アニメーション関連の初期状態 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease;
}
/* 画像フェードインアニメーション */
.news-card__image,
.related-thumb {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}
.news-card__image.is-inview,
.related-thumb.is-inview {
  opacity: 1;
  transform: none;
}

/* ニュースカード画像の強制表示・高さ/背景/opacityリセット */
.news-card__image {
  min-height: 180px !important;
  background: #eee !important;
  opacity: 1 !important;
  transform: none !important;
  display: block !important;
}
.news-card__image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  background: #eee !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ドロップダウンが開いた時の表示（JSとWPML公式クラスを統合） */
/* WPML公式クラス `wpml-ls-opened` と、JSで付与される `is-open` の両方に対応 */
.js-wpml-ls-legacy-dropdown.is-open .wpml-ls-sub-menu,
.wpml-ls-legacy-dropdown.wpml-ls-opened .wpml-ls-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block; /* WPML公式スクリプト対応のためdisplay: blockも追加 */
}

/* ドロップダウンが開いた時の矢印の回転（JSとWPML公式クラスを統合） */
.js-wpml-ls-legacy-dropdown.is-open .dropdown-arrow,
.wpml-ls-legacy-dropdown.wpml-ls-opened .dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* ドロップダウンリストのアイテム */
.wpml-ls-sub-menu li {
    margin: 0;
    padding: 0;
}
.section__subtitle {
  text-align: center;
}
/* ドロップダウンリストのリンク */
.wpml-ls-sub-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;
}

/* ドロップダウンリストのアイテムのホバーと現在言語 */
.wpml-ls-sub-menu li a:hover,
.wpml-ls-sub-menu li.current-lang a, /* カスタムで付与される現在言語クラス */
.wpml-ls-sub-menu li.wpml-ls-current-language a { /* WPML公式で付与される現在言語クラス */
    background-color: var(--color-accent); /* ホバー時の背景色をアクセントカラーに */
    color: var(--color-text-sub); /* ホバー時のテキスト色を明るく */
}

/* フラグアイコン（任意で調整） */
.wpml-ls-flag {
    display: inline-block;
    margin-right: 0.8rem;
    width: 18px;
    height: 13px;
    vertical-align: middle;
}

/* WPML公式スクリプトによるクラスも調整 (必要であれば残す) */
.wpml-ls-item-toggle {
    text-transform: uppercase;
}
.wpml-ls-toggle-text, .wpml-ls-display {
    font-weight: 300; /* より細いフォントウェイト */
}
/* ==================================================
    メディアクエリ
================================================== */

/* --- デスクトップ (769px 以上) --- */
@media (min-width: 769px) {
    /* モバイルメニューとハンバーガーアイコンを非表示 */
}
@media (max-width: 768px) {
  .stay-feature__inner {
    flex-direction: column;
    gap: 24px;
    max-width: 100%;
  }
  .stay-feature__image,
  .stay-feature__body {
    width: 100%;
    flex: unset;
  }
  .stay-feature__image img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .room-info {
    flex-direction: column;
  }
  .tab-nav {
    flex-wrap: wrap;
  }
      .content_block {
    padding: 60px 4vw;
  }
  	.news-article {
		padding: var(--spacing-unit-medium) var(--spacing-unit);
		font-size: var(--font-size-medium);
	}
    	.wpml-ls-sub-menu {
		z-index: 1051; /* モバイルメニュー内で表示されるドロップダウンの z-index */
	}

	.news-article h2 {
		font-size: var(--font-size-medium);
	}
	.news-article h3 {
		font-size: var(--font-size-base);
	}
	.movie-fv__title {
		font-size: 2.4rem;
	}
	.movie-fv__content {
		padding: 0 var(--spacing-unit);
	}

  .content_block__wrapper {
    flex-direction: column;
    gap: 40px;
  }

  .content_block--reverse .content_block__wrapper {
    flex-direction: column;
  }

  .content_block__title {
    font-size: 1.5rem;
  }

  .btn {
    font-size: 0.9rem;
  }
    /* ハンバーガーアイコンの表示 */
    .hamburger, .js-hamburger {
        display: flex;
        position: relative;
        z-index: 10001;
        order: 2;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        width: 2.4rem;
        height: 2rem;
        flex-direction: column;
        justify-content: space-between;
        outline: none;
    }

    /* ハンバーガーアイコンの線の太さ（モバイルのみ） */
    .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の一部に */
    }

    .hamburger.is-open::after, .js-hamburger.is-open::after {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg); /* 下の線を回転して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;
        gap: 1rem;
        align-items: center;
        justify-content: flex-end;
        order: 1;
        flex: 1;
        margin-right: 6rem;
    }
    .header-actions .reserve-btn {
        order: 1;
        align-self: center;
        text-align: left;
    }

    /* その他のモバイル向けレイアウト調整 */
    .news-section {
        padding-top: 3rem;
    }
    .news-cards {
        grid-template-columns: 1fr;
    }
    .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; /* 次の記事を上に */
    }

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


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

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

    /* モバイルメニューのフォントサイズ調整 */
    .sp-nav a {
        font-size: 1.4rem; /* フォントサイズを小さく */
        padding: 1rem 0; /* パディングを調整 */
    }

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

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

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

    /* モバイル用予約ボタンのスタイル調整 */
    .reserve-btn-mobile {
        font-size: 1.4rem;
        padding: var(--spacing-unit-small) var(--spacing-unit-medium);
    }
}