/*!
Theme Name: kuruminomori2025
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kuruminomori2025
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

kuruminomori2025 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* =========================================
   基本設定 (Base Styles)
   ========================================= */

:root {
  /* カラーパレット (Figmaに合わせて微調整してください) */
  --color-bg: #F9F9F9;       /* 背景：Mist White */
  --color-text: #1A1C1D;     /* 文字：Sumizumi */
  --color-accent: #8B4513;   /* アクセント：Walnut Brown */
  --color-white: #ffffff;    /* 白 */

  /* フォント設定 (欧文が先、和文が後の順に書きます) */
  --font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
}

/* 全体のリセットとベース設定 */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  line-height: 1.8;
  margin: 0;
  -webkit-font-smoothing: antialiased; /* 文字を滑らかに綺麗に見せる */
}

/* リンクのデフォルト設定 */
a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.3s;
}

a:hover {
  opacity: 0.7;
}

/* 画像のレスポンシブ対応（必須） */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}
/* =========================================
   ✨ スクロールアニメーション（下からフワッと）
========================================= */
/* 1. 最初は透明（opacity: 0）にして、40px下にずらしておく */
.js-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* 🌟イージング（cubic-bezier）を使って、スッと始まりピタッと止まる高級感のある動きにしています */
}

/* 2. 画面に入って「is-active」クラスが付いたら、透明度100%・元の位置（0）に戻る */
.js-fade.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* --- 写真の深呼吸アニメーション --- */
/* 画像を囲む枠（すでにoverflow: hidden;がかかっていればOK） */
.plan-img, 
.gallery-item {
  overflow: hidden; /* 拡大した時に枠からはみ出ないようにする魔法 */
}

/* 画像本体の動きの設定 */
.plan-img img,
.gallery-item img {
  transition: transform 0.8s ease-out; /* 🌟0.8秒かけてゆっくり動かすのが「上品さ」の秘訣 */
}

/* マウスが乗った時の動き */
.plan-img:hover img,
.gallery-item:hover img {
  transform: scale(1.04); /* 1.04倍という「ほんのわずかな拡大」が丁度いい！ */
}

/* =========================================
   訪問済みリンクのデフォルトカラー（紫色）をリセット
   ========================================= */

/* サイト全体のテキストリンク */
a:visited {
  color: inherit; /* 親要素の色（本来のテキストカラー）をそのまま引き継ぐ */
}

/* 各種ボタン類の訪問済みカラーを固定 */
.btn-reserve:visited,
.btn-reserve-large:visited,
.btn-contact-large:visited {
  color: var(--color-white); /* 背景がブラウンのボタンは白をキープ */
}

.btn-outline:visited {
  color: var(--color-text); /* アウトラインボタンはテキストカラーをキープ */
}

/* =========================================
   ヘッダーレイアウト (Header)
   ========================================= */

/* Flexboxで左・中央・右に振り分ける */
/* 変更後（3行追加！） */
.site-header {
  background-color: #F4F2F0;
  height: 90px;
  padding: 0 40px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* ↓ここから下の3行を追加します */
  position: sticky;  /* スクロールに追従して固定する魔法のプロパティ */
  top: 0;            /* 画面の一番上（0pxの位置）にくっつける */
  z-index: 1000;     /* 写真や文字よりも「一番手前」に表示させる（数値は大きく） */
}

/* Flexboxで左・中央・右に振り分ける */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;               /* 追加：親要素の幅いっぱいに広げる */
  max-width: 1200px;
  margin: 0 auto;
}

/* ロゴのサイズ調整 */
.site-logo img {
  height: 60px; /* Figmaのロゴサイズに合わせて数値を変更してください */
  width: auto;
  display: block;
}

/* ナビゲーションを横並びにする */
.global-nav ul {
  display: flex;
  gap: 60px; /* 変更：40pxから60pxに拡大（お好みで80px等に調整してください） */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ナビゲーションの文字装飾 */
/* --- ヘッダーナビゲーションのリンク --- */
/* --- ヘッダーナビゲーションの文字スタイル --- */
.global-nav a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color:#8B4513 !important;
  letter-spacing: 0.5em;
}

/* --- 🌟アニメーションの基準点（ヘッダー＆フッター共通） --- */
.global-nav a,
.footer-nav-list a {
  text-decoration: none;
  position: relative; 
  display: inline-block;
  padding-bottom: 4px; /* 文字と下線の間の隙間 */
}

/* --- 🌟ホバー時に現れる下線（ヘッダー＆フッター共通） --- */
.global-nav a::after,
.footer-nav-list a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 極細でソリッドな線 */
  background-color: #8B4513;
  
  /* 最初は線を「長さゼロ（見えない状態）」にしておく */
  transform: scaleX(0);
  
  /* アニメーションの動き方（左から右へ） */
  transform-origin: right top;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 🌟マウスが乗った時（ホバー時）の動き（ヘッダー＆フッター共通） --- */
.global-nav a:hover::after,
.footer-nav-list a:hover::after {
  transform: scaleX(1); /* 線を100%の長さに伸ばす */
  transform-origin: left top; /* 左を起点にして伸ばす */
}

/* 予約ボタンの装飾 */
.btn-reserve {
  display: inline-flex;     /* インラインブロックから変更：中身を中央揃えしやすくする */
  align-items: center;      /* 文字を縦の真ん中に */
  justify-content: center;  /* 文字を横の真ん中に */
  height: 50px;             /* 高さを明示的に「50px」に固定して伸びるのを防ぐ */
  padding: 0 40px;          /* 左右の余白だけを指定 */
  background-color: var(--color-accent);
  color: var(--color-white);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

.btn-reserve:hover {
  opacity: 0.8;
  color: var(--color-white);
}
/* =========================================
   トップページ (Front Page)
   ========================================= */

/* メインビジュアル */
.top-hero {
  width: 100%;
  /* max-width と margin の指定を削除しました */
}

.hero-area img {
  width: 100%; /* 横幅は画面いっぱい */
  height: 500px; /* 🌟ここが重要！お好みの高さに固定します（例: 500px, 60vh など） */
  object-fit: cover; /* 🌟魔法の呪文！比率を保ったまま、指定した高さに合わせてトリミングします */
  object-position: center; /* 画像の中心を基準にトリミングします */
}

/* -------------------------
   ヒーロー画像専用のトリミング設定
------------------------- */
.page-hero-img {
  width: 100%;
  height: 60vh; /* 🌟ここを調整！画面の高さの50%（または 400px など絶対値でもOK） */
  object-fit: cover; /* 魔法の呪文：比率を保ったまま枠に合わせて切り抜く */
  object-position: center 60%; /* 上下位置の微調整（50%が真ん中、数値を変えると見せたい場所を上下にズラせます） */
  display: block; /* 画像の下にできる謎の隙間を消すおまじない */
}
/* =========================================
   お知らせ (NEWS)
   ========================================= */

.top-news {
  padding: 60px 20px; /* 上下に非常に大きな余白を取り、静謐さを出す */
  background-color: var(--color-bg);
}

.news-inner {
  max-width: 800px; /* 文章が横に広がりすぎないよう、幅を絞る */
  margin: 0 auto;
}

/* セクションタイトル（NEWS） */
.section-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 60px;
}

/* ニュースリストの装飾 */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0 0 60px 0;
  border-top: 1px solid #ddd; /* 一番上の線 */
}

.news-list li {
  border-bottom: 1px solid #ddd; /* 各行の下線 */
}

.news-list a {
  display: flex;
  align-items: center;
  padding: 24px 0; /* 行の上下の余白（ここを広くすると高級感が出ます） */
  transition: opacity 0.3s ease;
}

.news-list a:hover {
  opacity: 0.5;
}

.news-date {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: #888;
  width: 120px; /* 日付の幅を固定して、タイトルの開始位置を揃える */
  flex-shrink: 0;
}

.news-title {
  font-size: 15px;
  line-height: 1.6;
}

/* MOREボタン */
.btn-wrapper {
  text-align: center;
}

.btn-more {
  display: inline-block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 12px 40px;
  border: 1px solid var(--color-text);
  border-radius: 40px; /* 丸みを持たせる */
  transition: all 0.3s ease;
}

.btn-more:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
}
/* =========================================
   宿泊施設 (STAY) - アシンメトリーレイアウト
   ========================================= */

.top-stay {
  padding: 120px 40px;
  background-color: var(--color-white);
}

.stay-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;             /* 左右に並べる */
  align-items: center;       /* 縦方向の中央で揃える */
  justify-content: space-between;
  gap: 80px;                 /* テキストと画像の間の広い余白 */
}

