/* =========================================================
   Villa Umi no Sora ― Design Tokens
   ========================================================= */
:root {
	--color-navy: #1B3A5C;
	--color-navy-deep: #12293F;
	--color-sea: #4A90C2;
	--color-sea-light: #A9D0E8;
	--color-sand: #F1F6FA;
	--color-sand-deep: #E1EBF2;
	--color-gold: #D4A24C;
	--color-gold-light: #E9C888;
	--color-ink: #2B2B28;
	--color-white: #FFFFFF;

	--font-display: 'BIZ UDPMincho', serif;
	--font-body: 'Noto Sans JP', sans-serif;

	--container-width: 1160px;
	--radius: 6px;
	--transition: 0.25s ease;
}

/* =========================================================
   Reset / Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-ink);
	background: var(--color-white);
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
    margin: 0;
    /* font-family: var(--font-display); */
    font-weight: 400;
}
p { margin: 0; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link {
	position: absolute; left: -999px; top: 0; background: var(--color-navy);
	color: var(--color-white); padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 0; }

*:focus-visible {
	outline: 3px solid var(--color-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
	text-align: justify;
}

.eyebrow {
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.28em;
	color: var(--color-sea);
	font-weight: 700;
	margin: 0 0 12px;
}

.section-title {
	font-size: 24px;
	text-align: center;
	color: var(--color-navy);
	margin: 0 0 35px;
	position: relative;
	padding-bottom: 18px;
}
.section-title::after {
	content: "";
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 46px; height: 2px;
	background: var(--color-gold);
}
.section-lead {
    max-width: 780px;
    margin: 0 auto;
    text-align: justify;
    color: #4A4A44;
    font-size: 15px;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
	display: inline-block;
	padding: 9px 30px 10px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
	white-space: nowrap;
}
.btn--navy {
	background: var(--color-navy);
	color: var(--color-white);
}
.btn--navy:hover { background: var(--color-navy-deep); transform: translateY(-2px); }
.btn--gold {
	background: var(--color-gold);
	color: var(--color-white);
}
.btn--gold:hover { background: #B4842E; transform: translateY(-2px); }
.btn--outline {
	border: 1px solid var(--color-navy);
	color: var(--color-navy);
	background: transparent;
	padding: 7px 28px;
}
.btn--outline:hover { background: var(--color-navy); color: var(--color-white); }

/* =========================================================
   Header
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
}

/* 上段：紺の予約バー */
.site-header__utility {
	background: var(--color-navy);
}
.site-header__utility-inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 10px 24px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}
.site-header__cta { display: flex; gap: 10px; }
.site-header__cta .btn { padding: 5px 22px; font-size: 12.5px; }
.site-header__cta .btn--navy {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.55);
	color: var(--color-white);
}
.site-header__cta .btn--navy:hover { background: rgba(255,255,255,0.12); }

/* 下段：白ナビ */
.site-header__main {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-sand-deep);
}
.site-header__inner {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.site-branding { margin-right: auto; }
.site-title { display: flex; align-items: center; }
.site-title__logo { height: 42px; width: auto; display: block; }
.custom-logo { max-height: 56px; width: auto; }

.nav-menu {
	display: flex;
	gap: 48px;
	margin: 0 auto;
}
.nav-menu li { position: relative; }
.nav-menu a {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-ink);
	position: relative;
	padding: 4px 0;
}
.nav-menu a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 2px;
	background: var(--color-gold);
	transition: width var(--transition);
}
.nav-menu a:hover::after { width: 100%; }

.nav-menu .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.nav-menu .menu-item-has-children > a::before {
	content: "";
	width: 6px; height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	order: 2;
}

.nav-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: 0 16px 32px rgba(18,50,78,0.14);
	padding: 8px 0;
	margin-top: 0;
	z-index: 50;
}
.nav-menu .sub-menu a {
	display: block;
	padding: 11px 22px;
	font-size: 13.5px;
	color: var(--color-ink);
	white-space: nowrap;
}
.nav-menu .sub-menu a::after { display: none; }
.nav-menu .sub-menu a:hover { color: var(--color-sea); background: var(--color-sand); }

