@charset "UTF-8";
/* ============================================================
   maison owl ｜ PC / タブレット用スタイル（768px以上で適用）
   ※スマートフォンは style_sd.css が単体で完結
   ============================================================ */

:root {
	/* maison owl ブランドカラー（awb palette）
     espresso #26180e / taupe #70685d / cream #eaddce */
	--bg: #eaddce; /* awb-color-4 */
	--bg-2: #e1d4c1; /* creamを一段深く */
	--dark: #26180e; /* awb-color-3 */
	--text: #2c2015; /* espresso寄りの本文 */
	--muted: #70685d; /* awb-color-2 */
	--line: #cdbda6;
	--accent: #7d6f5b; /* taupe-brown */
	--serif: "Cormorant Garamond", serif;
	--mincho: "Shippori Mincho", serif;
	--sans: "Zen Kaku Gothic New", sans-serif;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 84px;
} /* 固定ヘッダー分だけアンカー位置を下げる */
body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: 0.04em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
a {
	color: inherit;
	text-decoration: none;
}
.en {
	font-family: var(--serif);
	letter-spacing: 0.18em;
}

/* ---------- Header（固定・常に背景色あり） ---------- */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 48px;
	background: rgba(38, 24, 14, 0.72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(234, 221, 206, 0.1);
	transition:
		background 0.5s ease,
		padding 0.5s ease;
}
header.scrolled {
	background: rgba(38, 24, 14, 0.95);
	padding: 15px 48px;
}
header .logo {
	display: inline-flex;
	align-items: center;
	font-family: var(--serif);
	font-size: 24px;
	letter-spacing: 0.22em;
	color: #f1ede4;
	text-transform: lowercase;
	font-weight: 400;
}
header .logo img {
	display: block;
	height: 36px;
	width: auto;
}
header nav {
	display: flex;
	gap: 34px;
	align-items: center;
}
header nav a {
	font-family: var(--serif);
	font-size: 13px;
	letter-spacing: 0.16em;
	color: #f1ede4;
	text-transform: lowercase;
	opacity: 0.85;
	transition: opacity 0.3s;
}
header nav a:hover {
	opacity: 0.5;
}
/* reservation枠：一休ロゴ（白） */
header .nav-ikyu {
	display: inline-flex;
	align-items: center;
	opacity: 1;
}
header .nav-ikyu img {
	display: block;
	height: 17px;
	width: auto;
}
header .nav-ikyu:hover {
	opacity: 0.6;
}

/* ---------- Hero / TOP（洞窟アパーチャー演出） ----------
   中央の小さな光の輪から clip-path の円が広がり全画面を現す。
   暗く・拡大した映像がbrightnessと共に浮かび上がり、ヴィネットで洞窟の囲まれ感を出す。 */