/* -------------------------
   左側：テキストエリア
------------------------- */
.stay-content {
  width: 45%;
}

.section-title-left {
  font-family: "Noto Sans JP", sans-serif; /* Noto Sans JPを指定 */
  font-size: 24px;       /* 変更：24px */
  font-weight: 700;      /* 変更：Bold (700) */
  letter-spacing: 0.5em; /* 変更：0.5em */
  margin-bottom: 40px;
}

.stay-catch {
  font-family: "Noto Sans JP", sans-serif; /* 変更：明朝体から変更 */
  font-size: 20px;       /* 変更：20px */
  font-weight: 700;      /* 変更：Bold (700) */
  letter-spacing: 0.02em;/* 変更：0.02em */
  line-height: 1.6;
  margin-bottom: 30px;
}

.stay-desc {
  font-family: "Noto Sans JP", sans-serif; /* Noto Sans JPを指定 */
  font-size: 12px;       /* 変更：12px */
  font-weight: 500;      /* 変更：Medium (500) */
  letter-spacing: 0.02em;/* 変更：0.02em */
  line-height: 2.2;      /* 行間は広めをキープして読みやすく */
  margin-bottom: 50px;
}

/* アウトラインボタン（詳しく見る） */
.btn-outline {
  display: inline-block;
  padding: 16px 48px;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background-color: var(--color-text);
  color: var(--color-white);
}

/* -------------------------
   右側：ギャラリーエリア (CSS Grid)
------------------------- */
.stay-gallery {
  width: 55%; /* 右側の幅 */
  display: grid;
  grid-template-columns: 1fr 1fr; /* 縦に2列のグリッドを作る */
  grid-template-rows: 1fr 1fr;    /* 横に2行のグリッドを作る */
  gap: 20px;                      /* 写真同士の隙間（Figmaに合わせて調整） */
}

.gallery-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 画像ごとの配置指定（ここが魔法の部分です） */
.item-top-left {
  grid-column: 1 / 2; /* 1列目に配置 */
  grid-row: 1 / 2;    /* 1行目に配置 */
  aspect-ratio: 4 / 3;
}

.item-bottom-left {
  grid-column: 1 / 2; /* 1列目に配置 */
  grid-row: 2 / 3;    /* 2行目に配置 */
  aspect-ratio: 4 / 3;
}

.item-right {
  grid-column: 2 / 3; /* 2列目に配置 */
  grid-row: 1 / 3;    /* ★1行目から2行目までぶち抜きで配置！ */
}

/* -------------------------
   スマホ対応（縦並びにする）
------------------------- */
@media screen and (max-width: 768px) {
  .stay-inner {
    flex-direction: column;
    gap: 40px;
  }
  .stay-content, .stay-gallery {
    width: 100%;
  }
  /* スマホの時は縦長写真を一番下に配置 */
  .item-right {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    aspect-ratio: 16 / 9;
  }
}
/* =========================================
   宿泊プラン・全体案内・予約ボタン追加CSS
   ========================================= */

/* 連続するセクションの余白調整（背景は白のまま繋げる） */
.top-plan, .top-facility {
  padding: 0 40px 120px; /* 上の余白をなくし、下だけに余白を取る */
  background-color: var(--color-white);
}
/* スマホの時だけ、順序を制御する */
@media screen and (max-width: 768px) {
  .stay-inner.is-row-reverse {
    flex-direction: column-reverse; /* スマホでは文字を上、画像を下に */
  }
}

/* -------------------------
   大きな予約ボタン (CTA)
------------------------- */
.top-reserve-cta {
  padding: 0 40px 160px;
  background-color: var(--color-white);
  text-align: center;
}

.btn-reserve-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  height: 80px;
  background-color: var(--color-accent); /* ヘッダーと同じブラウン */
  color: var(--color-white);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.5em; /* 文字間隔を広げて堂々と見せる */
  text-indent: 0.5em;
  border-radius: 16px;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

.btn-reserve-large:hover {
  opacity: 0.8;
  color: var(--color-white);
}

/* -------------------------
   スマホ対応（反転時の順番調整）
------------------------- */
@media screen and (max-width: 768px) {
  /* スマホでは「左右反転」を解除し、常にテキストが上に来るようにする */
  .stay-inner.is-row-reverse {
    flex-direction: column-reverse;
  }
}
/* =========================================
   アクセス (ACCESS)
   ========================================= */

.top-access {
  padding: 0 40px 120px; /* 上はゼロ、下にたっぷり余白を取る */
  background-color: var(--color-white);
}

.access-inner {
  max-width: 1000px; /* 横幅を少し絞ることで、テキストの一体感を出す */
  margin: 0 auto;
}

/* 中央揃えのセクションタイトル */
.section-title-center {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* 中央揃え時のズレ補正 */
  text-align: center;
  margin-bottom: 60px;
}

/* Googleマップの枠 */
.access-map {
  width: 100%;
  margin-bottom: 60px;
}

.access-map iframe {
  width: 100%;
  height: 400px; /* Figmaの比率に合わせて高さを固定 */
  vertical-align: bottom;
}

/* テキストエリア（中央揃え） */
.access-info {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--color-text);
}

.access-address {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 60px; /* 住所と交通案内の間の余白 */
}

.access-directions {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 車と電車の案内の間の余白 */
}

.direction-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.direction-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0;
}
/* =========================================
   結びのメッセージ (CLOSING)
   ========================================= */

.top-closing {
  padding: 0 40px 120px;
  background-color: var(--color-white);
}

.closing-inner {
  max-width: 1200px; /* 他のセクションと幅を揃える */
  margin: 0 auto;
  position: relative; /* 子要素（テキスト）の絶対位置の基準にする */
}

/* 画像の設定 */
.closing-img {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9; /* Figmaの画像比率に近い形に固定（適宜変更してください） */
  overflow: hidden;
}

.closing-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.9); /* 白い文字を読みやすくするため、ほんの少しだけ画像を暗くする小技 */
}

/* テキストのオーバーレイ設定 */
.closing-text {
  position: absolute; /* 画像の上に重ねる */
  bottom: 10%;        /* 下から10%の位置 */
  left: 5%;           /* 左から5%の位置 */
  color: var(--color-white);
}

.closing-catch {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.closing-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.2;
  margin: 0;
}

/* =========================================
   お問い合わせ (CONTACT)
   ========================================= */

.top-contact {
  padding: 0 40px 160px;
  background-color: var(--color-white);
  text-align: center; /* 中身をすべて中央揃え */
}

.contact-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: 60px; /* ボタンとの距離 */
}
/* -------------------------
   お問い合わせ用ボタン（文字数多め用）
------------------------- */
.btn-contact-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 400px;      /* 320pxから広げ、文字に合わせて伸びるようにmin-widthに変更 */
  height: 80px;          /* 高さは予約ボタンと揃えて統一感を出す */
  padding: 0 40px;       /* 左右に余白を持たせる */
  background-color: var(--color-accent); /* 同じブラウン */
  color: var(--color-white);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;       /* 32pxだと巨大すぎるので、18pxで上品に */
  font-weight: 700;
  letter-spacing: 0.1em; /* 文章として読みやすいように間隔を少し締める */
  text-indent: 0.1em;    /* ズレ防止 */
  border-radius: 16px;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

.btn-contact-large:hover {
  opacity: 0.8;
  color: var(--color-white);
}

/* スマホ対応（画面からはみ出さないように調整） */
@media screen and (max-width: 768px) {
  .btn-contact-large {
    min-width: 100%;     /* スマホでは横幅いっぱいに */
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
  }
}
/* =========================================
   フッター (FOOTER) - リファレンス準拠
   ========================================= */

.site-footer {
  background-color: var(--color-bg); /* 背景をベージュに戻して落ち着かせる */
  padding: 120px 40px 40px;
  color: var(--color-text);
}

/* 3カラムのグリッドレイアウト */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto 100px;
  display: grid;
  grid-template-columns: 2fr 3fr 3fr; /* 左:中央:右 の幅の割合 */
  gap: 60px;
}

/* 共通の小見出し（英語の細い文字） */
.footer-small-title {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #888;
  margin-bottom: 20px;
}

/* -------------------------
   左カラム：情報エリア
------------------------- */
.footer-logo img {
  height: 40px; /* お手持ちのロゴに合わせて調整してください */
  width: auto;
  margin-bottom: 30px;
}

.footer-address {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 2;
  margin-bottom: 16px;
}