.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}
.nav-menu .menu-item-has-children:hover > a,
.nav-menu .menu-item-has-children:focus-within > a {
	color: var(--color-sea);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px; height: 40px;
	background: none; border: none; cursor: pointer;
}
.nav-toggle__bar {
	display: block;
	width: 100%; height: 2px;
	background: var(--color-navy);
}

/* =========================================================
   Hero
   ========================================================= */
.hero { position: relative; background: var(--color-navy-deep); }
.hero__media { position: relative; height: 960px; overflow: hidden; }
.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    /* background: linear-gradient(180deg, rgba(18, 41, 63, 0.15) 0%, rgba(18, 41, 63, 0.55) 100%); */
}
.hero__badge {
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	max-width: 92vw;
	color: var(--color-white);
}
.hero__badge-line { width: 42px; height: 1px; background: var(--color-gold-light); }
.hero__badge-text {
	font-family: var(--font-display);
	font-size: clamp(22px, 4vw, 36px);
	letter-spacing: 0.3em;
	text-shadow: 0 2px 12px rgba(0,0,0,0.35);
	white-space: nowrap;
}

/* =========================================================
   Intro
   ========================================================= */
.intro { padding: 20px 0 20px; background: var(--color-white); }
.intro__inner { text-align: center; max-width: 760px; margin: 0 auto; }
.intro__title { margin-bottom: 26px; }
.intro__title-logo {
	display: block;
	margin: 0 auto 60px;
	width: clamp(220px, 32vw, 340px);
	height: auto;
}
.intro__lead { font-size: 15px; color: #4A4A44; }

/* =========================================================
   Facilities
   ========================================================= */
.facilities { padding: 30px 0 0px; background: var(--color-white); }
.facility-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.facility-card {
	background: var(--color-sand);
	border-radius: var(--radius);
	overflow: hidden;
	min-width: 0;
	transition: transform var(--transition), box-shadow var(--transition);
}
.facility-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(18,50,78,0.12);
}
.facility-card__media {
	aspect-ratio: 7 / 5; /* PC実測(540×385)と同じ比率。幅が変わっても縦横比を維持する */
	background-size: cover;
	background-position: center;
	background-color: var(--color-sea-light);
}
.facility-card__body { padding: 18px 117px 38px; }
.facility-card__tag {
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--color-sea);
	font-weight: 500;
	margin-bottom: 6px;
}
.facility-card__title {
	margin-bottom: 16px;
}
.facility-card__title-logo {
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 64px;
	display: block;
}
.facility-card__list { margin-bottom: 24px; }
.facility-card__list li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	color: #4A4A44;
	margin-bottom: 6px;
}
.facility-card__list li::before {
	content: "";
	position: absolute; left: 0; top: 10px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--color-gold);
}

/* =========================================================
   Feature block (smart lock)
   ========================================================= */
