/* ============================================
	style.css - デザイン用スタイル
	============================================ */

* {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	width: 100%;
}

/* ベーススタイル */
body {
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.8;
	color: #6B4E3D;
	font-size: 16px;
	background: #FFF8F0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

a {
	transition: all 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

a:hover {
	opacity: 0.8;
	transform: translateY(-2px);
}

h1, h2, h3, h4, h5, h6 {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* コンテナ */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
}

/* ============================================
	ヘッダー
	============================================ */

/* ヘッダー - ページトップ時は透明 */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: transparent;
	box-shadow: none;
	z-index: 1000;
	transition: all 0.3s ease;
}

/* スクロール時は白背景 */
.header.scrolled {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 40px 15px 0;
	gap: 30px;
	position: relative;
}

/* ロゴ - 左上に配置 */
.header-logo {
	position: absolute;
	top: 0;
	left: 0;
	flex-shrink: 0;
	background: white;
	padding: 30px 25px;
	border-radius: 0 0 20px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

/* スクロール時はロゴの背景・角丸・シャドウを削除 */
.header.scrolled .header-logo {
	position: static;
	background: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0 20px;
}

.header-logo a {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.header-logo img {
	height: 50px;
	width: auto;
}

.logo-text {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	white-space: nowrap;
	letter-spacing: 0.5px;
}

/* ナビゲーション - 右寄せ */
.header-nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	margin-left: auto;
	padding: 20px 5px 30px;
	transition: 0.3s ease;
}
.header.scrolled .header-nav {
	padding: 5px 25px 10px;
}

.nav-list {
	display: flex;
	align-items: center;
	list-style: none;
	gap: 35px;
	margin: 0;
	padding: 0;
}

.nav-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	transition: 0.3s ease;
	padding: 5px 10px;
}

.nav-item a:hover {
	opacity: 0.7;
	transform: none;
}

.nav-en {
	font-size: 10px;
	font-weight: 500;
	color: #999;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
	text-transform: uppercase;
}

.nav-ja {
	font-size: 14px;
	font-weight: 600;
	color: #5D4037;
	transition: 0.3s ease;
}
.nav-item a:hover .nav-ja {
	color: #FF9800;
}

/* PC用ボタン（1025px以上で表示） */
.header-buttons-pc {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
/* ドロワー内ボタン（1024px以下でドロワー内に表示） */
.header-buttons {
	display: none;
}

/* お申し込みボタン - 白背景、ブラウン枠線、ブラウン文字 */
.header-link {
	font-size: 14px;
	font-weight: 600;
	color: #5D4037;
	text-decoration: none;
	background: white;
	border: 2px solid #5D4037;
	padding: 10px 26px;
	border-radius: 4px;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.header-link:hover {
	background: #5D4037;
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
	opacity: 1;
}

/* 資料請求ボタン - ブラウン背景、白文字 */
.btn-request-header {
	background: #5D4037;
	color: white;
	border: 2px solid #5D4037;
	padding: 10px 26px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	white-space: nowrap;
}

.btn-request-header:hover {
	background: #4A342D;
	border-color: #4A342D;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
	opacity: 1;
}

/* ハンバーガーメニューボタン（デフォルトは非表示） */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 60px;
	height: 48px;
	background: rgba(93, 64, 55, 0.1);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	padding: 10px;
	z-index: 1001;
}

.hamburger span {
	width: 40px;
	height: 3px;
	background: #5D4037;
	border-radius: 2px;
	transition: all 0.3s ease;
	margin: 0 auto;
	display: block;
}

.hamburger.active {
	background: rgba(93, 64, 55, 0.9);
}

.hamburger.active span {
	background: white;
}

.hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translate(7px, 6px);
}

.hamburger.active span:nth-child(2) {
	opacity: 0;
}

.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(9px, -5px);
}

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

.hero {
	height: 100vh;
	min-height: 640px;
	padding-top: clamp(60px, 5.5vh, 80px);
	position: relative;
	background: #e9e3dd;
	border: 20px solid #fff;
	overflow: hidden;
}
.hero .inner {
	position: relative;
	height: 100%;
	max-width: 1640px;
	margin: 0 auto;
	z-index: 2;
}

/* 物件名 */
.hero-location {
	position: absolute;
	bottom: 8%;
	right: clamp(60px, 7vw, 130px);
	font-size: clamp(48px, 4.5vw, 70px);
	font-weight: 700;
	color: #fff;
	text-align: right;
	margin: 0;
	line-height: 1;
	letter-spacing: clamp(1px, 0.16vw, 3px);
	z-index: 2;
	white-space: nowrap;
	animation: slideUp 1.2s ease-out 0.3s both;
}

/* 「ド」の文字だけ黄色 */
.hero-location-do {
	color: #FFD700;
}

/* 建物画像（ベース配置） */
.hero-building {
	position: absolute;
	right: clamp(40px, 6.0vw, 100px);
	top: 15%;
	width: 65%;
	max-height: clamp(420px, 63vh, 640px);
	display: flex;
	/* align-items: flex-end;
	justify-content: flex-end; */
	z-index: 1;
	animation: slideUp 1.2s ease-out 0.3s both;
}

.hero-building img {
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: bottom right;
}

/* ワッペン */
.hero-badge {
	position: absolute;
	top: 20%;
	right: clamp(70px, 7.3vw, 140px);
	width: clamp(120px, 9.4vw, 180px);
	height: auto;
	z-index: 3;
	animation: floating 3s ease-in-out infinite;
}

/* Start here. Grow here. */
.hero-title-img {
	position: absolute;
	top: 13%;
	left: clamp(40px, 4.2vw, 80px);
	max-width: clamp(420px, 25vw, 480px);
	height: auto;
	z-index: 2;
	animation: slideInLeft 0.8s ease-out 0.5s both;
}

