/* =========================================================================
   里山の宿 やまあかり  —  架空民泊ポートフォリオ (静的版)
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
	--bg:        #fbf8f3;
	--surface:   #ffffff;
	--ink:       #2b2723;
	--ink-soft:  #6b6157;
	--line:      #e7ddcf;
	--accent:    #7d6a54;
	--accent-ink:#ffffff;
	--radius:    14px;
	--shadow:    0 10px 30px rgba(43, 39, 35, .08);
	--maxw:      1120px;
	--gap:       clamp(16px, 3vw, 32px);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
	font-feature-settings: "palt";
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

.container {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: clamp(16px, 5vw, 40px);
}

/* --- ボタン / リンク -------------------------------------------------- */

.btn {
	display: inline-block;
	padding: .9em 2em;
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font: inherit;
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { opacity: .9; transform: translateY(-1px); }
.btn--lg { padding: 1.05em 2.6em; font-size: 1.05rem; }
.btn--sm { padding: .55em 1.2em; font-size: .85rem; }
.btn--ghost {
	background: transparent;
	color: var(--accent);
	box-shadow: inset 0 0 0 1.5px var(--accent);
}

.textlink { color: var(--accent); font-weight: 600; text-decoration: none; }
.textlink:hover { text-decoration: underline; }

/* --- サイトヘッダー ------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 248, 243, .88);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.site-header__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding: 14px clamp(16px, 5vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.site-header__brand {
	font-weight: 800;
	letter-spacing: .08em;
	text-decoration: none;
	font-size: 1.05rem;
}
.site-nav {
	display: flex;
	align-items: center;
	gap: clamp(12px, 3vw, 28px);
	font-size: .9rem;
}
.site-nav a { text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--accent); }

@media (max-width: 560px) {
	.site-nav { gap: 14px; font-size: .82rem; }
	.site-nav .nav-hide-sm { display: none; }
}

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

.section { padding-block: clamp(48px, 8vw, 96px); }
.section:nth-of-type(even) { background: var(--surface); }
.section__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: .04em;
	margin: 0 0 .5em;
}
.section__lead { color: var(--ink-soft); margin: 0 0 2em; }
.section__more { margin-top: 2.5em; }

/* --- ヒーロー ----------------------------------------------------- */

.hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(80vh, 700px);
	padding-block: 90px;
	text-align: center;
	color: #fff;
	background-color: #574a39;
	background-image:
		linear-gradient(180deg, rgba(43,39,35,.34), rgba(43,39,35,.62)),
		url("/assets/img/hero.jpg"),
		radial-gradient(120% 120% at 72% 18%, #d9c4a6, #8d7a62 58%, #574a39);
	background-size: cover;
	background-position: center;
}
.hero__inner { max-width: 640px; padding-inline: 20px; }
.hero__kicker {
	letter-spacing: .34em;
	font-size: .78rem;
	margin: 0 0 1.4em;
	opacity: .92;
}
.hero__title {
	font-size: clamp(2rem, 6vw, 3.6rem);
	letter-spacing: .08em;
	margin: 0 0 .5em;
	font-weight: 800;
}
.hero__lead { font-size: clamp(1rem, 2.2vw, 1.15rem); margin: 0 0 2em; }

/* --- 検索ボックス ------------------------------------------------- */

.search { position: relative; margin-top: -52px; padding-bottom: 8px; }
.search__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: clamp(20px, 4vw, 36px);
}
.search__inner h2 { font-size: 1.1rem; margin: 0 0 1em; letter-spacing: .04em; }

.bookbox__note { font-size: .8rem; color: var(--ink-soft); margin: 0 0 1em; }
.bookbox__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.bookbox label {
	display: flex; flex-direction: column; gap: 4px;
	font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}
.bookbox input, .bookbox select {
	padding: .6em .8em;
	border: 1px solid var(--line);
	border-radius: 8px;
	font: inherit;
	background: #fff;
	min-width: 150px;
}

/* --- グリッド / カード -------------------------------------------- */

.grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
/* お部屋は2列固定 (4室が3+1で割れて見栄えが悪くなるのを防ぐ) */
.grid--rooms { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 680px) { .grid--rooms { grid-template-columns: 1fr; } }
.grid--rooms .card__media { aspect-ratio: 16 / 10; }

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card a.card__link { text-decoration: none; color: inherit; display: block; }
.card__body { padding: 18px 20px 22px; }
.card__title { font-size: 1.15rem; margin: 0 0 .4em; }
.card__excerpt { font-size: .9rem; color: var(--ink-soft); margin: 0 0 1em; }
.card__meta {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 6px 14px;
	font-size: .82rem; color: var(--ink-soft);
}
.card__price { margin: .8em 0 0; font-size: .9rem; color: var(--ink-soft); }
.card__price b { font-size: 1.3rem; font-weight: 800; color: var(--ink); }

/* --- 写真プレースホルダ (CSS のみ / 画像差し替え前提) ------------- */

.photo {
	position: relative;
	background-color: #cbb59a;
	background-image: var(--grain);
	background-size: cover;
	background-position: center;
}
.photo::after {
	content: attr(data-label);
	position: absolute;
	left: 10px; bottom: 8px;
	font-size: .7rem;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .82);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.card__media { aspect-ratio: 4 / 3; }
/* 小さな隅ラベルはギャラリーのみ。カード/ヒーローでは見出しと重複するため非表示 */
.card__media::after,
.room-hero::after { content: none; }