.feature-block { position: relative; padding: 0 0 70px; background: var(--color-white); overflow: hidden; }
.feature-block .section-title { color: var(--color-navy); }
.feature-block .section-title::after { background: var(--color-gold); }
.feature-block__inner .section-lead { color: #4A4A44; }

.feature-block__wave {
	width: 100%;
	line-height: 0;
	margin-bottom: -40px;
	overflow: hidden;
}
.feature-block__wave svg {
	display: block;
	width: 200%;
	height: clamp(120px, 20vw, 220px);
	animation: feature-wave-scroll 22s linear infinite;
}
.feature-block__inner {
	position: relative;
	padding-top: 0px;
}

@keyframes feature-wave-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* =========================================================
   Amenities
   ========================================================= */
.amenities { padding: 70px 0; background: var(--color-sand); }
.amenities__card {
	background: var(--color-white);
	border-radius: var(--radius);
	padding: 40px 44px;
	max-width: 860px;
	margin: 0 auto;
}
.amenities__list li {
	padding: 14px 0;
	border-bottom: 1px solid var(--color-sand-deep);
	font-size: 14px;
	color: #4A4A44;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}
.amenities__list li:last-child { border-bottom: none; }
.amenities__label {
    flex: 0 0 96px;
    font-weight: 500;
    color: var(--color-navy);
    /* font-family: var(--font-display); */
}

/* =========================================================
   Notice
   ========================================================= */
.notice { padding: 70px 0; background: var(--color-white); }
.notice__list {
	max-width: 780px;
	margin: 0 auto;
	counter-reset: notice;
}
.notice__list li {
	position: relative;
	counter-increment: notice;
	padding-left: 40px;
	font-size: 14px;
	color: #4A4A44;
	margin-bottom: 18px;
}
.notice__list li::before {
    content: counter(notice);
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-white);
    /* font-family: var(--font-display); */
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   Sightseeing
   ========================================================= */
.sightseeing { padding: 70px 0; background: var(--color-sand); }
.sightseeing__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 50px;
}
.spot-card { min-width: 0; }
.spot-card__media {
	height: 220px;
	border-radius: var(--radius);
	background-size: cover;
	background-position: center;
	background-color: var(--color-sea-light);
	margin-bottom: 16px;
}
.spot-card__title {
	font-size: 17px;
	color: var(--color-navy);
	margin-bottom: 2px;
}
.spot-card__text {
	font-size: 13px;
	color: #55554F;
	line-height: 1.8;
}

.onsen-block {
	max-width: 350px;
	margin: 0 auto;
	background: var(--color-white);
	border-radius: var(--radius);
	padding: 30px 36px;
	text-align: center;
}
.onsen-block__title {
	font-size: 17px;
	color: var(--color-navy);
	margin-bottom: 16px;
}
.onsen-block__list li {
	font-size: 14px;
	color: #4A4A44;
	padding: 0px 0;
}

/* =========================================================
   Access
   ========================================================= */
.access { padding: 70px 0 90px; background: var(--color-white); }
.access__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	align-items: stretch;
}
.access__map {
	min-height: 320px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-sand);
}
.access__map iframe { width: 100%; height: 100%; min-height: 320px; }
.access__info {
	background: var(--color-sand);
	border-radius: var(--radius);
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}
.access__address {
	font-size: 15px;
	color: var(--color-navy);
	line-height: 1.8;
}
.access__info .btn { align-self: flex-start; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
	background: linear-gradient(180deg, var(--color-white) 0%, var(--color-sand) 100%);
	color: var(--color-navy);
	padding: 50px 24px 26px;
	text-align: center;
	border-top: 1px solid var(--color-sand-deep);
}
.site-footer__nav { margin-bottom: 30px; }
.site-footer__nav nav { display: block; width: 100%; }

/* 一部の最適化プラグイン等で nav-menu--footer クラスが欠落することがあるため、
   .site-footer__nav 配下の .nav-menu を直接指定して確実に中央揃えにする */
.site-footer__nav .nav-menu {
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	row-gap: 2px;
}
.site-footer__nav .nav-menu > li > a { color: var(--color-navy); }
.site-footer__nav .nav-menu > li > a::after { background: var(--color-gold); }

.nav-menu--footer {
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	row-gap: 12px;
}
.nav-menu--footer a { color: var(--color-navy); }
.nav-menu--footer a::after { background: var(--color-gold); }

.site-footer__logo {
	height: 34px;
	width: auto;
	margin: 60px auto 12px;
}
.site-footer__address { font-size: 13px; color: #55554F; margin-bottom: 24px; text-align: center; }
.site-footer__bottom { font-size: 11px; color: #8A8A82; margin-top: 20px; text-align: center; }

/* =========================================================
   Back to Top
   ========================================================= */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 400;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-navy);
	color: var(--color-white);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(18,41,63,0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.9);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition);
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(0.9);
}
.back-to-top:hover,
.back-to-top:focus-visible {
	background: var(--color-navy-deep);
}

/* =========================================================
   Lightbox（ギャラリー画像のタップ拡大表示）
   ========================================================= */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(18,41,63,0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), visibility var(--transition);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__image {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: var(--radius);
	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	color: var(--color-white);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--transition);
}
.lightbox__close:hover,
.lightbox__close:focus-visible { background: rgba(255,255,255,0.3); }

/* 間取り下のギャラリー：タップで拡大できることが分かるよう、ホバー時に少し明るくする */
.detail-gallery__grid:not(.detail-gallery__grid--3col) .detail-gallery__item {
	cursor: pointer;
	transition: filter var(--transition);
}
.detail-gallery__grid:not(.detail-gallery__grid--3col) .detail-gallery__item:hover,
.detail-gallery__grid:not(.detail-gallery__grid--3col) .detail-gallery__item:focus-visible {
	filter: brightness(1.08);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
	.access__inner { grid-template-columns: 1fr; }
	.facility-grid { gap: 22px; }
	.sightseeing__grid { gap: 20px; }
}