/* 左カラム：マップリンクと電話番号の青色を解除 */
.footer-map-link {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-block;
  margin-bottom: 50px;
  color: var(--color-text); /* 追加：青色を解除 */
}

.tel-number {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--color-text); /* 追加：青色を解除 */
  text-decoration: none;    /* 追加：スマホで自動リンク化された際の下線も防ぐ */
}

/* -------------------------
   中央カラム：ナビエリア
------------------------- */
.footer-nav-area {
  display: flex;
  gap: 80px; /* 中央の2列の間隔 */
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-list li {
  margin-bottom: 16px;
}

/* 中央カラム：ナビゲーションリンクの青色を解除 */
.footer-nav-list a {
  font-family: "Noto Sans JP", "Helvetica Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
  color: var(--color-text); /* 追加：青色を解除 */
  text-decoration: none;
}

.footer-nav-list a:hover {
  opacity: 0.5;
}

.mt-40 {
  margin-top: 40px; /* Socialの上の余白用 */
}

/* -------------------------
   右カラム：アクションリンク
------------------------- */
.footer-action {
  display: flex;
  flex-direction: column;
}

.action-link {
  display: flex;
  justify-content: space-between; /* 文字と矢印を左右に散らす */
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid #ccc; /* リファレンスのような細い罫線 */
  color: var(--color-text);
  transition: opacity 0.3s ease;
  text-decoration: none;
}

/* 一番下のリンクだけ下にも線を引く */
.action-link:last-child {
  border-bottom: 1px solid #ccc;
}

.action-link:hover {
  opacity: 0.5;
}

/* 右カラム：アクションテキストの日本語フォント対応 */
.action-text {
  font-family: "Noto Sans JP", sans-serif; /* 変更：英語フォントから日本語フォントへ */
  font-size: 20px;       /* 変更：日本語が美しく見えるよう少しサイズダウン */
  font-weight: 500;      /* 変更：明瞭に読めるよう太さを調整 */
  letter-spacing: 0.1em; /* 変更：文字間隔を日本語向けに調整 */
}

.action-icon {
  font-size: 14px;
}

/* -------------------------
   コピーライト
------------------------- */
.footer-copyright {
  text-align: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #888;
}

/* -------------------------
   スマホ対応（縦並びに解除）
------------------------- */
@media screen and (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr; /* スマホでは1列にする */
    gap: 60px;
  }
  .footer-nav-area {
    flex-direction: column;
    gap: 40px;
  }
  .action-text {
    font-size: 18px;
  }
}
/* -------------------------
   CSSの疑似要素（::after）で描く確実な矢印
------------------------- */
.action-link::after {
  content: "";                 /* 🌟魔法の呪文：CSSから空の箱を作り出す */
  display: block;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--color-text); /* 確実に表示されるよう、一旦テキストと同じ色に設定 */
  border-right: 1px solid var(--color-text);
  transform: rotate(45deg);
  margin-right: 8px;           /* 右端に少しゆとりを持たせる */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* リンクにホバーした時、矢印が少し右上に動く（フワッと浮く）アニメーション */
.action-link:hover::after {
  transform: rotate(45deg) translate(2px, -2px); /* 右上にスッと動く */
  opacity: 0.5; /* 少しだけ色を薄くする */
}
/* =========================================
   下層ページ 共通設定 (PAGE BASE)
   ========================================= */

.page-main {
  background-color: var(--color-white);
}

/* ページヘッダー（タイトルエリア） */
.page-hero {
  /* 🌟変更：260pxあった上の余白をガッツリ削り、上下バランスよく配置します */
  padding: 60px 40px; 
  background-color: var(--color-bg);
  text-align: center;
}

.page-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.2em;
  margin: 0 0 16px 0;
  color: var(--color-text);
}

.page-subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #888;
  margin: 0;
}

/* ページコンテンツエリア */
.page-content {
  /* 🌟変更：タイトルエリアとの間隔も少し縮めて、イラストが上に上がってくるようにします */
  padding: 20px 40px 120px; 
}
/* =========================================
   STAYページ：カテゴリナビゲーション
   ========================================= */

/* 🌟変更：トップページと切り離した新しい枠組み */
.plan-page-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* 🌟ここを変更：両端揃えにして幅を広げる */
.stay-category-nav {
  display: flex;
  justify-content: space-between; /* 変更：「center」から「space-between」へ。これで両端が揃い、下の幅と合います */
  /* gap: 60px; は削除します（space-betweenで自動的に間隔が開くため不要になります） */
  margin-bottom: 140px; /* ボックスが大きくなった分、下の余白も少し広げてバランスを取ります */
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
  transition: opacity 0.3s ease;
}

.category-item:hover {
  opacity: 0.6;
}

/* イラスト用グレー枠 */
/* 🌟ここを変更：ボックスのサイズを大きくする */
.icon-placeholder {
  width: 220px;    /* 変更：120px → 220px に大きく */
  height: 160px;   /* 変更：100px → 160px にバランスよく大きく */
  background-color: #E5E5E5;
  margin-bottom: 24px;
  border-radius: 16px; /* ついでに少し角丸をつけて、柔らかくモダンな印象にします */
}

.category-name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 下向き矢印（CSSで描画） */
.category-arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid var(--color-text);
  border-right: 1px solid var(--color-text);
  transform: rotate(45deg);
}

/* =========================================
   STAYページ：プラン詳細リスト
   ========================================= */

.stay-plan-list {
  display: flex;
  flex-direction: column;
  gap: 120px; /* 各プランの間の大きな余白 */
}

/* スクロール時の位置調整（🌟超重要：固定ヘッダーにタイトルが隠れないようにする魔法） */
.stay-plan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  scroll-margin-top: 220px; 
}

/* 🌟魔法：偶数番目（2番目）のアイテムだけ、左右を入れ替える！ */
.stay-plan-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* --- 画像エリア --- */
.plan-img {
  width: 50%;
}

.img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3; /* 参考画像に近い比率 */
  background-color: #E5E5E5;
  border-radius: 24px; /* 参考画像のような角丸 */
}

/* --- テキストエリア --- */
.plan-text {
  width: 42%; /* 画像との間に少し余白を持たせるため42%に */
}

.plan-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.plan-price {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #4CAF50; /* 参考画像のような落ち着いたグリーン（お好みで変更可） */
  letter-spacing: 0.05em;
  margin-bottom: 32px;
}

.plan-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

/* --- 予約ボタン --- */
.btn-plan-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-text);
  color: var(--color-white);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 20px 40px;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.3s ease;
  white-space: nowrap; /* 🌟追加：文字が途中で不格好に改行されるのを防ぎます */
}

.btn-plan-detail:hover {
  opacity: 0.8;
  color: var(--color-white);
}

/* ボタン内のカレンダーアイコン（簡易的な四角形での代用） */
.icon-calendar {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-white);
  border-radius: 2px;
  margin-right: 12px;
  position: relative;
}
.icon-calendar::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  border-top: 1px solid var(--color-white);
}
/* =========================================
   STAYページ：カテゴリナビゲーション
   ========================================= */

.stay-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.stay-category-nav {
  display: flex;
  justify-content: space-between; /* 変更：「center」から「space-between」へ。これで両端が揃い、下の幅と合います */
  /* gap: 60px; は削除します（space-betweenで自動的に間隔が開くため不要になります） */
  margin-bottom: 140px; /* ボックスが大きくなった分、下の余白も少し広げてバランスを取ります */
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--color-text);
  transition: opacity 0.3s ease;
}

.category-item:hover {
  opacity: 0.6;
}

/* イラスト用グレー枠 */
.icon-placeholder {
  width: 220px;    /* 変更：120px → 220px に大きく */
  height: 160px;   /* 変更：100px → 160px にバランスよく大きく */
  background-color: #E5E5E5;
  margin-bottom: 24px;
  border-radius: 16px; /* ついでに少し角丸をつけて、柔らかくモダンな印象にします */
}
/* =========================================
   STAYページ：カテゴリアイコン
========================================= */

.category-icon {
  width: 240px;  /* 🌟主張しすぎず、視認性も保てる絶妙なサイズ感（お好みで調整してください） */
  height: 240px;
  margin-bottom: 12px; /* 下のテキストとの余白 */
  object-fit: contain; /* SVGの縦横比を崩さずに綺麗に収める */
  transition: transform 0.3s ease; /* ホバー時のアニメーション用 */
}

/* 🌟ホバーした時にアイコンが少しだけ上にフワッと動く（触り心地の向上） */
.category-item:hover .category-icon {
  transform: translateY(-4px);
}