.hero {
	position: relative;
	height: 100vh;
	width: 100%;
	background: #1a110a;
	overflow: hidden;
}
.heroSwiper {
	height: 100%;
	width: 100%;
	clip-path: circle(9% at 50% 54%);
	animation: caveAperture 2.8s cubic-bezier(0.62, 0, 0.2, 1) forwards;
}
.heroSwiper .swiper-slide {
	position: relative;
}
.heroSwiper .swiper-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.05) 35%,
		rgba(0, 0, 0, 0.5) 100%
	);
}
/* 各スライドをズーム：アクティブになるたびに再生（1〜3枚目すべて同じ動き） */
.heroSwiper .swiper-slide img {
	transform: scale(1);
}
.heroSwiper .swiper-slide-active img {
	animation: heroKenburns 6s ease-out both;
}
/* 洞窟の囲まれ感（周囲を落とすヴィネット・常時） */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	background: radial-gradient(
		125% 95% at 50% 46%,
		transparent 42%,
		rgba(0, 0, 0, 0.6) 100%
	);
	box-shadow: inset 0 0 200px 40px rgba(0, 0, 0, 0.55);
}
/* 初回の暗→明（洞窟から光が差すイメージ）。filterではなくオーバーレイのopacityのみで表現し、
   テキストに再描画のチラつきを起こさない。 */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: #0c0805;
	animation: heroIntro 2.8s ease-out forwards;
}
@keyframes caveAperture {
	from {
		clip-path: circle(9% at 50% 54%);
	}
	to {
		clip-path: circle(125% at 50% 54%);
	}
}
@keyframes heroKenburns {
	from {
		transform: scale(1.22);
	}
	to {
		transform: scale(1);
	}
}
@keyframes heroIntro {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.hero-copy {
	position: absolute;
	z-index: 7;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	width: 90%;
}
.hero-copy .mark {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(40px, 9vw, 110px);
	line-height: 1;
	text-transform: lowercase;
	letter-spacing: 0.28em;
	white-space: nowrap;
	opacity: 0;
}
.hero-copy .hero-title {
	margin-top: 30px;
	font-family: var(--mincho);
	font-weight: 500;
	font-size: clamp(17px, 2vw, 25px);
	letter-spacing: 0.2em;
	line-height: 1.8;
	color: #fff;
	opacity: 0;
}
.hero-copy .sub {
	margin-top: 18px;
	font-family: var(--mincho);
	font-weight: 400;
	font-size: clamp(12px, 1.4vw, 15px);
	letter-spacing: 0.42em;
	opacity: 0;
}
/* Webフォント確定後（.fonts-ready）に開始。letter-spacingは動かさず、
   レイアウトに影響しない opacity＋translateY のみでフェードイン＝上下の跳ね無し。 */
.fonts-ready .hero-copy .mark {
	animation: fadeUp 1.6s ease 1.5s both;
}
.fonts-ready .hero-copy .hero-title {
	animation: fadeUp 1.6s ease 2.1s both;
}
.fonts-ready .hero-copy .sub {
	animation: fadeUp 1.6s ease 2.5s both;
}
@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes fadeInOnly {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.scroll-ind {
	position: absolute;
	bottom: 34px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 7;
	color: #fff;
	font-family: var(--serif);
	font-size: 11px;
	letter-spacing: 0.3em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	opacity: 0;
}
.fonts-ready .scroll-ind {
	animation: fadeInOnly 1.4s ease 2.7s both;
}
.scroll-ind span {
	width: 1px;
	height: 52px;
	background: rgba(255, 255, 255, 0.7);
	animation: scLine 2s ease-in-out infinite;
	animation-delay: 2.9s;
}
@keyframes scLine {
	0%,
	100% {
		transform: scaleY(0.3);
		transform-origin: top;
		opacity: 0.4;
	}
	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

/* ---------- 共通レイアウト ---------- */
section {
	position: relative;
}
.wrap {
	width: 100%;
	margin: 0 auto;
  padding: 0 7.25vw;
}
.about .wrap {
	width: 100%;
	margin: 0 auto;
  padding: 0 0 0 7.25vw;
}

.eyebrow {
	font-family: var(--serif);
	font-size: 13px;
	letter-spacing: 0.34em;
	color: var(--accent);
	text-transform: uppercase;
	margin-bottom: 26px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.eyebrow::before {
	content: "";
	width: 42px;
	height: 1px;
	background: var(--accent);
}
.sec-title {
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(34px, 5vw, 62px);
	line-height: 1.1;
	letter-spacing: 0.06em;
	text-transform: lowercase;
}

/* ---------- About ---------- */
.about {
	padding: clamp(90px, 14vh, 170px) 0;
}
.about-grid {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: 64px;
	align-items: center;
}
.about .sec-title {
	font-family: var(--mincho);
	font-weight: 500;
	font-size: clamp(24px, 3vw, 36px);
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: none;
}
.about-lead {
	font-family: var(--mincho);
	font-weight: 500;
	font-size: clamp(15px, 1.5vw, 19px);
	line-height: 2;
	letter-spacing: 0.05em;
	margin: 24px 0 26px;
}
.about-body {
	font-family: var(--mincho);
	font-weight: 400;
	font-size: 14px;
	line-height: 2.25;
	color: #4a3f31;
}
.about-img {
	position: relative;
	height: 660px;
	overflow: hidden;
}
.about-img::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
	pointer-events: none;
	z-index: 2;
}
.about-img img {
	object-position: left;
	transition: transform 1.2s ease;
}
.about-img:hover img {
	transform: scale(1.05);
}

/* ---------- Topics ---------- */
.topics {
	padding: clamp(70px, 10vh, 120px) 0;
	background: var(--bg-2);
}
.topics .head {
	text-align: center;
	margin-bottom: 70px;
}
.topics .eyebrow {
	justify-content: center;
}
.topics .eyebrow::before {
	display: none;
}
.topic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	margin-bottom: 96px;
}
.topic:last-child {
	margin-bottom: 0;
}
.topic:nth-child(even) .t-img {
	order: 2;
}
.t-img {
	height: 460px;
	overflow: hidden;
}
.t-img img {
	transition: transform 1.4s ease;
}
.topic:hover .t-img img {
	transform: scale(1.05);
}
.t-num {
	font-family: var(--serif);
	font-size: 15px;
	letter-spacing: 0.3em;
	color: var(--accent);
	margin-bottom: 20px;
}
.t-title {
	font-family: var(--mincho);
	font-weight: 600;
	font-size: clamp(21px, 2.6vw, 30px);
	line-height: 1.6;
	margin-bottom: 24px;
}
.t-text {
	font-family: var(--mincho);
	font-weight: 400;
	font-size: 15px;
	line-height: 2.25;
	color: #4a3f31;
}

/* ---------- Stay Experience ---------- */
.stay {
	padding: clamp(90px, 14vh, 170px) 0;
}
.stay .head {
	text-align: center;
	margin-bottom: 64px;
}
.stay .eyebrow {
	justify-content: center;
}
.stay .eyebrow::before {
	display: none;
}
.stay-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}
.plan {
	background: #fff;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.plan-img {
	height: 340px;
	overflow: hidden;
	position: relative;
}
.plan-img img {
	transition: transform 1.2s ease;
}
.plan:hover .plan-img img {
	transform: scale(1.06);
}
.plan-body {
	padding: 40px 40px 46px;
}
.plan .no {
	font-family: var(--serif);
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--accent);
}
.plan h3 {
	font-family: var(--mincho);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.55;
	margin: 14px 0 6px;
}
.plan .en-sub {
	font-family: var(--serif);
	font-size: 15px;
	letter-spacing: 0.14em;
	color: var(--muted);
	margin-bottom: 22px;
	font-style: italic;
}
.plan p.desc {
	font-family: var(--mincho);
	font-size: 14px;
	line-height: 2.2;
	color: #4a3f31;
	margin-bottom: 22px;
}
.plan .meal {
	font-family: var(--mincho);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: #6a6154;
	border-top: 1px solid var(--line);
	padding-top: 20px;
}