@media (max-width: 780px) {
	.hero__media { height: 75vh; min-height: 480px; }

	.site-header__utility-inner { padding: 8px 20px; }
	.site-header__cta .btn { padding: 7px 16px; font-size: 11.5px; }

	.site-nav { display: none; }
	.nav-toggle { display: flex; }

	.site-header.is-open .site-nav {
		display: flex;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--color-white);
		flex-direction: column;
		padding: 16px 24px;
		border-bottom: 1px solid var(--color-sand-deep);
		box-shadow: 0 12px 24px rgba(18,50,78,0.08);
	}
	.site-header.is-open .nav-menu { flex-direction: column; gap: 16px; }

	/* モバイルはホバーが使えないため、サブメニューは常に静的表示で下に展開 */
	.nav-menu .menu-item-has-children > a::before { margin-left: 2px; }
	.site-header.is-open .sub-menu {
		display: block;
		position: static;
		box-shadow: none;
		margin: 8px 0 0;
		padding: 0 0 0 16px;
		border-left: 2px solid var(--color-sand-deep);
	}
	.site-header.is-open .sub-menu a { padding: 8px 0; font-size: 13px; }

	.amenities__label { flex: 0 0 100%; }
}

/* facility-grid・sightseeing__grid はモバイルでも常に2列／3列を維持し、
   代わりに余白・文字サイズを縮小して詰まりすぎないよう調整
   （facility-card__media の高さは aspect-ratio 指定によりPCと同じ比率を保つため、ここでは上書きしない） */
@media (max-width: 640px) {
	.facility-grid { grid-template-columns: 1fr; gap: 20px; }
	.facility-card__body { padding: 20px 50px 26px; }
	.facility-card__title { font-size: 17px; margin-bottom: 10px; }
	.facility-card__title-logo { max-height: 48px; }
	.facility-card__tag { font-size: 11px; }
	.facility-card__list li { font-size: 13px; margin-bottom: 6px; padding-left: 16px; }
	.facility-card__list { margin-bottom: 18px; }
	.btn--outline { padding: 7px 22px 9px; font-size: 13px; }

	.sightseeing__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.spot-card__media { height: 150px; margin-bottom: 8px; border-radius: 4px; }
	.spot-card__title { font-size: 13px; margin-bottom: 4px; }
	.spot-card__text { font-size: 11px; line-height: 1.6; }

	/* ヒーロー画像：スマホは実際のimgタグとして横幅いっぱいに表示し、
	   高さは画像の縦横比に応じて自動になるようにする（余白・トリミングとも発生しない） */
	.hero__media { height: auto; min-height: 0; overflow: visible; }
	.hero__image { position: static; width: 100%; height: auto; object-fit: initial; }
}

@media (max-width: 520px) {
	.hero__badge { flex-direction: column; gap: 8px; top: 10%; }
	.hero__badge-line { display: none; }
}