/* スマホ用の微調整（すでに横スクロールのスワイプ設定が効いているので、少しだけ小さく） */
@media screen and (max-width: 768px) {
  .category-icon {
    width: 160px;
    height: 160px;
    margin-bottom: 8px;
  }
}

.category-name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 下向き矢印（CSSで描画） */
.category-arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid var(--color-text);
  border-right: 1px solid var(--color-text);
  transform: rotate(45deg);
}

/* =========================================
   STAYページ：プラン詳細リスト
   ========================================= */

.stay-plan-list {
  display: flex;
  flex-direction: column;
  gap: 120px; /* 各プランの間の大きな余白 */
}

/* スクロール時の位置調整（🌟超重要：固定ヘッダーにタイトルが隠れないようにする魔法） */
.stay-plan-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  scroll-margin-top: 220px; 
}

/* 🌟魔法：偶数番目（2番目）のアイテムだけ、左右を入れ替える！ */
.stay-plan-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* --- 画像エリア --- */
.plan-img {
  width: 50%;
}

.img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3; /* 参考画像に近い比率 */
  background-color: #E5E5E5;
  border-radius: 24px; /* 参考画像のような角丸 */
}

/* --- テキストエリア --- */
.plan-text {
  width: 42%; /* 画像との間に少し余白を持たせるため42%に */
}

.plan-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}

.plan-price {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #4CAF50; /* 参考画像のような落ち着いたグリーン（お好みで変更可） */
  letter-spacing: 0.05em;
  margin-bottom: 32px;
}

.plan-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

/* --- 予約ボタン --- */
.btn-plan-detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-text); /* 黒（焦げ茶）のソリッドなボタン */
  color: var(--color-white);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 20px 40px;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.btn-plan-detail:hover {
  opacity: 0.8;
  color: var(--color-white);
}

/* ボタン内のカレンダーアイコン（簡易的な四角形での代用） */
.icon-calendar {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-white);
  border-radius: 2px;
  margin-right: 12px;
  position: relative;
}
.icon-calendar::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  border-top: 1px solid var(--color-white);
}
/* =========================================
   STAYページ：基本情報＆ルール
   ========================================= */

.stay-info-area {
  margin-top: 160px; /* 上のプラン一覧から大きく余白を取る */
  border-top: 1px solid #E5E5E5; /* 区切りの細い線を1本だけ引く */
  padding-top: 120px;
}

.info-section {
  margin-bottom: 80px;
}

.info-heading {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
  line-height: 1.4;
}

.info-subheading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.1em;
}

/* --- テーブル（基本情報） --- */
.info-table {
  width: 100%;
  border-collapse: collapse;
}

.info-table th,
.info-table td {
  padding: 24px 0;
  border-bottom: 1px solid #E5E5E5; /* 下線のみのミニマルな表 */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: left;
}

.info-table th {
  width: 25%;
  font-weight: 700;
  color: var(--color-text);
  vertical-align: top; /* 上揃え */
}

.info-table td {
  font-weight: 500;
  color: #333;
}

.note-text {
  font-size: 12px;
  color: #888;
  display: block;
  margin-top: 8px;
}

/* --- リスト（注意事項） --- */
.rules-list {
  list-style: none; /* デフォルトの黒丸を消す */
  padding: 0;
  margin: 0;
}

.rules-list li {
  position: relative;
  padding-left: 1.5em; /* 中黒（・）の分の余白を確保 */
  margin-bottom: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333;
}

/* CSSで美しい中黒（・）を描画 */
.rules-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: #888;
}
/* --- ゴミ出しリストの美しい整列 --- */
.trash-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
}

.trash-list li {
  margin-bottom: 8px;
  padding-left: 1.5em;
  text-indent: -1.5em; /* 2行目にまたがった時に文字の頭を揃えるプロの技 */
}

.trash-list li::before {
  content: "◎";
  margin-right: 6px;
  color: var(--color-text);
}

.trash-label {
  display: inline-block;
  width: 170px; /* 見出し部分の幅を固定して、右側の説明文の縦のラインをピシッと揃える */
  font-weight: 700;
}

/* --- ルール最後の強調メッセージ --- */
.rules-closing {
  margin-top: 60px;
  padding: 40px;
  background-color: var(--color-bg); /* グレージュの背景色で囲む */
  text-align: center;
  border-radius: 8px; /* 角を少しだけ丸めて柔らかい印象に */
}

.rules-closing strong {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--color-text);
}
/* =========================================
   既存レイアウトを包むシンプルアコーディオン
========================================= */


/* スマホ用の微調整（※すでに @media (max-width: 768px) があればその中に追記） */
@media (max-width: 768px) {
  .trash-label {
    display: block; /* スマホでは幅が狭いため、見出しと説明文を縦に並べる */
    width: 100%;
    margin-bottom: 4px;
  }
  .rules-closing {
    padding: 32px 20px;
    text-align: left; /* スマホでは読みやすいように左揃え */
  }
  .pc-only {
    display: none; /* スマホでは強制的な改行を解除する */
  }
  /* =========================================
   既存レイアウトを包むシンプルアコーディオン
========================================= */

  /* アコーディオン全体（外箱） */
.simple-accordion {
  width: 100% !important; /* 🌟ここが最重要！強制的に親要素の幅いっぱいに広げる */
  display: block !important; /* フレックス等による縮みを防ぐ */
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 0;
}

/* もし、アコーディオン全体をさらに <div> などで囲んでいる場合は、
   その親要素にも width: 100%; を効かせます（以下も追記しておくと安心です） */
.stay-info-accordion-area {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
}
/* =========================================
   NEWS 共通リストスタイル
   ========================================= */

.news-page-inner,
.news-single-inner {
  max-width: 800px; /* 読みやすさを重視して少し幅を狭める */
  margin: 0 auto;
}

.news-list-top,
.news-list-page {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #E5E5E5;
}

.news-item {
  border-bottom: 1px solid #E5E5E5;
}

.news-link {
  display: flex;
  align-items: center;
  padding: 24px 16px;
  text-decoration: none;
  color: var(--color-text);
  transition: background-color 0.3s ease;
}

.news-link:hover {
  background-color: #FAFAFA; /* ホバー時にうっすら色を変える */
}

.news-date {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: #888;
  width: 120px;
  flex-shrink: 0;
}

.news-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  flex-grow: 1;
}

/* =========================================
   NEWS 記事詳細（single.php）＆ ナビゲーション
   ========================================= */

.news-single-header {
  text-align: center;
  margin-bottom: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid #E5E5E5;
}

.news-single-date {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: #888;
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}

.news-single-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
}

/* クライアントが入力する本文エリアの守護神 */
.news-single-body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 2.2;
  color: #333;
  margin-bottom: 100px;
}

/* 本文内の見出しや画像を美しく保つ */
.news-single-body h2 { font-size: 20px; border-bottom: 1px solid #ddd; padding-bottom: 8px; margin: 40px 0 24px; }
.news-single-body p { margin-bottom: 24px; }
.news-single-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 32px 0; }

/* --- ナビゲーション（前へ / 一覧へ / 次へ） --- */
.news-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-text);
  padding-top: 40px;
}

.nav-prev, .nav-next, .nav-back { width: 30%; }
.nav-prev { text-align: left; }
.nav-back { text-align: center; }
.nav-next { text-align: right; }

.news-nav a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.news-nav a:hover { opacity: 0.6; }

/* ページネーション（一覧ページ用） */
.pagination { text-align: center; margin-top: 60px; }
.pagination .page-numbers { display: inline-block; padding: 12px 16px; color: var(--color-text); text-decoration: none; }
.pagination .current { background-color: var(--color-bg); font-weight: bold; border-radius: 4px; }

/* =========================================
   お問い合わせフォーム (Contact Form 7)
   ========================================= */

.contact-page-inner {
  max-width: 700px;
  margin: 0 auto 60px;
}

.form-group {
  margin-bottom: 40px;
}

.form-group label {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

/* 必須・任意のラベル */
.required, .optional {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 2px;
  margin-left: 8px;
  vertical-align: middle;
}
.required { background-color: var(--color-text); color: var(--color-white); }
.optional { background-color: #E5E5E5; color: #888; }

/* 入力欄のデザイン（直線的でミニマルに） */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-select,
.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px; /* 少しだけ角丸 */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  background-color: #fafafa;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.wpcf7-form-control.wpcf7-textarea {
  height: 200px;
  resize: vertical;
}

/* 入力中に枠線を強調 */
.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--color-text);
  background-color: var(--color-white);
}