/*料金ボタン*/
.plan .btn {
  background-color: transparent;
  width: 100%;
  letter-spacing: 0;
  font-family: 'HiraMinProN-W3',YuGothic, 'Yu Gothic', 游ゴシック体, '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS ゴシック', 'MS Gothic', sans-serif;
}
.plan .btn .plan_rate{
  font-size: 1.15vw;
  display: block;
  width: 100%;
  padding: 8px 0; 
  text-align: center;
  color: var(--bg-2) !important;
  text-decoration: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  letter-spacing: 0.02em;
  background: var(--dark);
}
.plan .btn .plan_rate:hover {
  opacity: 0.6;
  color: var(--bg) !important;
   background: var(--dark);
}
.plan .btn .plan_rate b {
  font-size: 1.35vw;
  line-height: 1.4;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.plan .btn .off {
  display: block;
}
.plan .btn .shousai{
  font-size: 1.15vw !important;
  display: block;
}
.plan .btn .shousai .ll{
  display: none !important;
}
.plan .btn .shousai .s{
  font-size: 1.15vw !important;
}
.plan .btn .after_point_rate,.plan_rate .off b {
  font-size: 1.55vw !important;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}





/* ---------- Gallery ---------- */
.gallery {
	padding: clamp(70px, 10vh, 120px) 0 clamp(90px, 12vh, 140px);
	background: var(--dark);
	color: #fff;
	overflow: hidden;
}
.gallery .head {
	text-align: center;
	margin-bottom: 56px;
}
.gallery .eyebrow {
	justify-content: center;
	color: #c9bda3;
}
.gallery .eyebrow::before {
	display: none;
}
.gallery .sec-title {
	color: #f1ede4;
}
.g-swiper {
	padding: 0;
	position: relative;
}
.g-swiper .swiper-slide {
	width: clamp(260px, 40vw, 520px);
	height: clamp(300px, 46vh, 420px);
	overflow: hidden;
	opacity: 0.45;
	transition: opacity 0.6s ease;
}
.g-swiper .swiper-slide-active,
.g-swiper .swiper-slide-next {
	opacity: 1;
}
.g-swiper .swiper-slide img {
	transition: transform 1.4s ease;
}
.g-swiper .swiper-slide:hover img {
	transform: scale(1.05);
}
/* ページネーション（ドット）：画像の上にオーバーレイ（下端から40px上） */
.g-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}
.g-pagination .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	opacity: 1;
	margin: 0 !important;
	cursor: pointer;
	transition:
		background 0.3s ease,
		transform 0.3s ease;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
}
.g-pagination .swiper-pagination-bullet-active {
	background: #fff;
	transform: scale(1.3);
}
.g-nav {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 44px;
}
.g-nav button {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	cursor: pointer;
	font-family: var(--serif);
	font-size: 18px;
	transition: all 0.35s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.g-nav button:hover {
	background: #fff;
	color: var(--dark);
}
/* Photography Credits（右下にさりげなく配置） */
.g-credits {
	position: absolute;
	right: clamp(24px, 5vw, 64px);
	bottom: clamp(28px, 5vh, 56px);
	z-index: 10;
	text-align: left;
	color: #c9bda3;
}
.g-credits-ttl {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.14em;
	color: #f1ede4;
	margin-bottom: 8px;
}
.g-credits ul {
	list-style: none;
	font-size: 12px;
	line-height: 1.85;
	letter-spacing: 0.04em;
}
.g-credits li {
	position: relative;
	padding-left: 14px;
}
.g-credits li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: #c9bda3;
}