/* モバイル専用の見た目調整（PC・タブレット表示には適用しない） */
@media (max-width: 640px) {
	.hero__badge-text {
		letter-spacing: 0.1em; /* PC・タブレットのみ字間を広げるため、モバイルは元の値を維持 */
	}
	.intro__inner {
		text-align: center;
		max-width: 95%;
		margin: 0 auto;
	}
	.intro {
		padding: 20px 0 10px;
		background: var(--color-white);
	}
	.feature-block {
		position: relative;
		padding: 0 0 40px;
		background: var(--color-white);
		overflow: hidden;
	}
	.sightseeing__grid {
		margin-bottom: 30px; /* grid-template-columns・gapは既存の640px用ルール（2列・gap14px）をそのまま利用 */
	}
	.access__inner {
		gap: 15px; /* grid-template-columnsは960px用ルール（1fr）をそのまま利用 */
		align-items: stretch;
	}
	.access__info {
		background: var(--color-sand);
		border-radius: var(--radius);
		padding: 15px 0px 25px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 10px;
	}
	.site-footer {
		background: linear-gradient(180deg, var(--color-white) 0%, var(--color-sand) 100%);
		color: var(--color-navy);
		padding: 30px 24px 10px;
		text-align: center;
		border-top: 1px solid var(--color-sand-deep);
	}
	.amenities__card {
		background: var(--color-white);
		border-radius: var(--radius);
		padding: 10px 24px;
		max-width: 860px;
		margin: 0 auto;
	}
	.section-lead {
		max-width: 95%;
		margin: 0 auto;
		text-align: justify;
		font-size: 15px;
	}
	.section-title {
		font-size: 24px;
		text-align: center;
		margin: 0px 0 0px;
		position: relative;
		padding-bottom: 18px;
	}
	.amenities {
		padding: 40px 0;
		background: var(--color-sand);
	}
	.notice {
		padding: 40px 0;
		background: var(--color-white);
	}
	.sightseeing {
		padding: 40px 0;
		background: var(--color-sand);
	}
	.access {
		padding: 30px 0;
		background: var(--color-white);
	}
	.site-footer__logo {
		height: 44px;
		width: auto;
		margin: 60px auto 12px;
	}
	.access__address {
		font-size: 15px;
		color: var(--color-navy);
		line-height: 1.8;
		text-align: center;
	}
	.access__info .btn {
		align-self: flex-start;
		margin: 0 auto;
	}
	.container {
		padding: 0 7%;
	}
	.notice__list li {
		position: relative;
		counter-increment: notice;
		padding-left: 40px;
		font-size: 14px;
		color: #4A4A44;
		margin-bottom: 18px;
		padding-right: 5px;
	}
	.onsen-block {
		max-width: 80%;
		margin: 0 auto;
		background: var(--color-white);
		border-radius: var(--radius);
		padding: 20px 36px;
		text-align: center;
	}
}

/* =========================================================
   下層ページ共通：パンくず
   ========================================================= */
.page-breadcrumb {
	background: var(--color-sand);
	border-bottom: 1px solid var(--color-sand-deep);
	padding: 16px 0;
}
.page-breadcrumb nav {
	font-size: 13px;
	color: #5A5A52;
}
.page-breadcrumb a { color: var(--color-sea); }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb__sep { margin: 0 8px; color: #B9C4CC; }
.page-breadcrumb__current { color: var(--color-navy); font-weight: 600; }

/* =========================================================
   利用規約ページ
   ========================================================= */
.legal { padding: 60px 0 100px; background: var(--color-white); }
.legal__inner { max-width: 820px; }
.legal__title {
	font-size: 24px;
	color: var(--color-navy);
	text-align: center;
	margin-bottom: 28px;
	position: relative;
	padding-bottom: 20px;
}
.legal__title::after {
	content: "";
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 46px; height: 2px;
	background: var(--color-gold);
}
.legal__lead {
	font-size: 14px;
	color: #4A4A44;
	line-height: 2;
	background: var(--color-sand);
	border-radius: var(--radius);
	padding: 24px 28px;
	margin-bottom: 50px;
}

.legal__sections { display: flex; flex-direction: column; gap: 42px; }
.legal-section__title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 18px;
	color: var(--color-navy);
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-sand-deep);
}
.legal-section__num {
    flex: 0 0 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
}