/* 送信ボタン */
.form-submit {
  text-align: center;
  margin-top: 60px;
}

.wpcf7-submit {
  background-color: var(--color-text);
  color: var(--color-white);
  border: none;
  padding: 20px 60px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.wpcf7-submit:hover {
  opacity: 0.8;
}

/* CF7特有のエラーメッセージを整える */
.wpcf7-not-valid-tip { font-size: 13px; margin-top: 8px; color: #d32f2f; }
.wpcf7-response-output { margin-top: 32px !important; border-radius: 4px; }

/* =========================================
   RESERVEページ：予約フォーム専用スタイル
   ========================================= */

.reserve-page-inner {
  max-width: 800px; /* 項目が多いので、お問い合わせより少しだけ幅を広く取る */
  margin: 0 auto 120px;
}

/* 日付入力（カレンダー）と数値入力（人数）の共通スタイル */
.wpcf7-form-control.wpcf7-date,
.wpcf7-form-control.wpcf7-number {
  width: 100%;
  max-width: 300px; /* 横幅いっぱいに広がらないように制限 */
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  background-color: #fafafa;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.wpcf7-form-control.wpcf7-date:focus,
.wpcf7-form-control.wpcf7-number:focus {
  outline: none;
  border-color: var(--color-text);
  background-color: var(--color-white);
}

/* ラジオボタンとチェックボックスの整列（縦並びにして見やすく） */
.wpcf7-radio .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item {
  display: block;
  margin: 0 0 16px 0;
}

.wpcf7-radio input[type="radio"],
.wpcf7-checkbox input[type="checkbox"] {
  margin-right: 12px;
  transform: scale(1.2); /* 少しだけボタンを大きくして押しやすくする */
  cursor: pointer;
}

.wpcf7-list-item-label {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
/* =========================================
   予約フォーム：先行予約のお知らせボックス
========================================= */
.reserve-notice-box {
  background-color: #FAFAFA; /* 淡いグレーで上品に目立たせる */
  border-left: 3px solid var(--color-text, #333); /* 左側に細い黒線で引き締める */
  padding: 20px 24px;
  margin-bottom: 40px; /* フォームとの間にゆとりを */
  border-radius: 0 4px 4px 0; /* 右側だけ少し丸める */
}

.notice-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text, #333);
  margin-bottom: 8px;
}

.notice-text {
  font-size: 14px;
  line-height: 1.8;
  color: #444;
  margin: 0;
}

.notice-text strong {
  color: var(--color-text, #333);
  font-weight: 700;
  border-bottom: 1px solid #333; /* 期間の下に線を引いて強調 */
}

@media screen and (max-width: 768px) {
  .reserve-notice-box {
    padding: 16px;
    margin-bottom: 32px;
  }
  .notice-title {
    font-size: 14px;
  }
  .notice-text {
    font-size: 13px;
  }
}
/* =========================================
   FACILITYページ：場内設備
   ========================================= */

.facility-page-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.facility-section {
  margin-bottom: 140px;
}

.facility-heading {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-bottom: 60px;
  line-height: 1.4;
  text-align: center;
}

.facility-subheading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.1em;
}

/* --- 1. マップエリア --- */
.facility-map-img {
  width: 100%;
}
.img-placeholder-map {
  width: 100%;
  height: 500px;
  background-color: #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  border-radius: 8px;
}

/* --- 2. 管理棟（左右Flexbox） --- */
.facility-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.facility-img {
  width: 50%;
}
.img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  border-radius: 8px;
}

.facility-text {
  width: 45%;
}

.facility-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 2.0;
  margin-bottom: 32px;
}

.facility-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.facility-list li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E5E5E5;
}
.facility-list li strong {
  display: block;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

/* --- 3. サニタリー（3列グリッド） --- */
.sanitary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.sanitary-card {
  text-align: left;
}

.img-placeholder-small {
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  border-radius: 8px;
  margin-bottom: 24px;
}

.sanitary-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-text); /* 引き締める黒い下線 */
}

.sanitary-desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

/* =========================================
   FACILITYページ：レンタル品アコーディオン
========================================= */

.facility-rental-section {
  margin-top: 80px;
  margin-bottom: 80px;
  max-width: 800px; /* 広がりすぎないように幅を制限 */
  margin-left: auto;
  margin-right: auto;
}

/* アコーディオン全体 */
.rental-accordion {
  border-top: 1px solid var(--color-text); /* 引き締まる黒い上線 */
  border-bottom: 1px solid var(--color-text);
  margin-top: 32px;
}

/* クリックする部分（Summary） */
.rental-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 16px;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  list-style: none;
  transition: background-color 0.3s ease;
}

.rental-summary::-webkit-details-marker {
  display: none; /* Safariのデフォルト三角形を消す */
}

.rental-summary:hover {
  background-color: #FAFAFA;
}

/* 開いた中身 */
.rental-content {
  padding: 0 16px 32px;
  animation: fadeIn 0.4s ease-in-out;
}

/* --- レンタル品テーブル（表）のデザイン --- */
.rental-table {
  width: 100%;
  border-collapse: collapse; /* 隙間をなくして美しい直線にする */
  font-family: "Noto Sans JP", sans-serif;
}

.rental-table th,
.rental-table td {
  padding: 16px 0;
  border-bottom: 1px dashed #CCC; /* 軽やかな点線 */
  font-size: 14px;
  color: #333;
}

.rental-table th {
  font-weight: normal;
  color: #888; /* 見出しは少し薄くして上品に */
  font-size: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E5E5E5;
}

/* 価格を右寄せにするためのクラス */
.align-right {
  text-align: right;
  font-family: "Helvetica Neue", Arial, sans-serif; /* 数字が美しく見えるフォント */
}

/* =========================================
   📱 スマートフォン用（レスポンシブ）
========================================= */
@media screen and (max-width: 768px) {
  .facility-rental-section {
    padding: 0 16px; /* 左右に余白を持たせる */
    margin-top: 56px;
  }
  
  .rental-summary {
    font-size: 15px;
    padding: 20px 8px;
  }
  
  .rental-table th,
  .rental-table td {
    padding: 12px 0;
    font-size: 13px; /* スマホ用に少し小さく */
  }
}
/* =========================================
   FAQページ：よくあるご質問
   ========================================= */

.faq-page-inner {
  max-width: 800px;
  margin: 0 auto;
}

.faq-section {
  margin-bottom: 80px;
}

.faq-category-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-text); /* カテゴリを区切る太めの線 */
}

/* --- アコーディオン全体 --- */
.faq-item {
  border-bottom: 1px solid #E5E5E5;
}

/* --- 質問部分（クリック領域） --- */
.faq-question {
  display: flex;
  align-items: center;
  padding: 24px 0;
  cursor: pointer;
  list-style: none; /* デフォルトの黒い三角形を消す */
  position: relative;
  transition: opacity 0.3s ease;
}

/* Safari用のデフォルト三角形消去 */
.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  opacity: 0.6;
}

/* QとAのアイコン（Helvetica Neueでソリッドに） */
.faq-q-icon,
.faq-a-icon {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-right: 16px;
  color: var(--color-text);
}

.faq-q-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  flex-grow: 1; /* 余白を埋める */
  padding-right: 40px; /* 右側のアイコンとの余白 */
  line-height: 1.6;
}

/* --- 開閉用のプラス・マイナスアイコン（CSSで描画） --- */
.faq-toggle-icon {
  position: absolute;
  right: 0;
  width: 14px;
  height: 14px;
}
.faq-toggle-icon::before,
.faq-toggle-icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* 横線（マイナス） */
.faq-toggle-icon::before {
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
}
/* 縦線（プラス） */
.faq-toggle-icon::after {
  top: 0;
  left: 6px;
  width: 2px;
  height: 14px;
}

/* 🌟魔法：開いた時（open）に縦線を回転させて消し、マイナスにする */
details[open] .faq-toggle-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* --- 回答部分 --- */
.faq-answer {
  padding: 0 0 32px 36px; /* Qの文字の分だけインデントを美しく下げる */
  animation: fadeIn 0.4s ease-in-out; /* ふわっと表示させる */
}