/* ---------- Access ---------- */
.access {
	padding: clamp(90px, 14vh, 160px) 0;
}
.access-grid {
	display: block;
}
.access .head {
	text-align: center;
	margin-bottom: 56px;
}
.access .eyebrow {
	justify-content: center;

}
.access .eyebrow::before {
	display: none;
}

.access-info {
	margin-top: clamp(40px, 6vh, 60px);
}
.access-info .sec-title {
	margin-bottom: 32px;
}
/* 情報を2列に振り分けて横幅いっぱいを使う（右側の余白を解消） */
.access-info dl {
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(40px, 5vw, 80px);
	align-items: stretch;
}
.access-info .row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 20px;
	padding: 22px 4px;
	border-bottom: 1px solid var(--line);
	align-items: start;
}
.access-info dt {
	font-family: var(--serif);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--accent);
	text-transform: uppercase;
}
.access-info dd {
	font-family: var(--mincho);
	font-size: 15px;
	line-height: 1.9;
	color: #4a3f31;
}
/* MAPは左右に余白を残しつつ画面幅いっぱいに（.wrapから外へ広げる） */
#gglmap {
	width: 100%;
	margin: 0 auto;
	height: 70vh;
}

/* ---------- Footer ---------- */

footer {
	background: var(--dark);
	color: #c9bba4;
	padding: 56px 48px;
	text-align: center;
}
footer .logo {
	margin-bottom: 18px;
}
footer .logo img {
	display: inline-block;
	height: 34px;
	width: auto;
}
footer .copy {
	font-family: var(--serif);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: #8a8073;
}
.tie {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #8a8073;
	margin-top: 8px;
}

/* ---------- ページTOPへ戻るボタン（400px超で表示） ---------- */
.page-top {
	position: fixed;
	right: 26px;
	bottom: 26px;
	z-index: 200;
	width: 56px;
	height: 56px;
	display: block;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 0.4s ease,
		visibility 0.4s ease,
		transform 0.4s ease;
	box-shadow: 0 12px 26px -12px rgba(38, 24, 14, 0.55);
}
.page-top.show {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.page-top:hover {
	opacity: 0.82;
}
.page-top img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- reveal（スクロールでブロック内の要素を順にフェードアップ） ---------- */
.reveal > *:not(.t-body):not(.plan-body),
.reveal .t-body > *,
.reveal .plan-body > * {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1),
		transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal.in > *:not(.t-body):not(.plan-body),
.reveal.in .t-body > *,
.reveal.in .plan-body > * {
	opacity: 1;
	transform: none;
}
/* 時間差（stagger） */
.reveal.in > *:nth-child(2) {
	transition-delay: 0.12s;
}
.reveal.in > *:nth-child(3) {
	transition-delay: 0.24s;
}
.reveal.in > *:nth-child(4) {
	transition-delay: 0.36s;
}
.reveal.in > *:nth-child(5) {
	transition-delay: 0.48s;
}
.reveal.in > *:nth-child(n + 6) {
	transition-delay: 0.6s;
}
.reveal.in .t-body > *:nth-child(2) {
	transition-delay: 0.12s;
}
.reveal.in .t-body > *:nth-child(3) {
	transition-delay: 0.24s;
}
.reveal.in .plan-body > *:nth-child(2) {
	transition-delay: 0.1s;
}
.reveal.in .plan-body > *:nth-child(3) {
	transition-delay: 0.2s;
}
.reveal.in .plan-body > *:nth-child(4) {
	transition-delay: 0.3s;
}
.reveal.in .plan-body > *:nth-child(5) {
	transition-delay: 0.4s;
}
@media (prefers-reduced-motion: reduce) {
	.reveal > *:not(.t-body):not(.plan-body),
	.reveal .t-body > *,
	.reveal .plan-body > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- タブレット微調整（768〜1024px） ---------- */
@media screen and (max-width: 1024px) {

	.about-grid {
		gap: 44px;
	}
	.about-img {
		height: 480px;
	}
	.topic {
		gap: 40px;
		margin-bottom: 72px;
	}
	header {
		padding: 18px 32px;
	}
}

/* ---------- モーション配慮 ---------- */
@media (prefers-reduced-motion: reduce) {
	.heroSwiper {
		animation: none;
		clip-path: none;
	}
	.heroSwiper .swiper-slide img,
	.heroSwiper .swiper-slide-active img {
		animation: none;
		transform: none;
	}
	.hero::after {
		display: none;
	}
	.hero-copy .mark,
	.hero-copy .hero-title,
	.hero-copy .sub {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.scroll-ind {
		animation: none;
		opacity: 1;
	}
}