.legal-section__list {
	counter-reset: legal;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.legal-section__list > li {
	position: relative;
	counter-increment: legal;
	padding-left: 30px;
	font-size: 14px;
	color: #4A4A44;
	line-height: 1.9;
}
.legal-section__list > li::before {
	content: counter(legal) ".";
	position: absolute;
	left: 0; top: 0;
	color: var(--color-gold);
	font-weight: 700;
	font-size: 13px;
}

.legal-section__sublist {
	counter-reset: legalsub;
	margin: 12px 0 12px;
	padding-left: 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.legal-section__sublist li {
	position: relative;
	counter-increment: legalsub;
	padding-left: 26px;
	font-size: 13.5px;
	color: #55554F;
	line-height: 1.8;
}
.legal-section__sublist li::before {
	content: counter(legalsub) ")";
	position: absolute;
	left: 0; top: 0;
	color: var(--color-sea);
	font-size: 13px;
}
.legal-section__sublist--parens li::before {
	content: "(" counter(legalsub) ")";
}

.legal-section__text {
	font-size: 14px;
	color: #4A4A44;
	line-height: 1.9;
	margin-bottom: 14px;
}
.legal-section__text:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.legal { padding: 40px 0 70px; }
	.legal__title { font-size: 24px; }
	.legal__lead { padding: 18px 20px; font-size: 13px; }
	.legal-section__title { font-size: 16px; }
}

/* =========================================================
   下層ページ共通：パンくず＋ページ内アンカーナビの追従表示
   ヘッダー直下に固定されるよう、実際のヘッダー高さ（--sticky-offset、main.jsで算出）を
   top位置に使う。JSが読み込まれる前は 0px にフォールバックする。
   ========================================================= */
.page-subnav-sticky {
	position: sticky;
	top: var(--sticky-offset, 0px);
	z-index: 450;
}

/* =========================================================
   下層ページ共通：ページ内アンカーナビ
   ========================================================= */
.anchor-nav {
	background: var(--color-navy);
}
.anchor-nav nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 28px;
	padding: 10px 24px;
	max-width: var(--container-width);
	margin: 0 auto;
}
.anchor-nav a {
	font-size: 12.5px;
	color: rgba(255,255,255,0.85);
	white-space: nowrap;
}
.anchor-nav a:hover { color: var(--color-gold-light); }

/* =========================================================
   施設詳細ページ：ヒーロー
   ========================================================= */
.detail-hero { position: relative; color: var(--color-white); }
.detail-hero__media {
	height: 46vh;
	min-height: 320px;
	background-size: cover;
	background-position: center;
	background-color: var(--color-navy);
	position: relative;
}
.detail-hero__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(18,41,63,0.4) 0%, rgba(18,41,63,0.78) 100%);
}
.detail-hero__inner {
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 100%;
	padding-bottom: 34px;
}
.detail-hero__tag {
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--color-gold-light);
	font-weight: 700;
	margin-bottom: 8px;
}
.detail-hero__title {
	margin-bottom: 16px;
}
.detail-hero__title-logo {
	height: clamp(50px, 6vw, 58px);
	width: auto;
	max-width: 100%;
	display: block;
	filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35));
}
.detail-hero__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}
.detail-hero__list li {
	font-size: 13px;
	color: rgba(255,255,255,0.9);
	position: relative;
	padding-left: 14px;
}
.detail-hero__list li::before {
	content: "";
	position: absolute; left: 0; top: 7px;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--color-gold-light);
}

/* =========================================================
   施設詳細ページ：フォトギャラリー
   ========================================================= */
.detail-gallery { padding: 60px 0 0; background: var(--color-white); }
.detail-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.detail-gallery__item {
	min-width: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	background-size: cover;
	background-position: center;
	background-color: var(--color-sea-light);
}
.detail-gallery__grid--3col { grid-template-columns: repeat(3, 1fr); }

/* スワイプスライダーのドット（モバイルのみ表示。PC・タブレットは非表示のまま） */
.detail-gallery__dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}
.detail-gallery__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--color-sand-deep);
	cursor: pointer;
	transition: background var(--transition), transform var(--transition);
}
.detail-gallery__dot.is-active { background: var(--color-navy); transform: scale(1.25); }

/* =========================================================
   施設詳細ページ：CTA帯
   ========================================================= */
.cta-band {
	background: var(--color-navy);
	padding: 46px 0;
	margin-top: 60px;
}
.cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 24px;
	text-align: center;
}
.cta-band__text {
    /* font-family: var(--font-display); */
    font-size: 19px;
    color: var(--color-white);
}

/* =========================================================
   施設詳細ページ：汎用セクション
   ========================================================= */
.detail-section { padding: 70px 0; background: var(--color-white); }
.detail-section--tint { background: var(--color-sand); }
.detail-section__floorplans {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0px;
	min-width: 0;
}
.detail-section__floorplans img {
	border-radius: var(--radius);
	width: 100%;
	height: 100%;
	min-width: 0;
	aspect-ratio: 1 / 1; /* 1F・2Fで縦横比が異なるため、共通の枠で高さを揃える */
	object-fit: contain; /* 図面の中身は切らずに枠内へフィット（画像が白背景なので余白は目立たない） */
}
.detail-section__cta { text-align: center; margin-top: 30px; }