.faq-answer p {
  display: flex;
  align-items: flex-start;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* アニメーションのキーフレーム */
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* =========================================
   ACCESSページ：アクセス
   ========================================= */

.access-page-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* --- 住所ブロック --- */
.access-address-block {
  text-align: center;
  margin-bottom: 60px;
}

.access-camp-name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.access-address,
.access-tel {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 2.0;
  color: #333;
}

.access-tel {
  margin-top: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* --- Googleマップ（🌟魔法のモノクロフィルター） --- */
.access-map-wrapper {
  margin-bottom: 120px;
  border-radius: 8px; /* 角を少し丸める */
  overflow: hidden; /* 角丸からはみ出るマップを隠す */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* うっすら影をつけて浮き立たせる */
}

.access-map-wrapper iframe {
  display: block; /* iframe特有の下の隙間を消す */
  width: 100% !important; /* 🌟Googleマップの固定幅を無視して、横幅を常に100%にする */
  height: 450px; /* 🌟高さもここで指定しておくと確実です */
}

/* --- 交通手段ブロック --- */
.access-methods {
  display: flex;
  flex-direction: column;
  gap: 80px; /* 車と電車の間の余白 */
}

.access-method-item {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--color-text); /* 引き締める上の黒線 */
  padding-top: 40px;
}

.method-title {
  width: 30%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.method-title span {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #888;
  margin-bottom: 8px;
}

.method-content {
  width: 65%;
}

.method-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.method-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.method-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text);
}

.method-note {
  background-color: #FAFAFA;
  padding: 32px;
  border-radius: 4px;
}

.method-note strong {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-text);
}

.method-note p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 2.0;
  color: #555;
  margin: 0;
}
/* =========================================
   PC用：ハンバーガーボタンを隠す（※メディアクエリの外に書く）
========================================= */
.hamburger-btn {
  display: none;
}
/* =========================================
   STAYページ：ボタンと詳細アコーディオン
   ========================================= */

/* --- 予約ボタン（白文字＆ホバー） --- */
.btn-plan-detail {
  display: inline-block;
  background-color: var(--color-text, #333); /* 黒背景 */
  color: #fff !important; /* 🌟文字を強制的に白に */
  padding: 16px 32px;
  border-radius: 4px;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: opacity 0.3s ease; /* ホバー時のフワッとした変化 */
  margin-top: 24px;
}

.btn-plan-detail:hover {
  opacity: 0.7; /* 🌟ホバー時に少し透けて薄くなる */
  color: #fff;
}

/* スマホではボタンを横幅いっぱいにする（以前の設定を補強） */
@media screen and (max-width: 768px) {
  .btn-plan-detail {
    display: block;
    width: 100%;
    margin-top: 16px;
  }
}

/* --- 詳細を見る（アコーディオン） --- */
.plan-details-accordion {
  margin-top: 16px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  overflow: hidden;
}

/* クリックする部分 */
.plan-details-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #FAFAFA;
  cursor: pointer;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  list-style: none; /* デフォルトの黒い三角形を消す */
  transition: background-color 0.3s ease;
}

/* Safari用の三角形消去 */
.plan-details-summary::-webkit-details-marker {
  display: none;
}

.plan-details-summary:hover {
  background-color: #F0F0F0;
}

/* 開いた中身（スペックリスト） */
.plan-details-content {
  padding: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: #333;
  border-top: 1px solid #E5E5E5;
  background-color: #fff;
  animation: fadeIn 0.4s ease-in-out;
}

.plan-details-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-details-content li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 8px;
}

/* リストの先頭の「・」を整える */
.plan-details-content li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-text);
}
/* --- アコーディオン内のバリエーション一覧（料金・区画数） --- */
.plan-variation-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  border-top: 1px solid var(--color-text); /* 引き締まる黒い上線 */
}

.plan-variation-list li {
  padding: 12px 0;
  border-bottom: 1px dashed #CCC; /* 軽やかな点線で区切る */
  margin-bottom: 0 !important;
}

/* 以前設定した「・」をこのリストでは消す */
.plan-variation-list li::before {
  content: none !important;
}

.variation-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.variation-name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.variation-price {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.variation-meta {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: #666;
}

/* --- 共通スペック一覧（下の部分） --- */
.plan-specs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-specs-list li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 8px;
  font-size: 13px;
  color: #333;
}

.plan-specs-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-text);
}
/* =========================================
   PRIVACY POLICY（プライバシーポリシー）ページ
========================================= */

/* --- 全体の枠組み --- */
.privacy-policy-inner {
  max-width: 800px; /* 🌟長文が読みやすいように、最大幅を制限して中央に配置 */
  margin: 0 auto;
  padding: 0 20px;
}

/* はじめの挨拶文 */
.privacy-intro {
  font-size: 15px;
  line-height: 2.0;
  color: var(--color-text, #333);
  margin-bottom: 56px;
}

/* 各セクションのブロック */
.privacy-section {
  margin-bottom: 48px;
}

/* 見出し（1. 個人情報の取得 など） */
.privacy-heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text, #333);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E5E5E5; /* 洗練された細い下線を引く */
}

/* 本文テキスト */
.privacy-section p {
  font-size: 15px;
  line-height: 1.8;
  color: #444; /* 真っ黒より少しだけ柔らかいグレーにして読みやすく */
  margin-bottom: 0;
}

/* リスト（利用目的などの箇条書き） */
.privacy-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
}

.privacy-list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

.privacy-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-text, #333);
}

/* =========================================
   既存レイアウトを包むシンプルアコーディオン
========================================= */

/* 外箱（上下に細い線を引く） */
.simple-accordion {
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 0; /* 隙間なく連続させる */
}

/* 一番上のアコーディオンだけ、上にも線を引く */
.simple-accordion:first-of-type {
  border-top: 1px solid #E5E5E5;
  margin-top: 64px; /* 上の要素との余白 */
}

/* 🌟クリックする見出しバー（既存のレイアウトには影響しません） */
.simple-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  font-family: "Helvetica Neue", Arial, sans-serif; /* 英語に合うフォント */
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text, #333);
  list-style: none; /* デフォルトの黒い三角形を消す */
  transition: background-color 0.3s ease;
}

/* Safari用の黒い三角形消去 */
.simple-summary::-webkit-details-marker {
  display: none;
}

.simple-summary:hover {
  background-color: #FAFAFA;
}

/* 開いた時に中身をフワッと出す設定 */
.simple-content {
  padding: 0 16px 32px; /* 左右に少し余白を取り、下にゆとりを持たせる */
  animation: fadeIn 0.4s ease-in-out;
}
/* --- アコーディオンの矢印（擬似要素で作成） --- */

/* 1. 矢印の基準点とするため、summaryに relative を追加（既にあれば不要です） */
.simple-summary {
  position: relative;
  padding-right: 40px; /* 🌟右側に矢印用のスペースをしっかり空けておく */
}