/* 写真。読み込めない場合は2層目のグラデーションにフォールバック */
.ph-tsubaki { background-color: #8f3b3b; background-image: url("/assets/img/tsubaki-1.jpg"), linear-gradient(135deg, #8f3b3b, #c9705a); }
.ph-nara    { background-color: #8a6c43; background-image: url("/assets/img/nara-1.jpg"),    linear-gradient(135deg, #8a6c43, #d8b98a); }
.ph-kuwa    { background-color: #63665f; background-image: url("/assets/img/kuwa-1.jpg"),    linear-gradient(135deg, #63665f, #a9a596); }
.ph-keyaki  { background-color: #566748; background-image: url("/assets/img/keyaki-1.jpg"),  linear-gradient(135deg, #566748, #a6b985); }
.ph-meal-a  { background-color: #a85f34; background-image: url("/assets/img/meal-a.jpg"),    linear-gradient(135deg, #a85f34, #e0a86e); }
.ph-meal-b  { background-color: #6f4a2b; background-image: url("/assets/img/meal-b.jpg"),    linear-gradient(135deg, #6f4a2b, #b98c5c); }
.ph-meal-c  { background-color: #456064; background-image: url("/assets/img/meal-c.jpg"),    linear-gradient(135deg, #456064, #8fb2b0); }

/* ギャラリーは1室あたり3枚を配置 (1,2,3,2,3 の順で繰り返し) */
.gallery__item.ph-tsubaki:nth-child(2), .gallery__item.ph-tsubaki:nth-child(4) { background-image: url("/assets/img/tsubaki-2.jpg"), linear-gradient(135deg, #8f3b3b, #c9705a); }
.gallery__item.ph-tsubaki:nth-child(3), .gallery__item.ph-tsubaki:nth-child(5) { background-image: url("/assets/img/tsubaki-3.jpg"), linear-gradient(135deg, #8f3b3b, #c9705a); }
.gallery__item.ph-nara:nth-child(2),   .gallery__item.ph-nara:nth-child(4)   { background-image: url("/assets/img/nara-2.jpg"),   linear-gradient(135deg, #8a6c43, #d8b98a); }
.gallery__item.ph-nara:nth-child(3),   .gallery__item.ph-nara:nth-child(5)   { background-image: url("/assets/img/nara-3.jpg"),   linear-gradient(135deg, #8a6c43, #d8b98a); }
.gallery__item.ph-kuwa:nth-child(2),   .gallery__item.ph-kuwa:nth-child(4)   { background-image: url("/assets/img/kuwa-2.jpg"),   linear-gradient(135deg, #63665f, #a9a596); }
.gallery__item.ph-kuwa:nth-child(3),   .gallery__item.ph-kuwa:nth-child(5)   { background-image: url("/assets/img/kuwa-3.jpg"),   linear-gradient(135deg, #63665f, #a9a596); }
.gallery__item.ph-keyaki:nth-child(2), .gallery__item.ph-keyaki:nth-child(4) { background-image: url("/assets/img/keyaki-2.jpg"), linear-gradient(135deg, #566748, #a6b985); }
.gallery__item.ph-keyaki:nth-child(3), .gallery__item.ph-keyaki:nth-child(5) { background-image: url("/assets/img/keyaki-3.jpg"), linear-gradient(135deg, #566748, #a6b985); }

/* --- お部屋詳細 ------------------------------------------------- */

.room-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(62vh, 540px);
	text-align: center;
	color: #fff;
	overflow: hidden;
}
.room-hero::before {
	content: "";
	position: absolute; inset: 0;
	background-image: var(--grain), linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
	background-color: inherit;
	z-index: 0;
}
.room-hero > * { position: relative; z-index: 1; }
.room-hero__inner { padding: 40px 20px; }
.room-hero__title {
	font-size: clamp(1.8rem, 5vw, 3rem);
	letter-spacing: .06em;
	margin: 0 0 .6em;
	font-weight: 800;
}
.room-hero__facts {
	list-style: none;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 8px 20px;
	padding: 0; margin: 0 0 1.8em;
	font-size: .95rem; letter-spacing: .04em;
}
.room-hero__facts li::before { content: "・"; opacity: .6; margin-right: .2em; }

.room-body > .section {
	background: transparent;
	border-bottom: 1px solid var(--line);
	padding-block: clamp(36px, 6vw, 64px);
}
.room-body > .section:last-child { border-bottom: 0; }
.room-desc { font-size: 1.05rem; }
.room-desc p { margin: 0 0 1.2em; }

/* --- 部屋の様子 ギャラリー ------------------------------------- */

.gallery {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.gallery__item {
	display: block;
	aspect-ratio: 4 / 3;
	border: 0;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: transform .3s ease;
}
.gallery__item:hover { transform: scale(1.03); }

/* --- 設備・特徴 --------------------------------------------- */

.features {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: 10px 24px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.features li { position: relative; padding-left: 1.6em; }
.features li::before {
	content: "✓";
	position: absolute; left: 0;
	color: var(--accent); font-weight: 800;
}

/* --- 予約セクション --------------------------------------- */

.booking { scroll-margin-top: 76px; }
.booking__widget {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(20px, 4vw, 32px);
}
.booking__widget iframe { width: 100%; min-height: 900px; border: 0; border-radius: 10px; }

/* --- ページ見出し (一覧) --------------------------------- */

.pagehead { padding-block: clamp(40px, 7vw, 72px) 0; }
.pagehead__title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .3em; }
.pagehead__lead { color: var(--ink-soft); margin: 0; }

/* --- フッター ------------------------------------------- */

.site-footer {
	background: #2b2723;
	color: #d8cfc2;
	padding-block: clamp(40px, 6vw, 64px);
	font-size: .88rem;
}
.site-footer__inner {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: clamp(16px, 5vw, 40px);
	display: grid;
	gap: 10px;
}
.site-footer__brand { font-weight: 800; letter-spacing: .1em; color: #fff; font-size: 1rem; margin: 0; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.site-footer nav a { color: #d8cfc2; text-decoration: none; }
.site-footer nav a:hover { color: #fff; }

/* --- ライトボックス ----------------------------------- */

.lb {
	position: fixed; inset: 0; z-index: 9999;
	display: none; place-items: center;
	padding: 4vmin;
	background: rgba(20, 17, 14, .92);
}
.lb.is-open { display: grid; }
.lb__img {
	width: min(1100px, 92vw);
	height: min(80vh, 800px);
	background-size: cover;
	background-position: center;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lb__btn {
	position: absolute;
	background: rgba(255, 255, 255, .12);
	color: #fff; border: 0;
	width: 48px; height: 48px;
	border-radius: 50%;
	font-size: 1.4rem; cursor: pointer;
}
.lb__btn--close { top: 3vmin; right: 3vmin; }
.lb__btn--prev { left: 3vmin; top: 50%; transform: translateY(-50%); }
.lb__btn--next { right: 3vmin; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lb__btn--prev, .lb__btn--next { display: none; } }

/* --- ユーティリティ ----------------------------------- */

.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}