@media (max-width: 780px) {
	.anchor-nav nav { gap: 4px 18px; padding: 10px 20px; overflow-x: auto; flex-wrap: nowrap; }
}

@media (max-width: 640px) {
	.detail-gallery__grid { grid-template-columns: repeat(2, 1fr); }

	/* トップ画像直下の3枚ギャラリーのみ、横スワイプで流れるスライダーにする */
	.detail-gallery__grid--3col {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.detail-gallery__grid--3col::-webkit-scrollbar { display: none; }
	.detail-gallery__grid--3col .detail-gallery__item {
		flex: 0 0 80%;
		scroll-snap-align: center;
	}
	.detail-gallery__dots { display: flex; }
	.detail-gallery {
		padding: 30px 0 0px;
		background: var(--color-white);
	}
	.cta-band {
		background: var(--color-navy);
		padding: 26px 0;
		margin-top: 30px;
	}
	.cta-band__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
		text-align: center;
	}
	.detail-section__floorplans { grid-template-columns: 1fr; }
	.detail-section { padding: 30px 0 35px; }
	.detail-hero__list { flex-direction: column; gap: 4px; }
}

/* =========================================================
   お問い合わせページ
   ========================================================= */
.contact { padding: 60px 0 100px; background: var(--color-white); }
.contact__inner { max-width: 680px; }
.contact__title {
	font-size: 24px;
	color: var(--color-navy);
	text-align: center;
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 20px;
}
.contact__title::after {
	content: "";
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 46px; height: 2px;
	background: var(--color-gold);
}
.contact__lead {
    text-align: justify;
    font-size: 14px;
    color: #4A4A44;
    line-height: 1.9;
    margin-bottom: 44px;
}

.contact-form__notice {
	background: var(--color-sand);
	border-left: 3px solid var(--color-gold);
	padding: 14px 18px;
	font-size: 12.5px;
	color: #6A6A62;
	line-height: 1.8;
	margin-bottom: 32px;
	border-radius: 0 var(--radius) var(--radius) 0;
}
.contact-form__notice code {
	background: rgba(0,0,0,0.06);
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 11.5px;
}

.contact-form__row { margin-bottom: 26px; }
.contact-form__row label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-navy);
	margin-bottom: 8px;
}
.contact-form__required {
	display: inline-block;
	background: var(--color-gold);
	color: var(--color-white);
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 3px;
	margin-left: 6px;
	vertical-align: middle;
}
.contact-form__row input,
.contact-form__row textarea {
	width: 100%;
	padding: 13px 16px;
	font-size: 14px;
	font-family: var(--font-body);
	color: var(--color-ink);
	background: var(--color-white);
	border: 1px solid var(--color-sand-deep);
	border-radius: var(--radius);
	transition: border-color var(--transition);
}
.contact-form__row input:focus,
.contact-form__row textarea:focus {
	outline: none;
	border-color: var(--color-sea);
}
.contact-form__row textarea { resize: vertical; }