/* 2. 擬似要素で「下矢印（くの字）」を描画 */
.simple-summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px; /* 右端に配置 */
  width: 8px; /* 矢印のサイズ（小さめで上品に） */
  height: 8px;
  border-bottom: 1px solid var(--color-text, #333); /* 下の線 */
  border-right: 1px solid var(--color-text, #333);  /* 右の線 */
  
  /* 45度回転させて下向きの「くの字」にする ＆ 上下中央揃え */
  transform: translateY(-50%) rotate(45deg);
  
  /* クルッと回るアニメーションの速度 */
  transition: transform 0.3s ease;
}

/* 3. アコーディオンが開いた状態（[open]）の時は、上向きに回転させる */
.simple-accordion[open] .simple-summary::after {
  /* 225度（45 + 180）回転させて上向きにする */
  transform: translateY(-50%) rotate(225deg);
}
/* =========================================
   STAYページ：インフォメーションエリアの修正
========================================= */

/* 1. 大枠を画面幅いっぱい（最大800px）に広げて中央配置 */
.stay-info-area {
  width: 100% !important;
  max-width: 800px;
  margin: 64px auto 0;
  display: block !important;
}

/* 2. 見出し（INFORMATIONなど）のスタイル調整 */
/* 以前の中央揃え等の設定を強制上書きして、アコーディオンらしく左寄せに */
.simple-summary .info-heading {
  margin: 0 !important;
  text-align: left !important;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--color-text, #333);
}

.simple-summary .info-subheading {
  font-size: 12px;
  color: #888;
  font-weight: normal;
  display: block;
  margin-top: 4px;
}

/* 3. 結びのメッセージの調整 */
.rules-closing {
  margin-top: 40px;
  text-align: center; /* メッセージは中央揃えが美しいのでそのまま */
  font-size: 14px;
  line-height: 1.8;
}

/* スマホ用の調整 */
@media screen and (max-width: 768px) {
  .stay-info-area {
    margin-top: 48px;
  }
  .simple-summary .info-heading {
    font-size: 15px;
  }
  .simple-summary .info-subheading {
    font-size: 11px;
  }
  .rules-closing {
    font-size: 13px;
    text-align: left; /* スマホでは読みやすいように左寄せに */
	
  }
  /* 🌟スマホ時：ページ全体の左右の余白を狭くして、コンテンツを広げる */
  .page-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* =========================================
   FACILITYページ：場内マップと拡大モーダル
========================================= */

.facility-map-section {
  max-width: 1000px; /* 見やすさのため最大幅を制限 */
  margin: 80px auto; /* 上下余白（STAYページの見出し余白に合わせる） */
  text-align: center;
}

/* マップを開くボタン（画像自体をボタン化） */
.map-open-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in; /* マウスカーソルを虫眼鏡に */
  position: relative;
  display: block;
  width: 100%;
}

.map-thumbnail {
  width: 100%;
  height: auto;
  /* 🌟CSSで比率（297x210 = A4横）を明示的に保持し、崩れを防ぐ */
  aspect-ratio: 297 / 210; 
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  transition: opacity 0.3s ease;
  object-fit: contain; /* 比率を保ったまま収める */
}

.map-open-btn:hover .map-thumbnail {
  opacity: 0.8;
}

/* 画像右下の「タップして拡大」のヒント文字 */
.map-enlarge-hint {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 20px;
  pointer-events: none; /* ヒント自体はクリックに反応させない */
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
}

/* PDFダウンロードボタンエリア */
.map-download-area {
  margin-top: 24px;
}

.btn-pdf-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #fff;
  color: var(--color-text, #333);
  border: 1px solid var(--color-text, #333);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  font-family: "Noto Sans JP", sans-serif;
}

.btn-pdf-download:hover {
  background-color: #FAFAFA;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* --- 🌟拡大表示用モーダル（dialogタグ）共通設定 --- */
.map-dialog {
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  max-width: 95vw;
  max-height: 95vh;
  outline: none; /* フォーカス時の青い枠線を消す */
}

/* モーダルの背景（黒の半透明） */
.map-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px); /* 背景をぼかす（モダンブラウザ用） */
}

.dialog-inner {
  position: relative;
  background-color: #fff;
  border-radius: 8px;
  padding: 40px 16px 16px; /* 上部に閉じるボタン用の余白 */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* 閉じるボタン（×） */
.map-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 32px;
  color: #333;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

/* スマホで横スクロール＆ピンチズームを許可するエリア */
.map-zoom-area {
  width: 100%;
  height: 100%;
  overflow: auto; /* はみ出た部分はスクロール可能に */
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
}

.map-zoom-area img {
  display: block;
  width: 100%;
  height: auto;
  /* 🌟スマホ時：潰れず横スクロールできるように最小幅を指定（A4横なら800px以上が推奨） */
  min-width: 800px; 
}

/* =========================================
   📱 スマートフォン用（レスポンス）
========================================= */
@media screen and (max-width: 768px) {
  
  /* 前提：STAYページでの修正により、.page-contentの左右paddingが16pxになっている */

  .facility-map-section {
    margin: 56px 0; /* STAYページの見出し余白に合わせる */
    text-align: left; /* スマホではテキストを左寄せに */
  }
  
  .map-thumbnail {
    border-radius: 0; /* スマホでは画像が端まで広がるので角丸を消す */
  }

  .dialog-inner {
    padding: 40px 8px 8px; /* モーダル内余白を狭く */
  }
  
  .btn-pdf-download {
    font-size: 12px;
    padding: 10px 20px;
    width: 100%; /* スマホではボタンを全幅に */
    box-sizing: border-box;
  }
}
/* =========================================
   SURROUNDING（周辺情報）ページ
========================================= */

.surrounding-inner {
  max-width: 800px;
  margin: 0 auto;
}

.surrounding-intro {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 64px;
  text-align: center;
  color: var(--color-text, #333);
}

.area-section {
  margin-bottom: 56px;
}

/* カテゴリ見出し（買い物、温泉など） */
.area-heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text, #333);
  margin-bottom: 24px;
  padding-left: 12px;
  border-left: 3px solid var(--color-text, #333); /* 左に細いアクセント線 */
  line-height: 1.2;
}

/* 個別の施設リスト */
.area-item {
  border-bottom: 1px solid #E5E5E5;
  padding: 20px 0;
}

.area-item:first-of-type {
  border-top: 1px solid #E5E5E5;
}

/* 施設名と移動時間のフレックスボックス */
.area-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.area-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, #333);
  margin: 0;
}

.area-time {
  font-size: 13px;
  color: #888;
  background-color: #F5F5F5;
  padding: 4px 12px;
  border-radius: 20px; /* 少し丸みを持たせてバッジ風に */
  white-space: nowrap;
  margin-left: 16px;
}

.area-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* --- スマホ用調整 --- */
@media screen and (max-width: 768px) {
  .surrounding-intro {
    font-size: 14px;
    margin-bottom: 48px;
    text-align: left;
  }
  .area-heading {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .area-header {
    flex-direction: column; /* スマホでは施設名と時間を縦積みに */
    align-items: flex-start;
  }
  .area-time {
    margin-left: 0;
    margin-top: 8px;
    font-size: 12px;
  }
}


/* =========================================
   📱 スマートフォン用（レスポンシブ）設定
   ※画面幅768px以下のデバイスにのみ適用されます
========================================= */
@media screen and (max-width: 768px) {

  /* --- 1. 共通の余白と文字サイズ調整 --- */
  .page-main {
    padding: 0 16px; /* スマホの画面端に文字がくっつかないように左右に余白を確保 */
  }
  
  .page-title {
    font-size: 32px; /* スマホ用に少しタイトルを小さく */
  }

  /* セクション間の余白をPC（120pxなど）からスマホ用（80pxや60px）に縮小 */
  .stay-info-area,
  .facility-section,
  .faq-section,
  .access-map-wrapper,
  .contact-page-inner,
  .reserve-page-inner {
    margin-bottom: 80px;
  }

  /* --- 2. FACILITY（場内設備）の縦積み化 --- */
  /* 管理棟の左右配置を縦に */
  .facility-flex {
    flex-direction: column;
  }
  .facility-img, 
  .facility-text {
    width: 100%;
  }
  .facility-img {
    margin-bottom: 24px; /* 写真とテキストの間に余白 */
  }

  /* サニタリーの3列グリッドを縦1列に */
  .sanitary-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* --- 3. ACCESS（アクセス）の縦積み化 --- */
  .access-method-item {
    flex-direction: column;
    padding-top: 32px;
  }
  .method-title {
    width: 100%;
    margin-bottom: 16px;
  }
  .method-content {
    width: 100%;
  }

  /* --- 4. フォーム（Contact / Reserve）の調整 --- */
  .news-nav {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  .nav-prev, .nav-next, .nav-back {
    width: 100%;
    text-align: center;
  }
  
  /* 予約フォームの日付や人数入力欄をスマホ幅いっぱいに */
  .wpcf7-form-control.wpcf7-date,
  .wpcf7-form-control.wpcf7-number {
    max-width: 100%;
  }
}
/* =========================================
   📱 スマートフォン用（レスポンシブ）設定
========================================= */
@media screen and (max-width: 768px) {

  /* --- ヘッダーのレイアウト調整 --- */
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px 12px 16px !important; /* スマホ用に少し高さを抑える */
  }

  /* ロゴの大きさをスマホ用に調整 */
  .site-logo img {
    height: 32px;
    width: auto;
  }

  /* 予約ボタンをハンバーガーの左に配置して少し小さく */
  .header-reserve {
    margin-left: auto; /* 右に寄せる */
    margin-right: 8px; /* ハンバーガーボタンとの隙間 */
  }
  /* --- スマホ用の予約ボタン調整 --- */
  .btn-reserve {
    padding: 8px 12px; /* 左右の余白を少しだけ減らしてスリムに */
    font-size: 13px;
    white-space: nowrap; /* 🌟ここが最重要！絶対に改行させない魔法 */
    min-width: auto; /* PC版で横幅を固定していた場合、それを解除 */
  }

  /* --- ハンバーガーボタン本体 --- */
  .hamburger-btn {
    display: block; /* スマホの時だけ表示 */
    width: 44px;
    height: 44px;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 9999; /* 🌟メニューより手前に持ってくる */
    padding: 0;
	margin-right: -8px; /* 🌟ボタン自体を少し右にずらして、視覚的なバランスを取る */
  }

  /* 3本線のデザイン（極細ライン） */
  .hamburger-line {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 1px;
    background-color: var(--color-text);
    transition: all 0.3s ease;
  }
  .hamburger-line:nth-child(1) { top: 14px; }
  .hamburger-line:nth-child(2) { top: 21px; }
  .hamburger-line:nth-child(3) { top: 28px; }

  /* 開いた時のバッテン（×）への変化 */
  .hamburger-btn.is-open .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .hamburger-btn.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .hamburger-btn.is-open .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* --- ナビゲーション（全画面メニュー） --- */
  .global-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98); /* ほんの少し透ける白 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0; /* 最初は透明にして隠す */
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9998; /* ボタンの1つ下に配置 */
  }

  /* 開いた状態（is-openが付いた時） */
  .global-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* メニュー項目の縦並び */
  .global-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 0;
    margin: 0;
  }

  .global-nav li {
    list-style: none;
  }

  .global-nav a {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    letter-spacing: 0.1em;
    color: var(--color-text);
    text-decoration: none;
  }

  /* 🌟メニューが開いている間は、後ろの画面をスクロールさせない */
  body.is-fixed {
    overflow: hidden;
  }
 

/* --- TOPページ：宿泊施設（STAY）のレイアウト解除と縦積み --- */
  
  /* テキストエリアと写真エリアを縦並びに */
  .stay-inner {
    display: flex;
    flex-direction: column;
  }

  /* テキストエリア（詳しく見るボタン含む）の下に余白を作る */
  .stay-content {
    margin-bottom: 40px;
  }

  /* ギャラリーのPC用レイアウト（Gridや絶対配置など）をリセットして縦積みに */
  .stay-gallery {
    display: flex;
    flex-direction: column;
    gap: 24px; /* 写真と写真の間の余白 */
    width: 100%;
  }

  /* 各写真の枠を画面幅いっぱいに広げる */
  .gallery-item {
    width: 100% !important; /* PC側の幅指定を強制リセット */
    position: static !important; /* PC側でabsolute配置などをしていた場合の解除 */
    margin: 0 !important;
  }

  /* 写真自体を枠いっぱいに広げる */
  .gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 角を少し丸めて柔らかい印象に */
    display: block;
  }