/* ヒーローセクションのサブタイトル */
.hero-subtitle {
	position: absolute;
	top: 45%;
	left: clamp(40px, 4.2vw, 80px);
	font-size: clamp(28px, 1.875vw, 36px);
	font-weight: 700;
	letter-spacing: 1px;
	color: #5D4037;
	line-height: 1.4;
	z-index: 2;
	animation: slideInLeft 0.8s ease-out 0.5s both;
}
.subtitle-line {
	display: inline-block;
	background: linear-gradient(transparent 20%, #FFD700 20%, #FFD700 85%, transparent 85%);
	background-size: 0% 100%;
	background-repeat: no-repeat;
	background-position: left;
	padding: 0;
	margin: 8px 0;
}
/* 1行目 - 0.5秒後 */
.subtitle-line-1 {
	animation: markerWipe 0.8s ease-out 0.5s both;
}
/* 2行目 - 0.8秒後 */
.subtitle-line-2 {
	animation: markerWipe 0.8s ease-out 0.8s both;
}
/* 3行目 - 1.1秒後 */
.subtitle-line-3 {
	animation: markerWipe 0.8s ease-out 1.1s both;
}
/* 「1分」の上に●を追加 */
.dot-above {
	position: relative;
	display: inline-block;
}

.dot-above::before {
	content: '●　●';
	position: absolute;
	top: -10px;
	right: 10%;
	transform: translateX(-50%);
	font-size: 12px;
	color: #5D4037;
}

.hero-people {
	position: absolute;
	bottom: 0;
	left: clamp(40px, 25vw, 200px);
	width: clamp(180px, 18vw, 280px);
	height: auto;
	z-index: 2;
}

/* 下から現れる */
@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ふわふわ浮かぶ */
@keyframes floating {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* 黄色背景とテキストが左から現れる */
@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* マーカー - 左から徐々に表示 */
@keyframes markerWipe {
	from {
		background-size: 0% 100%;  /* 幅0% */
	}
	to {
		background-size: 100% 100%;  /* 幅100% */
	}
}

/* ============================================
	NEWS
	============================================ */

.news {
	padding: 60px 0;
	background: linear-gradient(135deg, #FFF9F0 0%, #FFECB3 100%);
	/* border-top: 4px solid #FFB74D;
	border-bottom: 4px solid #FFB74D; */
	position: relative;
	overflow: hidden;
}

.news-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
}

.news-date {
	font-weight: 700;
	color: #6B4E3D;
	background: linear-gradient(135deg, #FFD54F 0%, #FFCA28 100%);
	padding: 8px 20px;
	border-radius: 25px;
	box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

.news-text {
	font-size: 16px;
	font-weight: 600;
	color: #6B4E3D;
}

/* ============================================
	セクション共通
	============================================ */

.section-title {
	text-align: center;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 3px;
	margin-bottom: 10px;
	color: #6B4E3D;
	font-family: 'Georgia', serif;
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
}

.section-title::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 4px;
	background: linear-gradient(90deg, #FFB74D, #FF9800);
	border-radius: 2px;
}

.section-subtitle {
	text-align: center;
	font-size: 18px;
	margin-bottom: 60px;
	color: #A67C52;
	font-weight: 600;
}

/* ============================================
	FEATURES
	============================================ */
.features-section {
	padding: 80px 0 0;
}

/* コンテナ - 最大幅を設定して中央寄せ */
.features-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 20px;
}

/* セクションヘッダー */
.features-header {
	text-align: center;
	margin-bottom: 60px;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.features-header.fade-in {
	opacity: 1;
	transform: translateY(0);
}

.features-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: #5D4037;
	margin-bottom: 10px;
}

.features-title {
	font-size: 36px;
	font-weight: 700;
	color: #333;
	line-height: 1.4;
}

/* 特長アイテム */
.feature-item {
	display: flex;
	align-items: center;
	gap: 60px;
	padding: 80px 5%;
	background-color: #e9e3dd;
}

/* 個別要素のアニメーション設定 */
.feature-content {
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.feature-image {
	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

/* POINT 01, 03: テキスト左から、画像右から */
.feature-item--reverse .feature-content {
	transform: translateX(-50px);
}

.feature-item--reverse .feature-image {
	transform: translateX(50px);
}

/* POINT 02, 04: 画像左から、テキスト右から */
.feature-item:not(.feature-item--reverse) .feature-image {
	transform: translateX(-50px);
}

.feature-item:not(.feature-item--reverse) .feature-content {
	transform: translateX(50px);
}

/* アニメーション適用後 */
.feature-item.fade-in .feature-content,
.feature-item.fade-in .feature-image {
	opacity: 1;
	transform: translateX(0);
}

/* POINT 01, 03 (reverse) を白背景に */
.feature-item--reverse {
	flex-direction: row-reverse;
	background-color: #fff;
}

/* コンテンツエリア */
.feature-content {
	flex: 1;
	max-width: 500px;
}

/* POINT番号のデザイン */
.feature-number {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	color: #6B4E3D;
	background-color: #FFD700;
	padding: 8px 20px;
	border-radius: 25px;
	margin-bottom: 20px;
}

/* タイトルのデザイン */
.feature-heading {
	font-size: 32px;
	font-weight: 700;
	color: #333;
	margin-bottom: 24px;
	line-height: 1.4;
	position: relative;
	padding-left: 20px;
	border-left: 4px solid #FF9800;
}

.feature-description {
	font-size: 15px;
	line-height: 1.9;
	color: #555;
}

.feature-note {
	font-size: 13px;
	line-height: 1.6;
	color: #666;
	margin-top: 15px;
	font-weight: 500;
}

/* 画像エリア */
.feature-image {
	flex: 1;
	max-width: 500px;
}

.feature-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

/* ============================================
	共用設備
	============================================ */

.facilities {
	margin-top: 80px;
	padding: 60px 40px;
	background: linear-gradient(135deg, #FFF9F0 0%, #FFECB3 50%, #FFE0B2 100%);
	border-radius: 30px;
	border: 4px solid #FFB74D;
	box-shadow: 0 10px 40px rgba(255, 183, 77, 0.2);
	position: relative;
	overflow: hidden;
}

.facilities-title {
	text-align: center;
	font-size: 28px;
	margin-bottom: 40px;
	color: #6B4E3D;
	font-weight: 700;
}

.facilities-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 30px;
}

.facility-item {
	text-align: center;
	padding: 25px 15px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	border: 2px solid rgba(255, 183, 77, 0.2);
}

.facility-item i {
	font-size: 40px;
	background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 15px;
}

.facility-item p {
	font-size: 14px;
	color: #6B4E3D;
	font-weight: 600;
}

/* ============================================
	OVERVIEW
	============================================ */
.overview-section {
	padding: 80px 0;
}

.overview-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5%;
}

/* セクションヘッダー */
.overview-header {
	text-align: center;
	margin-bottom: 60px;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.overview-header.fade-in {
	opacity: 1;
	transform: translateY(0);
}

.overview-label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: #5D4037;
	margin-bottom: 10px;
}

.overview-title {
	font-size: 36px;
	font-weight: 700;
	color: #333;
	line-height: 1.4;
}

/* ========================================
	 スライドショーエリア (Slick)
========================================= */

.overview-slideshow {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 40px 0;
	opacity: 0;
	transition: opacity 0.8s ease;
	padding: 0;
}

.overview-slideshow.fade-in {
	opacity: 1;
	transform: translateX(-50%);
}
.overview-slideshow.slick-dotted.slick-slider {
	margin-bottom:  120px;
	background: #fff;
	padding: 50px 0;
}

/* 居室紹介のスライドショー（最初から表示） */
.room-slideshow {
	opacity: 1 !important;
	transform: translateX(-50%) !important;
}

.slide-item {
	padding: 0 10px;
}

.slide-item img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	display: block;
	border-radius: 12px;
	transition: all 0.3s ease;
}

/* センター以外のスライドを暗くする */
.slick-slide:not(.slick-center) .slide-item img {
	opacity: 0.6;
	filter: brightness(0.8);
}

/* Slickナビゲーションボタンのカスタマイズ */
.overview-slideshow .slick-prev,
.overview-slideshow .slick-next {
	width: 50px;
	height: 50px;
	z-index: 10;
}

.overview-slideshow .slick-prev {
	left: 25px;
}

.overview-slideshow .slick-next {
	right: 25px;
}

.overview-slideshow .slick-prev:before,
.overview-slideshow .slick-next:before {
	font-size: 50px;
	opacity: 0.75;
}

.overview-slideshow .slick-prev:hover:before,
.overview-slideshow .slick-next:hover:before {
	opacity: 1;
}

/* Slickドットのカスタマイズ */
.overview-slideshow .slick-dots {
	bottom: -50px;
	width: calc(100% - 40px);
}

.overview-slideshow .slick-dots li button:before {
	font-size: 12px;
	color: #ccc;
	opacity: 1;
}

.overview-slideshow .slick-dots li.slick-active button:before {
	color: #5D4037;
	opacity: 1;
}

/* ========================================
	 共用設備エリア
========================================= */

.facilities-area {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.facilities-area.fade-in {
	opacity: 1;
	transform: translateY(0);
}
.facilities-area .slick-dots {
	width: calc(100% - 40px);
	margin-bottom: 120px;
}

.facilities-title {
	font-size: 28px;
	font-weight: 700;
	color: #333;
	text-align: center;
	margin-bottom: 40px;
}

.facilities-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	max-width: 800px;
	margin: 0 auto;
}

.facility-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 25px 20px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
}

.facility-item i {
	font-size: 48px;
	color: #5D4037;
	margin-bottom: 12px;
}

.facility-item .facility-icon {
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
}

.facility-name {
	font-size: 14px;
	font-weight: 500;
	color: #333;
	text-align: center;
	line-height: 1.4;
}

/* ========================================
	 居室紹介
========================================= */

.overview-intro {
	margin-top: 80px;
	text-align: center;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.overview-intro.fade-in {
	opacity: 1;
	transform: translateY(0);
}

.overview-subtitle {
	font-size: 28px;
	font-weight: 700;
	color: #333;
	margin-bottom: 24px;
}

.overview-text {
	font-size: 16px;
	line-height: 2;
	color: #555;
	max-width: 900px;
	margin: 100px auto 20px;
}

/* ========================================
	 物件詳細
========================================= */

.overview-details {
	margin-top: 60px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	position: relative;
}

/* 装飾イラスト - 右上 */
.overview-details::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -60px;
	width: 150px;
	height: 150px;
	background: url('../images/dec01.png') no-repeat center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

.overview-details.fade-in {
	opacity: 1;
	transform: translateY(0);
}

.detail-item {
	background: white;
	border-radius: 16px;
	overflow: hidden;
	padding: 20px 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.detail-item h4 {
	font-size: 18px;
	font-weight: 700;
	color: #6B4E3D;
	background: linear-gradient(135deg, #FFE4B5 0%, #FFDAB9 100%);
	border-radius: 8px;
	padding: 16px 30px;
	margin-bottom: 0;
	text-align: center;
}

.detail-item > p,
.detail-item > .note {
	padding: 20px 30px;
	font-size: 15px;
	line-height: 1.8;
	color: #555;
	margin: 0;
}

.detail-item p:not(:last-child) {
	margin-bottom: 8px;
}

.detail-item .note {
	font-size: 13px;
	color: #888;
	margin-top: 0;
	padding-top: 0;
}

/* ========================================
	 居室基本設備
========================================= */

.room-facilities {
	max-width: 900px;
	margin: 40px auto 0;
	background: white;
	border-radius: 16px;
	overflow: visible;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	padding: 20px 10px;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	position: relative;
}

/* 装飾イラスト - 左上 */
.room-facilities::before {
	content: '';
	position: absolute;
	top: -50px;
	left: -120px;
	width: 180px;
	height: 180px;
	background: url('../images/dec02.png') no-repeat center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

.room-facilities.fade-in {
	opacity: 1;
	transform: translateY(0);
}

.room-facilities h4 {
	font-size: 18px;
	font-weight: 700;
	color: #6B4E3D;
	background: linear-gradient(135deg, #FFE4B5 0%, #FFDAB9 100%);
	border-radius: 8px;
	padding: 16px 30px;
	margin-bottom: 0;
	text-align: center;
}

.room-facilities p {
	padding: 20px 30px;
	font-size: 15px;
	line-height: 1.8;
	color: #555;
	margin: 0;
}

/* ========================================
	 施設利用案内
========================================= */

.facility-info {
	margin-top: 80px;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	position: relative;
}

/* 装飾イラスト - 右下 */
.facility-info::after {
	content: '';
	position: absolute;
	bottom: -40px;
	right: -50px;
	width: 160px;
	height: 160px;
	background: url('../images/dec03.png') no-repeat center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

.facility-info.fade-in {
	opacity: 1;
	transform: translateY(0);
}

.facility-info-title {
	font-size: 28px;
	font-weight: 700;
	color: #333;
	text-align: center;
	margin-bottom: 40px;
}

.facility-info-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 900px;
	margin: 0 auto;
}

.info-box {
	padding: 30px;
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
}

.info-box h4 {
	font-size: 18px;
	font-weight: 700;
	color: #5D4037;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid #5D4037;
}

.info-box p {
	font-size: 15px;
	line-height: 1.8;
	color: #555;
	margin-bottom: 8px;
}

.info-box p:last-child {
	margin-bottom: 0;
}

.info-box .small {
	font-size: 13px;
	color: #888;
	margin-top: 8px;
}

/* ========================================
	 料金
========================================= */

.pricing {
	margin-top: 80px;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	position: relative;
}

/* 装飾イラスト - 左上 */
.pricing::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -70px;
	width: 280px;
	height: 160px;
	background: url('../images/dec04.png') no-repeat center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

/* 装飾イラスト - 右下 */
.pricing::after {
	content: '';
	position: absolute;
	bottom: 100px;
	right: -60px;
	width: 130px;
	height: 230px;
	background: url('../images/dec05.png') no-repeat center;
	background-size: contain;
	z-index: 1;
	pointer-events: none;
}

.pricing.fade-in {
	opacity: 1;
	transform: translateY(0);
}

.pricing-title {
	font-size: 28px;
	font-weight: 700;
	color: #333;
	text-align: center;
	margin-bottom: 50px;
}

.room-type-section {
	margin-bottom: 40px;
}

.room-type-section:last-of-type {
	margin-bottom: 60px;
}

.room-type-title {
	font-size: 22px;
	font-weight: 700;
	color: #6B4E3D;
	text-align: center;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #FFE4B5;
}

.pricing-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: 600px;
	margin: 0 auto;
}

.pricing-card {
	padding: 40px 30px;
	background: linear-gradient(135deg, #FFD54F 0%, #FFCA28 100%);
	border-radius: 16px;
	text-align: center;
	color: #6B4E3D;
	box-shadow: 0 8px 24px rgba(255, 193, 7, 0.3);
}

.pricing-card h5 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
	opacity: 0.9;
}

.pricing-card .price {
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 10px;
	font-family: 'Georgia', serif;
}

.pricing-card .price span {
	font-size: 24px;
	margin-left: 4px;
}

.pricing-card .price-label {
	font-size: 14px;
	opacity: 0.8;
}

.other-fees,
.initial-fees {
	max-width: 800px;
	margin: 60px auto 0;
	padding: 40px;
	background-color: #f9f9f9;
	border-radius: 12px;
}

.other-fees h4,
.initial-fees h4 {
	font-size: 22px;
	font-weight: 700;
	color: #5D4037;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid #5D4037;
}

.fees-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

.fees-table tr {
	border-bottom: 1px solid #e0e0e0;
}

.fees-table tr:last-child {
	border-bottom: none;
}

.fees-table th,
.fees-table td {
	padding: 16px;
	text-align: left;
}

.fees-table th {
	font-size: 15px;
	font-weight: 600;
	color: #333;
	width: 40%;
	background-color: rgba(93, 64, 55, 0.05);
}

.fees-table td {
	font-size: 15px;
	color: #555;
	line-height: 1.8;
}

.other-fees .note,
.initial-fees .note {
	font-size: 13px;
	color: #888;
	margin-top: 12px;
}

/* ============================================
	AREA INFORMATION
	============================================ */

.area {
	padding: 80px 0;
	background: linear-gradient(180deg, #FFF8F0 0%, #FFFAF5 100%);
	position: relative;
}

.area-items {
	display: grid;
	gap: 60px;
}

.area-item {
	position: relative;
	padding: 40px 40px 40px 100px;
	background: linear-gradient(135deg, white 0%, #FFFAF5 100%);
	border-radius: 30px;
	box-shadow: 0 5px 25px rgba(255, 183, 77, 0.15);
	border: 3px solid rgba(255, 183, 77, 0.2);
}

.area-number {
	position: absolute;
	left: 25px;
	top: 40px;
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #FFD54F 0%, #FFCA28 100%);
	color: #6B4E3D;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-family: 'Georgia', serif;
	font-weight: 700;
	padding-bottom: 5px;
	box-shadow: 0 5px 20px rgba(255, 193, 7, 0.3);
}

/* PC時: h3だけ表示、番号はabsolute維持 */
.area-item-header {
	display: contents;
}

.area-item-body {
	display: flex;
	align-items: center;
	gap: 32px;
}

.area-item-text {
	flex: 1;
	min-width: 0;
}

.area-item-photo {
	flex-shrink: 0;
	width: 280px;
}

.area-item-photo img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 16px;
}

.area-item h3 {
	font-size: 24px;
	margin-bottom: 20px;
	color: #6B4E3D;
	font-weight: 700;
}

.area-item p {
	font-size: 15px;
	line-height: 2;
	color: #8B6F47;
}

/* MAP */
.area-map {
	margin-top: 60px;
	text-align: center;
	position: relative;
}

.area-map::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 40px);
	max-width: 1020px;
	height: calc(100% + 40px);
	background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%);
	border-radius: 30px;
	z-index: -1;
}

.area-map img {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	border-radius: 25px;
	box-shadow: 0 10px 40px rgba(255, 152, 0, 0.2);
}

/* 地図画像がない場合のプレースホルダー */
.area-map img:not([src]),
.area-map img[src=""] {
	min-height: 400px;
	background: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================
	FLOW
	============================================ */

.flow {
	padding: 80px 0;
	background: #fff;
}

.flow-steps {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 30px;
}

.flow-step {
	flex: 1;
	min-width: 250px;
	text-align: center;
	padding: 45px 35px;
	background: linear-gradient(135deg, white 0%, #FFFAF5 100%);
	border-radius: 30px;
	box-shadow: 0 8px 30px rgba(255, 152, 0, 0.15);
	border: 4px solid #FFB74D;
	position: relative;
}

.flow-number {
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 700;
	margin: 0 auto 25px;
	box-shadow: 0 5px 20px rgba(255, 152, 0, 0.3);
}

.flow-step h3 {
	font-size: 20px;
	margin-bottom: 20px;
	color: #6B4E3D;
	font-weight: 700;
}

.flow-step p {
	font-size: 14px;
	color: #8B6F47;
	line-height: 1.8;
}

.flow-arrow {
	font-size: 35px;
	color: #FFB74D;
	display: flex;
	align-items: center;
}

/* ============================================
	FAQ
	============================================ */

.faq {
	padding: 80px 0;
	background: linear-gradient(180deg, #FFF8F0 0%, #FFFAF5 100%);
}

.faq-items {
	max-width: 900px;
	margin: 0 auto;
}

.faq-item {
	margin-bottom: 30px;
	padding: 35px;
	background: linear-gradient(135deg, white 0%, #FFFAF5 100%);
	border-radius: 25px;
	box-shadow: 0 5px 25px rgba(255, 152, 0, 0.1);
}

.faq-question {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
}

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

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}

.faq-item.active .faq-answer {
	max-height: 1000px;
	transition: max-height 0.4s ease-in;
}

.faq-answer-inner {
	display: flex;
	gap: 20px;
	padding-top: 20px;
}

.faq-q,
.faq-a {
	font-size: 22px;
	font-weight: 700;
	font-family: 'Georgia', serif;
	background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	flex-shrink: 0;
}
.faq-a {
	background: linear-gradient(135deg, #8B6F47 0%, #6B4E3D 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	flex-shrink: 0;
}

.faq-icon {
	font-size: 28px;
	font-weight: 700;
	color: #FF9800;
	margin-left: auto;
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.faq-item.active .faq-icon {
	transform: rotate(45deg);
}

.faq-question p {
	font-size: 17px;
	font-weight: 700;
	color: #6B4E3D;
}

.faq-answer p {
	font-size: 15px;
	line-height: 2;
	color: #8B6F47;
}

/* ============================================
	CONTACT
	============================================ */

.contact {
	padding: 80px 0;
	background: linear-gradient(135deg, #8B6F47 0%, #6B4E3D 100%);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.contact-title {
	font-size: 72px;
	font-weight: 700;
	color: white;
	margin-bottom: 10px;
	font-family: 'Georgia', serif;
}

.contact-subtitle {
	font-size: 16px;
	color: white;
	margin-bottom: 50px;
	font-weight: 400;
}

.contact-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1100px;
	margin: 0 auto;
	gap: 60px;
}

.contact-left {
	text-align: left;
}

.contact-phone {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 10px;
}

.contact-phone i {
	font-size: 32px;
	color: white;
}

.contact-phone a {
	font-size: 48px;
	font-weight: 700;
	font-family: 'Georgia', serif;
	color: white;
	text-decoration: none;
	letter-spacing: 2px;
}

.contact-phone a:hover {
	opacity: 0.8;
	transform: none;
}

.contact-hours {
	font-size: 14px;
	color: white;
	font-weight: 400;
	margin-left: 47px;
}

.contact-buttons {
	display: flex;
	gap: 20px;
	flex-shrink: 0;
}

.btn-contact {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 45px;
	border: 2px solid white;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	color: white;
	background: transparent;
	text-decoration: none;
	transition: all 0.3s ease;
	min-width: 200px;
}

.btn-contact:hover {
	background: white;
	color: #6B4E3D;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-contact i {
	font-size: 14px;
}

/* ============================================
	フッター
	============================================ */

.footer {
	padding: 30px 0;
	background: #000;
	color: white;
}

.footer-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.footer-copyright {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

.footer-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: all 0.3s ease;
}

.footer-link:hover {
	color: white;
	transform: translateX(5px);
}

.footer-link i {
	font-size: 10px;
}

/* ============================================
	レスポンシブ対応
	============================================ */

@media (max-width: 1200px) {
	.nav-list {
		gap: 20px;
	}
	
	.logo-text {
		font-size: 15px;
	}
}

/* 1024px以下でハンバーガーメニュー表示 */
@media (max-width: 1024px) {
	body {
		padding-bottom: 70px;
	}
	.header.scrolled {
		background: transparent;
		box-shadow: none;
	}
	.header-inner {
		padding: 10px 0;
	}
	/* PC用ボタンを画面下部に固定 */
	.header-buttons-pc {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		gap: 0;
		padding: 12px 15px;
		background: white;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 900;
		transform: translateY(100%);
		transition: transform 0.4s ease-out;
	}
	/* スクロールして表示 */
	.header-buttons-pc.show {
		transform: translateY(0);
	}
	.header-buttons-pc .header-link,
	.header-buttons-pc .btn-request-header {
		flex: 1;
		text-align: center;
		padding: 14px 10px;
		font-size: 14px;
		white-space: nowrap;
	}
	
	.header-buttons-pc .header-link {
		margin-right: 10px;
	}
	
	/* ドロワー内ボタンを表示 */
	.header-buttons {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 15px;
		margin-top: 30px;
		padding-top: 20px;
		border-top: 1px solid #E8E8E8;
	}
	
	.header-buttons .header-link,
	.header-buttons .btn-request-header {
		width: 100%;
		text-align: center;
		padding: 15px 20px;
	}
	
	/* ハンバーガーメニューを表示 */
	.hamburger {
		display: flex;
		position: absolute;
		top: 10px;
		right: 20px;
	}
	
	/* ロゴ位置調整 */
	.header-logo {
		position: static;
		padding: 15px 20px;
		border-radius: 0 0 20px 0;
	}
	
	.header.scrolled .header-logo {
		background: white;
		border-radius: 0 0 20px 0;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		padding: 15px 20px;
	}
	
	.header-logo img {
		height: 40px;
	}
	
	.logo-text {
		font-size: 13px;
	}
	
	/* ナビゲーションをドロワーメニュー化 */
	.header-nav {
		position: fixed;
		flex-direction: column;
		top: 0;
		right: -100%;
		width: 280px;
		height: 100vh;
		background: white;
		padding: 80px 20px 20px;
		box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
		transition: right 0.3s ease;
		z-index: 999;
		overflow-y: auto;
	}
	
	.header-nav.active {
		right: 0;
	}
	
	.nav-list {
		flex-direction: column;
		gap: 0;
		width: 100%;
		align-items: stretch;
	}
	
	.nav-item {
		width: 100%;
		border-bottom: 1px solid #E8E8E8;
	}
	
	.nav-item a {
		width: 100%;
		padding: 20px 15px;
		align-items: flex-start;
		flex-direction: column;
	}
	
	.nav-en {
		font-size: 10px;
		margin-bottom: 5px;
		display: block;
	}
	
	.nav-ja {
		font-size: 15px;
		display: block;
	}
	
	/* ボタンをドロワー内に配置 */
	.header-buttons {
		flex-direction: column;
		width: 100%;
		gap: 15px;
		margin-top: 30px;
		position: static;
	}
	
	.header-link,
	.btn-request-header {
		width: 100%;
		text-align: center;
		padding: 15px 20px;
	}

	.feature-item {
		gap: 40px;
		padding: 60px 4%;
	}

	.features-title {
		font-size: 32px;
	}

	.feature-number {
		font-size: 11px;
		padding: 7px 14px;
	}

	.feature-heading {
		font-size: 28px;
		padding-left: 18px;
		border-left-width: 3.5px;
	}

	.feature-description {
		font-size: 14px;
	}

	.room-type-title {
		font-size: 20px;
		margin-bottom: 18px;
	}

	.pricing-cards {
		max-width: 100%;
	}

	.overview-section {
		padding: 60px 0;
	}

	.overview-header {
		margin-bottom: 50px;
	}

	.overview-title {
		font-size: 32px;
	}

	.overview-slideshow {
		margin-bottom: 60px;
	}

	.facilities-title {
		font-size: 26px;
		margin-bottom: 35px;
	}

	.facilities-grid {
		gap: 18px;
	}

	.facility-item {
		padding: 22px 18px;
	}

	.facility-item i {
		font-size: 42px;
		margin-bottom: 10px;
	}

	.facility-name {
		font-size: 13px;
	}

	.overview-intro {
		margin-top: 60px;
	}

	.overview-subtitle {
		font-size: 26px;
	}

	.overview-text {
		font-size: 15px;
	}

	.overview-details {
		gap: 30px;
		margin-top: 50px;
	}
	
	/* 装飾イラストのサイズ調整 */
	.overview-details::before {
		width: 100px;
		height: 100px;
		right: -40px;
	}
	
	.room-facilities::before {
		width: 120px;
		height: 120px;
		left: -40px;
	}
	
	.facility-info::after {
		width: 120px;
		height: 120px;
		right: 10px;
	}
	
	.pricing::before {
		width: 180px;
		height: 120px;
		left: 10px;
	}
	
	.pricing::after {
		width: 90px;
		height: 180px;
		right: 10px;
	}

	.detail-item {
		padding: 25px;
	}

	.detail-item h4 {
		font-size: 17px;
	}

	.facility-info {
		margin-top: 60px;
	}

	.facility-info-title {
		font-size: 26px;
		margin-bottom: 35px;
	}

	.info-box {
		padding: 25px;
	}

	.info-box h4 {
		font-size: 17px;
	}

	.pricing {
		margin-top: 60px;
	}

	.pricing-title {
		font-size: 26px;
		margin-bottom: 35px;
	}

	.pricing-cards {
		gap: 25px;
		margin-bottom: 50px;
	}

	.pricing-card {
		padding: 35px 25px;
	}

	.pricing-card .price {
		font-size: 42px;
	}

	.other-fees,
	.initial-fees {
		padding: 35px;
		margin-top: 50px;
	}

	.other-fees h4,
	.initial-fees h4 {
		font-size: 20px;
	}

	.contact {
		padding: 60px 0;
	}

	.contact-title {
		font-size: 56px;
	}

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

	.contact-left {
		text-align: center;
	}

	.contact-phone {
		justify-content: center;
		flex-direction: column;
		gap: 10px;
	}

	.contact-phone a {
		font-size: 40px;
	}

	.contact-hours {
		margin-left: 0;
		text-align: center;
	}

	.contact-buttons {
		flex-direction: row;
		width: 100%;
		justify-content: center;
	}

	.btn-contact {
		min-width: 180px;
	}
	
	/* コンテナ最大幅を100%に */
	.container {
		max-width: 100%;
		padding: 0 20px;
	}
	
	.features-container {
		max-width: none;
		padding: 0;
	}
	
	.overview-container {
		padding: 0 20px;
	}
	
	/* スライダーを通常幅に戻す */
	/* .overview-slideshow {
		width: 100%;
		left: 0;
		transform: none;
	} */
	
	/* .overview-slideshow.fade-in {
		transform: none;
	} */
	/* .room-slideshow {
		transform: none !important;
	} */
	.overview-slideshow .slick-dots {
		width: 100%;
	}
	
	.area-item-photo {
		width: 240px;
	}

	.area-item-photo img {
		height: 170px;
	}

	/* ヒーローセクション - タブレット対応 */
	.hero {
		height: 100vh;
		min-height: 700px;
		padding-top: 70px;
		border: 15px solid #fff;
	}
	
	.hero-location {
		bottom: 20%;
		right: 5%;
		font-size: 56px;
		max-width: 45%;
		white-space: normal;
		word-break: keep-all;
	}
	
	.hero-building {
		right: 5%;
		top: 10%;
		width: 55%;
		max-height: 550px;
	}

	.hero-badge {
		top: 12%;
		right: 8%;
		width: 140px;
	}

	.hero-title-img {
		top: 3%;
		left: 5%;
		max-width: 45%;
	}

	.hero-subtitle {
		top: 40%;
		left: 5%;
		font-size: 28px;
		max-width: 45%;
	}
	
	.hero-people {
		bottom: 20px;
		left: 29%;
		width: 220px;
		max-width: 30%;
	}
}

@media (max-width: 900px) {
	.header-inner {
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 80px;
	}
	
	.header-logo {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		border-radius: 0 0 20px 0;
	}
	
	.header.scrolled .header-logo {
		position: absolute;
		background: white;
		border-radius: 0 0 20px 0;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
	
	.header-nav {
		width: 100%;
		justify-content: center;
		margin-left: 0;
	}
	
	.nav-list {
		/* flex-wrap: wrap; */
		justify-content: center;
		/* gap: 15px 25px; */
	}
	
	.header-buttons {
		width: 100%;
		justify-content: center;
		margin-top: 10px;
	}
}

@media (max-width: 768px) {
	.header-logo img {
		height: 35px;
	}
	
	.logo-text {
		font-size: 12px;
	}
	
	.header-nav {
		width: 260px;
		padding: 70px 15px 15px;
	}

		/* ヒーローセクション */
	.hero {
		height: 100vh;
		min-height: 600px;
		padding-top: 60px;
		border: 10px solid #fff;
	}
	
	/* アニメーションを無効化してSP配置を優先 */
	.hero-location,
	.hero-building,
	.hero-badge,
	.hero-title-img,
	.hero-subtitle,
	.hero-people {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	
	/* h1タイトル - 建物画像の上 */
	.hero-location {
		position: absolute !important;
		top: 45% !important;
		left: 10% !important;
		right: auto !important;
		font-size: 48px !important;
		text-align: left;
		white-space: nowrap;
		z-index: 2;
	}

	/* 建物画像 - 下部に配置 */
	.hero-building {
		position: absolute !important;
		bottom: 20px !important;
		left: 50% !important;
		top: auto !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		width: 90% !important;
		max-width: 600px;
		height: auto;
	}
	
	.hero-building img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	
	/* ワッペン - 右下に配置 */
	.hero-badge {
		position: absolute !important;
		bottom: 50px !important;
		right: 20px !important;
		top: auto !important;
		width: 120px !important;
		z-index: 3;
	}
	
	/* タイトル画像 - 人物の左側 */
	.hero-title-img {
		position: absolute !important;
		top: 25% !important;
		left: 20% !important;
		transform: none !important;
		max-width: 200px !important;
		z-index: 2;
	}
	
	/* サブタイトル - 上部 */
	.hero-subtitle {
		position: absolute !important;
		top: 30px !important;
		left: 50% !important;
		bottom: auto !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		font-size: 28px !important;
		z-index: 2;
		width: auto;
		max-width: 90%;
	}
	.dot-above::before {
		font-size: 40%;
		right: 11%;
	}
	
	/* 人物画像 - 右側 */
	.hero-people {
		position: absolute !important;
		top: 20% !important;
		right: 5% !important;
		left: auto !important;
		width: 280px !important;
		z-index: 2;
	}
	
	.section-title {
		font-size: 28px;
	}

	.section-subtitle {
		font-size: 16px;
		margin-bottom: 40px;
	}

	.news-item {
		margin-top: 50px;
	}

	.features-section {
		padding: 60px 0 0;
	}

	.features-header {
		margin-bottom: 40px;
	}

	.features-title {
		font-size: 28px;
	}

	.feature-item,
	.feature-item--reverse {
		flex-direction: column;
		gap: 30px;
		padding: 50px 5%;
	}

	.feature-content,
	.feature-image {
		max-width: 100%;
	}

	/* SP時は画像を上に配置 */
	.feature-item {
		flex-direction: column-reverse;
	}

	.feature-item--reverse {
		flex-direction: column-reverse;
	}

	/* SP時は下から上のアニメーションに変更 */
	.feature-item .feature-content,
	.feature-item .feature-image,
	.feature-item--reverse .feature-content,
	.feature-item--reverse .feature-image {
		transform: translateY(30px);
	}

	.feature-item.fade-in .feature-content,
	.feature-item.fade-in .feature-image {
		transform: translateY(0);
	}

	.feature-number {
		font-size: 11px;
		padding: 6px 12px;
		margin-bottom: 16px;
	}

	.feature-heading {
		font-size: 24px;
		padding-left: 16px;
		margin-bottom: 20px;
		border-left-width: 3px;
	}

	.facilities {
		padding: 40px 20px;
	}

	.facilities-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
	}

	.facility-item {
		padding: 20px 10px;
	}

	.facility-item i {
		font-size: 32px;
	}

	.facility-item p {
		font-size: 12px;
	}

	.overview-details {
		grid-template-columns: 1fr;
	}
	
	/* 装飾イラストをSP用にサイズ・位置調整 */
	.overview-details::before {
		width: 100px;
		height: 100px;
		top: -20px;
		right: 10px;
	}
	
	.room-facilities::before {
		width: 100px;
		height: 100px;
		top: -25px;
		left: 10px;
	}
	
	.facility-info::after {
		width: 100px;
		height: 100px;
		bottom: 10px;
		right: 10px;
	}
	
	.pricing::before {
		width: 130px;
		height: 90px;
		top: 20px;
		left: 10px;
	}
	
	.pricing::after {
		width: 65px;
		height: 120px;
		bottom: 150px;
		right: 10px;
	}

	.facility-info {
		padding: 30px 20px;
	}

	.facility-info-grid {
		grid-template-columns: 1fr;
	}

	.pricing-cards {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.fees-table th {
		width: 120px;
		font-size: 13px;
		padding: 15px 10px;
	}

	.fees-table td {
		font-size: 13px;
		padding: 15px 10px;
	}

	.area-item {
		padding: 24px 20px;
	}

	.area-number {
		position: static;
		width: 42px;
		height: 42px;
		font-size: 20px;
		flex-shrink: 0;
	}

	.area-item-header {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 16px;
	}

	.area-item h3 {
		font-size: 18px;
		margin-bottom: 0;
	}

	.area-item-body {
		flex-direction: column;
		gap: 20px;
	}

	.area-item-photo {
		width: 100%;
	}

	.area-item-photo img {
		height: 180px;
		border-radius: 12px;
	}

	.flow-steps {
		flex-direction: column;
		align-items: center;
	}

	.flow-arrow {
		transform: rotate(90deg);
		font-size: 30px;
		margin: 20px 0;
		width: 100%;
		justify-content: center;
	}

	.flow-step {
		width: 100%;
		max-width: 500px;
	}

	.contact-phone {
		flex-direction: column;
		padding: 25px;
	}

	.contact-phone a {
		font-size: 30px;
	}

	.btn {
		padding: 18px 50px;
		font-size: 15px;
	}

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

	.overview-header {
		margin-bottom: 40px;
	}

	.overview-title {
		font-size: 28px;
	}

	.overview-slideshow {
		margin-bottom: 50px;
	}

	.slide-item {
		padding: 0 5px;
	}

	.slide-item img {
		height: 300px;
	}

	.facilities-title {
		font-size: 24px;
		margin-bottom: 30px;
	}

	.facilities-grid {
		gap: 15px;
		max-width: 100%;
	}

	.facility-item {
		padding: 20px 15px;
	}

	.facility-item i {
		font-size: 36px;
		margin-bottom: 10px;
	}

	.facility-name {
		font-size: 12px;
	}

	.overview-intro {
		margin-top: 50px;
	}

	.overview-subtitle {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.overview-text {
		font-size: 14px;
		line-height: 1.9;
	}

	.overview-details {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 40px;
	}

	.detail-item h4 {
		font-size: 16px;
		padding: 14px 25px;
	}

	.detail-item > p,
	.detail-item > .note {
		padding: 18px 25px;
		font-size: 14px;
	}

	.room-facilities h4 {
		font-size: 16px;
		padding: 14px 25px;
	}

	.room-facilities p {
		padding: 18px 25px;
		font-size: 14px;
	}

	.facility-info {
		margin-top: 50px;
	}

	.facility-info-title {
		font-size: 24px;
		margin-bottom: 30px;
	}

	.facility-info-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.info-box {
		padding: 20px;
	}

	.info-box h4 {
		font-size: 16px;
	}

	.info-box p {
		font-size: 14px;
	}

	.pricing {
		margin-top: 50px;
	}

	.pricing-title {
		font-size: 24px;
		margin-bottom: 30px;
	}

	.room-type-section {
		margin-bottom: 35px;
	}

	.room-type-title {
		font-size: 18px;
		margin-bottom: 16px;
	}

	.pricing-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		margin-bottom: 40px;
	}

	.pricing-card {
		padding: 30px 20px;
	}

	.pricing-card h5 {
		font-size: 18px;
	}

	.pricing-card .price {
		font-size: 40px;
	}

	.pricing-card .price span {
		font-size: 22px;
	}

	.other-fees,
	.initial-fees {
		padding: 25px;
		margin-top: 40px;
	}

	.other-fees h4,
	.initial-fees h4 {
		font-size: 19px;
		margin-bottom: 20px;
	}

	.fees-table th,
	.fees-table td {
		padding: 12px;
		font-size: 14px;
	}

	.fees-table th {
		width: 35%;
	}
}

@media (max-width: 640px) {
	.container {
		padding: 0 15px;
	}

	.header-inner {
		padding: 10px 0;
		padding-top: 70px;
	}
	
	.header-logo img {
		height: 40px;
	}
	
	.logo-text {
		font-size: 13px;
	}
	
	.nav-list {
		gap: 10px 15px;
	}
	
	.nav-en {
		font-size: 8px;
	}
	
	.nav-ja {
		font-size: 12px;
	}
	
	.header-link,
	.btn-request-header {
		padding: 8px 18px;
		font-size: 13px;
	}

	.hero {
		height: 450px;
	}

	.hero-content {
		padding: 30px 20px;
	}

	.hero-title {
		font-size: 26px;
	}

	.hero-subtitle {
		font-size: 16px;
	}

	.section-title {
		font-size: 24px;
	}

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

	.price {
		font-size: 36px;
	}

	.price span {
		font-size: 18px;
	}

	.contact-buttons {
		flex-direction: column;
		width: 100%;
	}

	.btn-contact {
		width: 100%;
		padding: 18px 30px;
	}

	.footer-container {
		justify-content: center;
		text-align: center;
	}
}

@media (max-width: 480px) {
	body {
		padding-bottom: 65px;
	}
	/* .header-logo {
		padding: 12px 16px;
	} */
	
	.header-logo img {
		height: 32px;
	}
	
	.logo-text {
		font-size: 11px;
	}
	.header-buttons-pc {
		padding: 10px 12px;
	}
	
	.header-buttons-pc .header-link,
	.header-buttons-pc .btn-request-header {
		font-size: 13px;
		padding: 12px 8px;
	}
	.header-nav {
		width: 240px;
	}
	
	/* ヒーローセクション */
	.hero {
		height: 100vh;
		min-height: 550px;
		max-height: 740px;
		padding-top: 60px;
		border: 14px solid #fff;
	}
	
	/* 装飾イラストをさらに小さく */
	.overview-details::before {
		width: 80px;
		height: 80px;
		top: -15px;
		right: 5px;
	}
	
	.room-facilities::before {
		width: 80px;
		height: 80px;
		top: -20px;
		left: 5px;
	}
	
	.facility-info::after {
		width: 80px;
		height: 80px;
		bottom: 5px;
		right: 5px;
	}
	
	.pricing::before {
		width: 120px;
		height: 85px;
		top: 25px;
		left: 2px;
	}
	
	.pricing::after {
		width: 55px;
		height: 120px;
		bottom: 60px;
		right: 5px;
	}
	
	/* アニメーションを無効化してSP配置を優先 */
	.hero-location,
	.hero-building,
	.hero-badge,
	.hero-title-img,
	.hero-subtitle,
	.hero-people {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	
	/* h1タイトル - 建物画像の上 */
	.hero-location {
		position: absolute !important;
		top: 46% !important;
		bottom: auto !important;
		left: 4% !important;
		right: auto !important;
		font-size: 38px !important;
		text-align: left;
		white-space: nowrap;
		z-index: 2;
		padding: 0 15px;
	}

	/* 建物画像 - 下部に配置 */
	.hero-building {
		position: absolute !important;
		left: 50% !important;
		top: 10% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		width: 95% !important;
		max-width: 600px;
		height: auto;
	}
	
	.hero-building img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	
	/* ワッペン - 右下に配置 */
	.hero-badge {
		position: absolute !important;
		bottom: 40px !important;
		right: 15px !important;
		top: auto !important;
		left: auto !important;
		width: 100px !important;
		z-index: 3;
	}
	
	/* タイトル画像 */
	.hero-title-img {
		position: absolute !important;
		top: 25% !important;
		left: 5% !important;
		bottom: auto !important;
		right: auto !important;
		transform: none !important;
		max-width: 200px !important;
		z-index: 2;
	}
	
	/* サブタイトル - 上部 */
	.hero-subtitle {
		position: absolute !important;
		top: 15px !important;
		left: 5% !important;
		bottom: auto !important;
		right: auto !important;
		font-size: 24px !important;
		z-index: 1.6;
		width: auto;
		max-width: 96%;
		padding: 0 15px;
	}
	
	.dot-above::before {
		font-size: 35%;
		right: 11%;
	}
	
	/* 人物画像 - 右側 */
	.hero-people {
		position: absolute !important;
		top: 18% !important;
		right: 0 !important;
		bottom: auto !important;
		left: auto !important;
		width: 250px !important;
		max-width: 50%;
		z-index: 2;
	}

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

	.features-title {
		font-size: 24px;
	}

	.feature-item,
	.feature-item--reverse {
		padding: 40px 5%;
		gap: 25px;
	}

	.feature-number {
		font-size: 10px;
		padding: 5px 10px;
		margin-bottom: 14px;
	}

	.feature-heading {
		font-size: 20px;
		margin-bottom: 16px;
		padding-left: 14px;
		border-left-width: 3px;
	}

	.feature-description {
		font-size: 13px;
		line-height: 1.8;
	}

	.feature-note {
		font-size: 12px;
		margin-top: 12px;
	}

	.overview-section {
		padding: 40px 0;
	}

	.overview-title {
		font-size: 24px;
	}

	.slide-item img {
		height: 250px;
	}

	.overview-slideshow .slick-prev,
	.overview-slideshow .slick-next {
		width: 40px;
		height: 40px;
	}

	.overview-slideshow .slick-prev:before,
	.overview-slideshow .slick-next:before {
		font-size: 40px;
	}

	.facilities-title {
		font-size: 22px;
		margin-bottom: 25px;
	}

	.facilities-grid {
		gap: 12px;
	}

	.facility-item {
		padding: 18px 12px;
	}

	.facility-item i {
		font-size: 32px;
		margin-bottom: 8px;
	}

	.facility-name {
		font-size: 11px;
	}

	.overview-intro {
		margin-top: 40px;
	}

	.overview-subtitle {
		font-size: 22px;
		margin-bottom: 18px;
	}

	.overview-text {
		font-size: 13px;
	}

	.overview-details {
		margin-top: 35px;
		gap: 18px;
	}

	.detail-item h4 {
		font-size: 15px;
		padding: 12px 20px;
	}

	.detail-item > p,
	.detail-item > .note {
		padding: 15px 20px;
		font-size: 13px;
	}

	.room-facilities h4 {
		font-size: 15px;
		padding: 12px 20px;
	}

	.room-facilities p {
		padding: 15px 20px;
		font-size: 13px;
	}

	.facility-info {
		margin-top: 40px;
	}

	.facility-info-title {
		font-size: 22px;
		margin-bottom: 25px;
	}

	.facility-info-grid {
		gap: 18px;
	}

	.info-box {
		padding: 18px;
	}

	.info-box h4 {
		font-size: 15px;
		margin-bottom: 12px;
		padding-bottom: 10px;
	}

	.info-box p {
		font-size: 13px;
	}

	.pricing {
		margin-top: 40px;
	}

	.pricing-title {
		font-size: 22px;
		margin-bottom: 25px;
	}

	.room-type-section {
		margin-bottom: 30px;
	}

	.room-type-title {
		font-size: 17px;
		margin-bottom: 14px;
	}

	.pricing-cards {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-bottom: 35px;
	}

	.pricing-card {
		padding: 25px 18px;
	}

	.pricing-card h5 {
		font-size: 17px;
		margin-bottom: 16px;
	}

	.pricing-card .price {
		font-size: 36px;
	}

	.pricing-card .price span {
		font-size: 20px;
	}

	.pricing-card .price-label {
		font-size: 13px;
	}

	.other-fees,
	.initial-fees {
		padding: 20px;
		margin-top: 35px;
	}

	.other-fees h4,
	.initial-fees h4 {
		font-size: 18px;
		margin-bottom: 18px;
	}

	.fees-table th,
	.fees-table td {
		padding: 10px;
		font-size: 13px;
	}

	.fees-table th {
		width: 32%;
	}

	.other-fees .note,
	.initial-fees .note {
		font-size: 12px;
	}

	.contact {
		padding: 50px 0;
	}

	.contact-title {
		font-size: 48px;
	}

	.contact-subtitle {
		font-size: 15px;
		margin-bottom: 40px;
	}

	.contact-content {
		gap: 35px;
	}

	.contact-phone i {
		font-size: 28px;
	}

	.contact-phone a {
		font-size: 36px;
	}

	.contact-hours {
		font-size: 13px;
	}

	.contact-buttons {
		flex-direction: column;
	}

	.btn-contact {
		width: 100%;
		min-width: auto;
		padding: 16px 30px;
		font-size: 15px;
	}

	.footer-container {
		flex-direction: column;
		gap: 15px;
	}

	.footer-copyright,
	.footer-link {
		font-size: 13px;
	}
}

@media (max-width: 375px) {
	.hero {
		height: 100vh;
		min-height: 550px;
	}
	
	.hero-subtitle {
		font-size: 16px;
	}
	
	.hero-title-img {
		bottom: 280px;
		max-width: 140px;
	}
	
	.hero-people {
		bottom: 280px;
		width: 200px;
	}
	
	.hero-location {
		bottom: 160px;
		font-size: 34px;
	}

	.contact-title {
		font-size: 42px;
	}

	.contact-phone a {
		font-size: 32px;
	}

	.btn-contact {
		padding: 15px 25px;
		font-size: 14px;
	}
}

.header-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 998;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.header-overlay.active {
	display: block;
	opacity: 1;
}

/* ========================================
	 AREA INFORMATION - 地図
========================================= */

.area-map {
	margin: 50px 0;
	text-align: center;
	overflow: hidden;
	border-radius: 12px;
	/* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
}

.area-map img {
	width: 100%;
	height: auto;
	display: block;
}

/* ========================================
   フォトギャラリー（グリッド一覧）
========================================= */
.photo-gallery {
	margin: 50px 0 40px;
}

.photo-gallery-title {
	font-size: 22px;
	font-weight: 700;
	color: #5D4037;
	text-align: center;
	margin-bottom: 24px;
}

.photo-gallery-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.photo-gallery-item {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	cursor: pointer;
}

.photo-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s, opacity 0.3s;
}

.photo-gallery-item:hover img {
	transform: scale(1.08);
	opacity: 0.85;
}

/* ========================================
   フォトギャラリー モーダル
========================================= */
.gallery-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	align-items: center;
	justify-content: center;
}

.gallery-modal.is-open {
	display: flex;
}

.gallery-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.gallery-modal-close {
	position: absolute;
	top: 20px;
	right: 24px;
	z-index: 3;
	background: none;
	border: none;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.3s;
}

.gallery-modal-close:hover {
	background: rgba(255, 255, 255, 0.15);
}

.gallery-modal-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	color: #fff;
	font-size: 22px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s;
}

.gallery-modal-arrow:hover {
	background: rgba(255, 255, 255, 0.28);
}

.gallery-modal-prev {
	left: 20px;
}

.gallery-modal-next {
	right: 20px;
}

.gallery-modal-img-wrap {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 60px 100px;
}

.gallery-modal-img {
	max-width: calc(100vw - 200px);
	max-height: calc(100vh - 120px);
	object-fit: contain;
	border-radius: 6px;
	user-select: none;
}

.gallery-modal-counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	letter-spacing: 2px;
}

/* ---- SP対応 ---- */
@media (max-width: 768px) {
	.photo-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	.photo-gallery-item {
		border-radius: 4px;
	}

	.gallery-modal-arrow {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	.gallery-modal-prev {
		left: 8px;
	}

	.gallery-modal-next {
		right: 8px;
	}

	.gallery-modal-img-wrap {
		padding: 56px 52px;
	}

	.gallery-modal-img {
		max-width: calc(100vw - 104px);
		max-height: calc(100vh - 112px);
	}

	.gallery-modal-close {
		top: 12px;
		right: 12px;
	}
}

@media (max-width: 480px) {
	.photo-gallery-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
	}

	.gallery-modal-img-wrap {
		padding: 48px 44px;
	}

	.gallery-modal-img {
		max-width: calc(100vw - 88px);
		max-height: calc(100vh - 96px);
	}
}

/* ========================================
   紹介動画（インライン埋め込み + ボタン）
========================================= */
.video-inline-wrap {
	margin: 50px auto 10px;
	max-width: 800px;
}

.video-inline-player {
	position: relative;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.video-inline-player video {
	display: block;
	width: 100%;
	height: auto;
}

.video-trigger-wrap {
	text-align: center;
	margin: 20px 0 0;
}

.video-trigger {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #5D4037;
	color: #fff;
	border: none;
	border-radius: 50px;
	padding: 18px 44px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background 0.3s, transform 0.3s;
}

.video-trigger:hover {
	background: #3E2723;
	transform: scale(1.04);
}

.video-trigger-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #FFD700;
	color: #5D4037;
	border-radius: 50%;
	font-size: 16px;
}

/* ========================================
   動画モーダル
========================================= */
.video-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	align-items: center;
	justify-content: center;
}

.video-modal.is-open {
	display: flex;
}

.video-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.video-modal-content {
	position: relative;
	width: 90%;
	max-width: 960px;
	z-index: 1;
}

.video-modal-close {
	position: absolute;
	top: -48px;
	right: -8px;
	background: none;
	border: none;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 12px;
	transition: opacity 0.3s;
}

.video-modal-close:hover {
	opacity: 0.7;
}

.video-modal-player {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	background: #000;
}

/* SP対応 */
@media (max-width: 768px) {
	.video-inline-wrap {
		margin: 30px auto 10px;
	}

	.video-inline-player {
		border-radius: 8px;
	}

	.video-trigger {
		padding: 12px 28px;
		font-size: 14px;
		gap: 10px;
	}

	.video-trigger-icon {
		width: 34px;
		height: 34px;
		font-size: 12px;
	}

	.video-modal-content {
		width: 95%;
	}

	.video-modal-close {
		top: -42px;
		right: 0;
		font-size: 34px;
	}
}