.contact-form__submit { text-align: center; margin-top: 40px; }
.contact-form__submit .btn {
	border: none;
	cursor: pointer;
	font-size: 15px;
	padding: 15px 48px;
}
.contact-form__submit .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Contact Form 7 を使う場合の最低限の見た目調整 */
.contact-form--cf7 .wpcf7-form-control-wrap { display: block; margin-bottom: 26px; }
.contact-form--cf7 input[type="text"],
.contact-form--cf7 input[type="email"],
.contact-form--cf7 input[type="tel"],
.contact-form--cf7 textarea {
	width: 100%;
	padding: 13px 16px;
	font-size: 14px;
	border: 1px solid var(--color-sand-deep);
	border-radius: var(--radius);
}
.contact-form--cf7 input[type="submit"] {
	background: var(--color-navy);
	color: var(--color-white);
	border: none;
	border-radius: 999px;
	padding: 10px 48px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.contact-form--cf7 input[type="submit"]:hover { background: var(--color-navy-deep); }

@media (max-width: 640px) {
	.contact { padding: 40px 0 70px; }
	.contact__title { font-size: 24px; }
}

/* =========================================================
   宿泊予約ページ
   ========================================================= */
.reservation { padding: 60px 0 100px; background: var(--color-white); }
.reservation__inner { max-width: 640px; }
.reservation__title {
	font-size: 24px;
	color: var(--color-navy);
	text-align: center;
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 20px;
}
.reservation__title::after {
	content: "";
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 46px; height: 2px;
	background: var(--color-gold);
}
.reservation__lead {
	text-align: center;
	font-size: 14px;
	color: #4A4A44;
	margin-bottom: 44px;
}
.reservation__grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
}
.reservation-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 28px;
	background: var(--color-sand);
	border-radius: var(--radius);
	transition: background var(--transition), transform var(--transition);
}
.reservation-card:hover { background: var(--color-navy); transform: translateY(-2px); }
.reservation-card__name {
    /* font-family: var(--font-display); */
    font-size: 17px;
    color: var(--color-navy);
}
.reservation-card:hover .reservation-card__name { color: var(--color-white); }
.reservation-card__arrow {
	font-size: 18px;
	color: var(--color-gold);
	transition: transform var(--transition);
}
.reservation-card:hover .reservation-card__arrow { transform: translateX(4px); }
.reservation__note {
	text-align: center;
	font-size: 13px;
	color: #6A6A62;
}
.reservation__note a { color: var(--color-sea); text-decoration: underline; }

@media (max-width: 640px) {
	.reservation { padding: 40px 0 70px; }
	.reservation__title { font-size: 24px; }
}

/* =========================================================
   News（新着情報）／予約カードの補足文／ドット付きサブリスト
   ========================================================= */
.news { padding: 56px 0 24px; background: var(--color-white); }
.news__title {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.3em;
	color: #D6202B;
	margin: 0 0 12px;
}
.news__list { width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; }
.news__list li {
	margin: 0;
	padding: 14px 0 16px;
	border-bottom: 1px solid #222;
	font-size: 18px;
}
.news__list a {
	display: flex;
	align-items: center;
	gap: 16px;
	color: #1B5FB8;
	text-decoration: none;
	line-height: 1.6;
}
.news__list a::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F26522' d='M19.4 13a7.5 7.5 0 0 0 0-2l2.1-1.6a.5.5 0 0 0 .1-.6l-2-3.5a.5.5 0 0 0-.6-.2l-2.5 1a7.3 7.3 0 0 0-1.7-1l-.4-2.6a.5.5 0 0 0-.5-.4h-4a.5.5 0 0 0-.5.4L9 5.5a7.300 7.300 0 0 0-1.700 1l-2.500-1a.5.5 0 0 0-.6.2l-2 3.500a.5.5 0 0 0 .1.6L4.600 11a7.500 7.500 0 0 0 0 2l-2.100 1.600a.5.5 0 0 0-.1.6l2 3.500c.1.2.4.3.6.2l2.500-1c.5.4 1.100.7 1.700 1l.4 2.600c0 .2.2.4.5.4h4c.3 0 .5-.2.5-.4l.4-2.600c.6-.3 1.200-.6 1.700-1l2.500 1c.2.1.5 0 .6-.2l2-3.500a.5.5 0 0 0-.1-.6zM12 15.500a3.500 3.500 0 1 1 0-7 3.500 3.500 0 0 1 0 7z'/%3E%3C/svg%3E");
}
.news__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) {
	.news { padding: 40px 0 16px; }
	.news__title { font-size: 18px; }
	.news__list li { font-size: 15px; }
}

.reservation-card__caption {
	flex: 1;
	margin: 0 16px;
	font-size: 13px;
	color: #6A6A62;
	text-align: right;
}
.reservation-card:hover .reservation-card__caption { color: var(--color-white); }
@media (max-width: 640px) {
	.reservation-card { flex-wrap: wrap; }
	.reservation-card__caption { order: 3; flex-basis: 100%; margin: 6px 0 0; text-align: left; }
}

.legal-section__sublist--dots li::before { content: "・"; }
.legal-section__sublist--dots li { padding-left: 18px; }

/* トップ導入文：PCでは1行ずつ改行、スマホでは自然に折り返し */
.intro__line { display: block; }
@media (max-width: 780px) {
	.intro__line { display: inline; }
}