/* --- TOPページ：結びの言葉（.top-closing）の縦並びレイアウト --- */

  /* セクション全体の高さをリセット */
  .top-closing {
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 60px; /* 下に余白を確保 */
  }

  /* 画像エリアの絶対配置を解除して、通常の配置に戻す */
  .closing-img {
    position: static !important; /* 🌟ここが重要！強制的にリセット */
    width: 100%;
    height: auto;
    margin: 0 0 32px 0; /* 画像の下に余白を入れる */
  }
  
  /* 画像自体を横幅いっぱいに */
  .closing-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* 少し角を丸くして優しい印象に */
  }

  /* テキストエリアの絶対配置を解除し、画像の下に配置 */
  .closing-text {
    position: static !important; /* 🌟ここも重要！強制リセット */
    width: 100%;
    padding: 0 16px; /* 左右に少し余白を入れる */
    text-align: center; /* テキストを中央揃えに（お好みで左揃えでもOK） */
    /* もしテキストが読みにくい場合は、以下の背景色を有効にしてください */
    /* background-color: rgba(255, 255, 255, 0.8); padding: 24px; border-radius: 8px; */
  }

  /* 見出しと本文のスタイルをスマホ用に調整 */
  .closing-catch {
    font-size: 22px;
    margin-bottom: 16px;
    color: var(--color-text); /* 背景から外れるので、文字色を濃くして読みやすく */
  }
  
  .closing-desc {
    font-size: 15px;
    line-height: 2.0;
    color: var(--color-text);
  }
  /* --- フッター全体のコンパクト化 --- */
  .site-footer {
    padding: 60px 16px 24px; /* 上下の余白をスマホ用に狭くする */
  }

  .footer-inner {
    display: flex;
    flex-direction: column;
    gap: 40px; /* 各ブロック（Info / Nav / Action）の間の余白を詰める */
  }

  /* 1. インフォメーション部分のテキストを少し小さく */
  .footer-address {
    font-size: 13px;
    line-height: 1.8;
  }
  
  /* 2. 🌟ナビゲーションを「2列」に並べて高さを半減させる */
  .footer-nav-area {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 画面を半分ずつ（2列）に割る魔法 */
    gap: 16px;
  }
  
  .footer-nav-list li {
    margin-bottom: 12px; /* リンク同士の縦の隙間を詰める */
  }
  
  .footer-nav-list a {
    font-size: 13px; /* リンクの文字サイズをスマホ最適化 */
  }

  /* Socialの上の広すぎる余白をスマホ用に詰める */
  .footer-nav-col .mt-40 {
    margin-top: 24px !important; 
  }

  /* 3. 🌟アクションボタン群の整理（「予約」を大きく、「アクセス/お問い合わせ」を2列に） */
  .footer-action {
    display: grid;
    grid-template-columns: 1fr 1fr; /* こちらも2列に分割 */
    gap: 8px; /* ボタン同士の隙間を詰める */
  }

  /* 最初のボタン（予約する）だけ、2列分をぶち抜いて全幅にする */
  .footer-action .action-link:first-child {
    grid-column: 1 / -1; 
  }

  .action-link {
    padding: 12px; /* ボタンの高さを少し抑える */
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* =========================================
     STAYページ：スマホ用コンパクトレイアウト
  ========================================= */

  /* --- 1. カテゴリナビを「横スワイプ」にして縦幅を節約 --- */
  .stay-category-nav {
    display: flex;
    flex-wrap: nowrap; /* 絶対に折り返さない */
    overflow-x: auto; /* 画面からはみ出た分を横スクロール可能にする */
    gap: 12px;
    padding-bottom: 16px; /* スクロールしやすくするための余白 */
    margin-bottom: 40px;
    -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロールさせる魔法 */
    scrollbar-width: none; /* Firefox用：スクロールバーを隠して美しく */
  }
  
  /* Chrome/Safari用：スクロールバーを隠す */
  .stay-category-nav::-webkit-scrollbar {
    display: none;
  }

  .category-item {
    flex: 0 0 140px; /* 🌟幅を140pxに固定して、絶対に潰れないようにする */
    padding: 16px 12px;
  }
  
  .category-name {
    font-size: 13px; /* 少し文字を小さくして収まりを良くする */
  }

  /* --- 2. プラン一覧を「横並びカード」にして高さを半減 --- */
  /* =========================================
     📱 STAYページ：スマホ用レイアウト（縦積み版）
  ========================================= */

  /* --- 1. プラン一覧を「写真上・テキスト下」の縦積みに変更 --- */
  .stay-plan-item {
    display: flex;
    flex-direction: column !important; /* 🌟横並びを強制解除して縦積みに */
    gap: 0; /* 余白は個別に設定するのでリセット */
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E5E5E5;
  }

  /* 画像エリア（横幅100%に広げる） */
  .plan-img {
    width: 100% !important; /* 🌟35%だったのを100%に強制上書き */
    margin-bottom: 24px; /* 写真とテキストの間の余白 */
  }

  .plan-img .img-placeholder,
  .plan-img img {
    width: 100%;
    aspect-ratio: 16 / 9; /* 🌟正方形ではなく、少し横長（16:9）にして高さを抑える */
    object-fit: cover;
    border-radius: 8px;
  }

  /* テキストエリア（横幅100%に広げる） */
  .plan-text {
    width: 100% !important; /* 🌟65%だったのを100%に強制上書き */
  }

  .plan-title {
    font-size: 20px; /* 文字幅に余裕ができたので少し大きく */
    margin-bottom: 8px;
  }

  .plan-price {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .plan-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
    /* 🌟縦積みになったので、3行で省略する設定を解除（全文読めるようにする） */
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  /* 詳細・予約ボタンのコンパクト化 */
  .btn-plan-detail {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 8px;
    font-size: 11px;
    white-space: nowrap; /* ボタン内でテキストが変に改行されるのを防ぐ */
    box-sizing: border-box;
  }
  /* =========================================
   PRIVACY POLICY（プライバシーポリシー）ページ
========================================= */
/* スマホ用に余白や文字サイズを少しだけコンパクトに調整 */
  .privacy-policy-inner {
    padding: 0 16px; /* スマホ画面端の余白 */
  }
  
  .privacy-intro {
    font-size: 14px;
    margin-bottom: 40px;
  }

  .privacy-section {
    margin-bottom: 32px;
  }

  .privacy-heading {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .privacy-section p,
  .privacy-list li {
    font-size: 14px; /* スマホでは14pxが黄金比の読みやすさです */
    line-height: 1.8;
  }
}