/*
 * SCM site-specific styles.
 * Keep project CSS here instead of editing ONEstar or ONEsta directly.
 */

@font-face {
	font-display: swap;
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/Barlow-Regular.woff2") format("woff2");
}

:root {
	--scm-primary: #53b8a9;
	--scm-button: #738991;
	--scm-icon: #e3ebec;
	--scm-bg: #f7f9f9;
	--scm-text: #000;
	--scm-white: #fff;
	--scm-en: "Barlow", "Outfit", sans-serif;
	--scm-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
	--scm-sans: "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
	--scm-font-small: var(--wp--preset--font-size--small);
	--scm-font-medium: var(--wp--preset--font-size--medium);
	--scm-font-large: var(--wp--preset--font-size--large);
	--scm-font-xl: var(--wp--preset--font-size--x-large);
	--scm-font-xxl: var(--wp--preset--font-size--xx-large);
	--scm-font-display: var(--wp--preset--font-size--display);
	--scm-content: 768px;
	--scm-wide: 1200px;
	--scm-header-h: 58px;
	--scm-radius-s: 6px;
	--scm-radius-m: 12px;
	--scm-radius-l: 20px;
	--scm-radius-pill: 999px;
	--scm-space-3xs: 4px;
	--scm-space-2xs: 6px;
	--scm-space-xs: 8px;
	--scm-space-s: 12px;
	--scm-space-m: 16px;
	--scm-space-l: 20px;
	--scm-space-xl: 24px;
	--scm-space-2xl: 34px;
	--scm-space-3xl: 48px;
	--scm-space-4xl: 56px;
	--scm-gutter: 24px;
	--scm-header-x: 38px;
	--scm-nav-gap: 20px;
	--scm-section-y: 56px;
	--scm-section-y-compact: 48px;
	--scm-section-y-loose: 66px;
	--scm-section-y-wide: 72px;
	--scm-hero-bottom: 40px;
}

@media (min-width: 768px) {
	:root {
		--scm-space-3xl: 58px;
		--scm-space-4xl: 72px;
		--scm-section-y: 86px;
		--scm-section-y-compact: 58px;
		--scm-section-y-loose: 92px;
		--scm-section-y-wide: 108px;
	}
}

@media (min-width: 1024px) {
	:root {
		--scm-header-h: 48px;
		--scm-header-x: 0;
	}
}

@media (min-width: 1200px) {
	:root {
		--scm-section-y: 116px;
		--scm-section-y-compact: 92px;
		--scm-section-y-loose: 128px;
		--scm-section-y-wide: 128px;
	}
}

.osc-site-scm {
	background: var(--scm-bg);
	color: var(--scm-text);
}

.osc-site-scm .onestar-template-main--front {
	margin: 0;
	padding: 0;
	width: 100%;
}

.osc-site-scm .onestar-template-main--front > .wp-block-post-content {
	max-width: none;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100%;
}

.osc-site-scm .wp-site-blocks > header {
	background-color: transparent;
}

.scm-home {
	background: var(--scm-bg);
	color: var(--scm-text);
	font-family: var(--scm-serif);
	margin: 0;
	max-width: none;
	overflow: clip;
	width: 100%;
}

.osc-site-scm .onestar-template-main--front .scm-home.alignfull,
.osc-site-scm .scm-home > .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
	width: 100%;
}

.scm-home :where(p, h1, h2, h3, figure) {
	margin-block: 0;
}

/*
 * 下層モジュール（scm-module）のマージンリセット。
 * 1) 要素デフォルトの p/h/figure/ul マージンをゼロに
 * 2) WPレイアウトサポートの自動 block-gap
 *    （:root :where(.is-layout-flow) > * { margin-block-start: var(--wp--preset--spacing--30) }）
 *    を無効化。グリッド子要素（.scm-point / .scm-card 等）の2枚目以降だけ
 *    押し下げられる段差の防止。
 * 縦リズムは scm-* 側で明示的に定義する。後続の同特異度ルール
 * （.scm-section-sub / .scm-content-text 等）が上書きできるよう、
 * 意図的にファイル前方へ置く。sub-pages セクションに置くと
 * トップページ共通のリズム定義より後になり、それらを殺してしまう。
 */
.scm-module :where(p, h1, h2, h3, figure, ul) {
	margin-block: 0;
}

.scm-module:where(.is-layout-flow, .is-layout-constrained) > *,
.scm-module :where(.is-layout-flow, .is-layout-constrained) > * {
	margin-block-start: 0;
}

.scm-home img,
.scm-home video {
	display: block;
	max-width: 100%;
}

.scm-header {
	align-items: center;
	box-sizing: border-box;
	color: var(--scm-white);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--scm-space-xl);
	height: var(--scm-header-h);
	inset: 0 0 auto;
	padding: 0 var(--scm-header-x);
	position: fixed;
	transition: height 180ms ease;
	z-index: 50;
}

body.admin-bar .scm-header {
	top: 32px;
}

/* scm 独自のスクロール検知クラス（site.js が y>80 で付与）。旧実装はここで
   background: rgba(115,137,145,.94)+box-shadow の帯を出していたが撤去。
   以前はスクロールで高さを 58→56px に縮めていたが、その 2px の縮みがヘッダーの
   「上にめり込む」感（＝スクロール時に一瞬2pxジャンプ）を生むため撤去し、高さを
   スクロール時も不変にする（:focus-within もルールから除外）。 */
.scm-has-scrolled .scm-header {
	height: var(--scm-header-h);
}

@media (min-width: 1024px) {
	.scm-has-scrolled .scm-header {
		height: var(--scm-header-h);
	}
}

/* onesta スクロール追従ヘッダー（body.onesta-scroll-header・y>500 で header へ
   .is-floating を付与）。アニメは残し、見た目（背景色・影）は scm 側で作る:
     - 背景色 → onesta には塗らせない（設定 scroll_header_bg='' 空。JS の setFloatingBg が
       inline background-color を削除するのでインライン !important が付かない）。代わりに
       下の .is-floating/.is-leaving に #738991 を持たせ、突入アニメ scm-float-in で色を
       制御する（引っ込み中は無色 → 再出現でじわっとフェードイン）。onesta が塗ると
       引っ込む段階から色が乗ってしまい美しくないため、この構成にした。
     - シャドウ → onesta の #onesta-scroll-header インライン<style>が .is-floating に
       ハードコード（box-shadow:0 1px 4px）しているため打ち消す。
   onesta と同一セレクタ＋!important（onesta 側は非!important なので importance で勝つ。
   site.css は scm 専用ロードなのでスコープも scm 限定）。 */
.onesta-scroll-header .wp-site-blocks > header.is-floating,
.onesta-scroll-header .wp-site-blocks > header.is-leaving {
	background-color: #738991;
	box-shadow: none !important;
}

/* フローティング時は宿泊予約ボタンの角丸を無くしてシャープに（PC 追従ナビ・
   モバイルは元々 border-radius:0 なので実質 PC 幅だけの変化）。 */
.scm-header.is-floating .scm-header__reserve,
.scm-header.is-leaving .scm-header__reserve {
	border-radius: 0;
}

/* is-floating 突入アニメの「なめらか化」。onesta の onesta-float-in は
   translateY(-100%)/opacity:0（画面外）から始まるため、scm の常時 position:fixed で
   見えているヘッダーだと突入の瞬間に一瞬パッと消える。可視状態(0%)から始めて
   「無色のまま引っ込む → 再出現しながら色がじわっと入る」独自 keyframe に差し替える
   （一意名 scm-float-in・onesta の float-in を importance で上書き）。背景 alpha を 0→1 で
   アニメできるのは onesta のインライン !important 背景を無効化（scroll_header_bg=''）した
   ため（CSS animation は importance に負けるので、インライン !important が残ると色は動かせない）。
   退出(is-leaving/onesta-float-out)は opacity フェードで色も自然に消えるので触らない。 */
@keyframes scm-float-in {
	0%   { transform: translateY(0);     opacity: 1; background-color: rgba(115, 137, 145, 0); }
	30%  { transform: translateY(-102%); opacity: 0; background-color: rgba(115, 137, 145, 0); }
	44%  { transform: translateY(-102%); opacity: 0; background-color: rgba(115, 137, 145, 0); }
	100% { transform: translateY(0);     opacity: 1; background-color: rgba(115, 137, 145, 1); }
}
.onesta-scroll-header .wp-site-blocks > header.is-floating {
	animation: scm-float-in 0.8s ease both !important;
}

.scm-header a {
	color: inherit;
	text-decoration: none;
}

.scm-header__brand {
	align-items: center;
	display: inline-flex;
	justify-self: start;
	line-height: 0;
	min-width: 0;
	width: fit-content;
}

.scm-header__logo {
	display: block;
	height: auto;
	margin: 0 1rem;
	width: 54px;
}

.scm-header__mark {
	align-items: center;
	border: 1px solid currentColor;
	border-radius: var(--scm-radius-pill);
	display: inline-flex;
	font-family: var(--scm-en);
	font-size: var(--scm-font-small);
	font-weight: 700;
	height: 34px;
	justify-content: center;
	line-height: 1;
	width: 34px;
}

.scm-header__name {
	font-family: var(--scm-en);
	font-size: var(--scm-font-small);
	font-weight: 700;
	letter-spacing: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scm-header__nav {
	align-items: center;
	display: flex;
	font-family: var(--scm-en);
	font-size: var(--scm-font-small);
	font-weight: 700;
	gap: var(--scm-nav-gap);
}

.scm-header__nav .wp-block-navigation__container {
	align-items: center;
	gap: var(--scm-nav-gap);
}

.osc-site-scm .scm-header .wp-block-navigation-item {
	opacity: 1;
	transform: none;
}

.osc-site-scm .scm-header .wp-block-navigation-item__content {
	font-size: inherit;
}

.scm-header__nav a,
.scm-header__drawer nav a,
.scm-header__nav .wp-block-navigation-item__content,
.scm-header__drawer-nav .wp-block-navigation-item__content {
	position: relative;
}

.scm-header__nav a::after,
.scm-header__drawer nav a::after,
.scm-header__nav .wp-block-navigation-item__content::after,
.scm-header__drawer-nav .wp-block-navigation-item__content::after {
	background: var(--scm-primary);
	content: "";
	height: 1px;
	inset: auto 0 -5px;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms ease;
}

.scm-header__nav a:hover::after,
.scm-header__nav a:focus-visible::after,
.scm-header__drawer nav a:hover::after,
.scm-header__drawer nav a:focus-visible::after,
.scm-header__nav .wp-block-navigation-item__content:hover::after,
.scm-header__nav .wp-block-navigation-item__content:focus-visible::after,
.scm-header__drawer-nav .wp-block-navigation-item__content:hover::after,
.scm-header__drawer-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

.scm-header__reserve {
	align-items: center;
	align-self: stretch;
	background: var(--scm-primary);
	border-bottom-left-radius: var(--scm-radius-m);
	display: inline-flex;
	font-family: var(--scm-sans);
	font-size: var(--scm-font-small);
	font-weight: 700;
	gap: var(--scm-space-xs);
	height: auto;
	justify-content: center;
	min-width: 118px;
	padding: 0 var(--scm-space-l);
	transition: filter 160ms ease, border-radius 200ms ease;
}

.scm-header__reserve-icon {
	height: 16px;
	width: auto;
}

.scm-header__reserve:hover,
.scm-header__reserve:focus-visible,
.scm-button .wp-block-button__link:hover,
.scm-button .wp-block-button__link:focus-visible {
	filter: brightness(1.08);
}

/* デスクトップではモバイルドロワー nav を隠す。WP が nav に付ける .is-layout-flex /
   .wp-container-* の display:flex (specificity 0,1,0) に勝つよう .scm-header を前置き
   して 0,2,0 にする（下の 1023px 表示ルールも同specificityで揃える）。 */
.scm-header .scm-header__drawer-nav {
	display: none;
}

/* ドロワーの見た目（仕様: 明るいフロストの“透かし”オーバーレイ＋控えめな背後ブラー）。
   パネルは半透明 rgba(247,249,249,0.5) の軽いフロスト面にする——α を上げすぎると背後が
   透けず「オーバーレイの透かし効果」が死ぬので低め。背後 main/footer を控えめに filter:blur
   して、その上にフロストで透かす。backdrop-filter は fixed 内で脆弱なので使わず main を直接
   ぼかす。opacity フェード・項目 stagger は onesta 標準アニメに委ねる（＝テーマ/コア準拠の
   開閉アニメ。ヘッダーは別要素の実背景バーなので、パネルがフェードしてもヘッダーは
   ちらつかない）。リンク文字は #738991（ブランドのティール）。 */
body.onesta-drawer-blur .scm-header__drawer-nav .wp-block-navigation__responsive-container {
	--onesta-drawer-bg: rgba(247, 249, 249, 0.65);
	--onesta-drawer-text: #738991;
	/* ===== [A⇔B] 現在 B。以下は A 専用（onesta の backdrop-filter を無効化して
	   main を直接 filter:blur する方式）。B は onesta 既定の panel backdrop-filter を
	   使うので無効化しない。A に戻すには下2行と、続く main/footer の filter:blur
	   ブロックのコメントを解除する。
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	===== */
}

/* [A⇔B] A 専用: 背後 main/footer を filter:blur（backdrop-filter を使わない方式）。
   B（onesta 既定・panel の backdrop-filter）では不要。A に戻すならコメント解除:
body:has(.scm-header__drawer-nav .onesta-drawer-toggle:checked) .wp-site-blocks > main,
body:has(.scm-header__drawer-nav .onesta-drawer-toggle:checked) .wp-site-blocks > footer {
	filter: blur(10px);
}
*/

/* メニューのリンク文字色を #738991 に。onesta の scroll_header_text / header 設定が
   `.wp-site-blocks > header ... a { color:#fff !important }`（詳細度 0,3,2）を注入して
   パネルの色を上書きしているため、より高い詳細度（0,4,2）＋!important で打ち消す。
   対象はドロワーパネル内のリンクのみ（ロゴ/予約/デスクトップnavには効かない）。 */
body.onesta-drawer-blur .scm-header__drawer-nav.wp-block-navigation .wp-block-navigation__responsive-container a:where(:not(.wp-element-button)) {
	color: var(--onesta-drawer-text, #738991) !important;
}

/* ドロワーのメニューリスト: 中央寄せ＋各項目に区切り線（最後は無し） */
.scm-header__drawer-nav {
	text-align: center;
	width: 100%;
}

body.onesta-drawer-blur nav:has(.onesta-drawer-toggle:checked) .wp-block-navigation-item {
	border-bottom: 1px solid #e3ebec;
}

body.onesta-drawer-blur nav:has(.onesta-drawer-toggle:checked) .wp-block-navigation-item:last-of-type {
	border-bottom: none;
}

.scm-section {
	padding-block: var(--scm-section-y-compact);
}

.scm-section + .scm-section {
	margin-block-start: 0;
}

.scm-section-head {
	box-sizing: border-box;
	margin-inline: auto;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-section-head--wide {
	width: min(100%, var(--scm-wide));
}

.scm-section-kicker {
	color: var(--scm-button);
	font-family: var(--scm-en);
	font-size: 62px;
	font-weight: 700;
	line-height: 1;
}

.scm-section-sub {
	color: var(--scm-button);
	font-family: var(--scm-en);
	font-size: var(--scm-font-small);
	line-height: 1.2;
	margin-block-start: var(--scm-space-2xs);
}

.scm-home .scm-section > .onesta-hgroup {
	color: var(--scm-text);
	margin: var(--scm-space-l);
	padding: 0 var(--scm-gutter);
	text-align: left;
	width: min(100%, var(--scm-wide));
}

.scm-home .scm-section:is(.scm-guide, .scm-philosophy, .scm-news) > .onesta-hgroup {
	color: var(--scm-text);
}

.scm-home .onesta-parallax__content > .onesta-hgroup,
.scm-home .onesta-section__content > .onesta-hgroup {
	color: var(--scm-white);
	margin: 0;
	padding: 0;
	text-align: left;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.38);
	width: auto;
}

.scm-home .scm-section > .onesta-hgroup .onesta-hgroup__title,
.scm-home .onesta-parallax__content > .onesta-hgroup .onesta-hgroup__title,
.scm-home .onesta-section__content > .onesta-hgroup .onesta-hgroup__title {
	color: inherit;
	font-family: var(--scm-en);
	font-size: clamp(16px, 1.35vw, 20px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	text-transform: uppercase;
}

.scm-home .scm-section > .onesta-hgroup .onesta-hgroup__title:is(h2),
.scm-home .onesta-parallax__content > .onesta-hgroup .onesta-hgroup__title:is(h2),
.scm-home .onesta-section__content > .onesta-hgroup .onesta-hgroup__title:is(h2) {
	font-size: clamp(20px, 2.85vw, 36px);
}

.scm-home .scm-section > .onesta-hgroup .onesta-hgroup__lead,
.scm-home .onesta-parallax__content > .onesta-hgroup .onesta-hgroup__lead,
.scm-home .onesta-section__content > .onesta-hgroup .onesta-hgroup__lead {
	color: inherit;
	font-family: var(--scm-sans);
	font-size: clamp(9px, 0.75vw, 10px);
	letter-spacing: 0;
	line-height: 1.2;
	margin-block-start: var(--scm-space-3xs);
}

.scm-content-title {
	font-family: var(--scm-serif);
	font-size: var(--scm-font-xxl);
	font-weight: 500;
	line-height: 1.8;
}

.scm-content-text {
	font-family: var(--scm-sans);
	line-height: 2.2;
	margin-block-start: var(--scm-space-l);
}

.scm-button .wp-block-button__link {
	align-items: center;
	background: var(--scm-button);
	border-radius: var(--scm-radius-pill);
	color: var(--scm-white);
	display: inline-flex;
	font-family: var(--scm-en);
	font-size: var(--scm-font-small);
	font-weight: 400;
	gap: var(--scm-space-xs);
	justify-content: center;
	letter-spacing: 0;
	min-width: 128px;
	padding: calc(var(--scm-space-xs) / 2) var(--scm-space-3xl);
	position: relative;
	transition: filter 160ms ease;
}

.scm-button .wp-block-button__link::after {
	background: url("../img/common/arrow.png") center / contain no-repeat;
	content: "";
	flex: 0 0 6px;
	height: 10px;
	position: absolute;
	right: var(--scm-space-l);
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
}

.scm-hero {
	min-height: clamp(620px, 72vh, 780px) !important;
	position: relative;
}

.scm-hero::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.02) 42%, rgba(0, 0, 0, 0.12));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

/*
 * トップのFVは wp:cover（動画）と onesta/section（動画/画像切替可）を
 * 差し替え運用する。どちらも .scm-hero を付与するが、実際のコンテンツ
 * ラッパーはブロックごとに別要素（.wp-block-cover__inner-container /
 * .onesta-section__content）になるため、両方に同じ配置を当てる。
 */
.scm-hero .wp-block-cover__inner-container,
.scm-hero .onesta-section__content {
	align-items: end;
	align-self: stretch;
	box-sizing: border-box;
	display: grid;
	justify-content: normal;
	max-width: none;
	padding-inline: var(--scm-gutter);
	padding-block-end: var(--scm-hero-bottom);
	padding-block-start: 0;
	position: relative;
	z-index: 2;
}

.scm-hero__content {
	display: grid;
	gap: 0;
	justify-items: center;
	margin-block-start: 0;
}

.scm-hero__copy {
	color: var(--scm-white);
	font-family: var(--scm-en);
	font-size: var(--scm-font-display);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	text-align: center;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
}

.scm-hero__banners {
	gap: var(--scm-space-xs);
	max-width: 738px;
	width: 100%;
}

.scm-hero-banner {
	border-radius: var(--scm-radius-l);
	color: var(--scm-white);
	display: grid;
	flex: 0 0 365px;
	grid-template-columns: 150px minmax(0, 1fr);
	height: 90px;
	overflow: hidden;
	text-decoration: none;
	transition: filter 160ms ease, transform 160ms ease;
}

.scm-hero-banner img {
	height: 90px;
	object-fit: cover;
	width: 150px;
}

.scm-hero-banner__body {
	display: grid;
	gap: var(--scm-space-xs);
	padding: var(--scm-space-m) var(--scm-space-l);
}

.scm-hero-banner--stay .scm-hero-banner__body {
	background: #55b6d5;
}

.scm-hero-banner--restaurant .scm-hero-banner__body {
	background: #f4ad42;
}

.scm-hero-banner__eyebrow {
	font-family: var(--scm-en);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.scm-hero-banner__title {
	font-family: var(--scm-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
}

.scm-hero-banner:hover,
.scm-hero-banner:focus-within {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.scm-hero-card {
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
	box-sizing: border-box;
	color: var(--scm-white);
	min-height: 58px;
	min-width: min(255px, calc(50vw - 28px));
	padding: 11px 18px 12px;
}

.scm-hero-card--blue {
	background: #55b6d5;
}

.scm-hero-card--orange {
	background: #f4ad42;
}

.scm-hero-card__eyebrow {
	font-family: var(--scm-en);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.scm-hero-card__title {
	font-family: var(--scm-sans);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	margin-block-start: var(--scm-space-3xs);
}

.scm-concept {
	padding-block: var(--scm-section-y-loose) var(--scm-section-y-wide);
}

.scm-concept__compass {
	margin-inline: auto;
	width: min(272px, 42vw);
}

.scm-concept__title {
	font-size: 54px;
	font-weight: 500;
	line-height: 1.8;
	margin-block-start: var(--scm-space-2xl);
}

.scm-concept__lead,
.scm-concept__text {
	font-family: var(--scm-sans);
	line-height: 2.1;
	margin-inline: auto;
	max-width: 560px;
}

.scm-concept__lead {
	margin-block-start: var(--scm-space-xl);
}

.scm-concept__text {
	margin-block-start: var(--scm-space-s);
}

.scm-stay {
	background: var(--scm-white);
	padding-block-start: var(--scm-section-y-compact);
}

.scm-stay__rail {
	display: flex;
	gap: clamp(14px, 2vw, 26px);
	margin-block-start: var(--scm-space-l);
	overflow-x: auto;
	padding: 0 max(var(--scm-space-xl), calc((100vw - var(--scm-wide)) / 2)) var(--scm-space-s);
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.scm-stay-card {
	flex: 0 0 clamp(300px, 48vw, 560px);
	scroll-snap-align: center;
}

.scm-stay-card__image {
	border-radius: var(--scm-radius-m);
	overflow: hidden;
}

.scm-stay-card__image img {
	aspect-ratio: 12 / 5;
	border-radius: inherit;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.scm-stay-card__image--mb {
	display: none;
}

.scm-stay .onesta-carousel {
	margin-block-start: var(--scm-space-l);
}

.scm-stay .onesta-carousel__slide {
	position: relative;
	width: clamp(720px, 67vw, 960px) !important;
}

.scm-stay .onesta-carousel__slide::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.36));
	border-radius: var(--scm-radius-m);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.scm-stay .onesta-carousel__slide figure {
	border-radius: var(--scm-radius-m);
	margin: 0;
	overflow: hidden;
}

.scm-stay .onesta-carousel__slide img {
	aspect-ratio: 12 / 5;
	border-radius: inherit;
	display: block;
	height: auto;
	max-width: none;
	object-fit: cover;
	width: 100%;
}

.scm-stay .onesta-carousel__slide > .onesta-hgroup {
	bottom: -15px;
	color: var(--scm-white);
	left: 50%;
	margin: 0;
	position: absolute;
	text-align: center;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.36);
	transform: translateX(-50%);
	width: min(calc(100% - 48px), 720px);
	z-index: 2;
}

.scm-stay .onesta-carousel__slide > .onesta-hgroup .onesta-hgroup__title {
	color: var(--scm-white);
	font-family: var(--scm-serif);
	font-size: clamp(24px, 2.1vw, 30px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.5;
	margin: 0;
}

.scm-stay .onesta-carousel__slide > .onesta-hgroup .onesta-hgroup__lead {
	align-items: center;
	background: rgba(0, 0, 0, 0.26);
	border-radius: var(--scm-radius-pill);
	color: var(--scm-white);
	display: inline-flex;
	font-family: var(--scm-en);
	font-size: 13px;
	font-weight: 400;
	justify-content: center;
	line-height: 1;
	margin-block-start: var(--scm-space-xs);
	min-height: 28px;
	min-width: 148px;
	padding: 0 var(--scm-space-l);
	position: relative;
	text-shadow: none;
}

.scm-stay .onesta-carousel__slide > .onesta-hgroup .onesta-hgroup__lead::after {
	background: url("../img/common/arrow.png") center / contain no-repeat;
	content: "";
	height: 10px;
	position: absolute;
	right: var(--scm-space-s);
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
}

.scm-stay .onesta-carousel__slide > .onesta-hgroup .onesta-hgroup__lead a {
	color: inherit;
	text-decoration: none;
}

.scm-stay .splide__slide:has( .onesta-hgroup__lead a ) {
	cursor: pointer;
}

.scm-stay .splide__pagination,
.scm-rooms .splide__pagination {
	gap: var(--scm-space-xs);
	padding: var(--scm-space-m) 0 0;
}

.scm-stay .splide__pagination__page,
.scm-rooms .splide__pagination__page {
	background: rgba(115, 137, 145, 0.28);
	border-radius: var(--scm-radius-pill);
	height: 6px;
	transform: none;
	width: 70px;
}

.scm-stay .splide__pagination__page.is-active,
.scm-rooms .splide__pagination__page.is-active {
	background: var(--scm-button);
	transform: none;
}

.scm-section-note {
	margin-block-start: var(--scm-space-3xl);
	padding-inline: var(--scm-gutter);
}

.scm-section-note p {
	font-family: var(--scm-sans);
	line-height: 2;
}

.scm-section-note .wp-block-buttons {
	margin-block-start: var(--scm-space-l);
}

.scm-photo-band {
	padding: 0;
}

.scm-photo-band .wp-block-cover__inner-container {
	align-items: flex-end;
	display: flex;
	height: 100%;
	position: relative;
	width: 100%;
}

.scm-band-title {
	box-sizing: border-box;
	color: var(--scm-white);
	margin-inline: auto;
	padding: 0 var(--scm-gutter) var(--scm-space-2xl);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.36);
	width: min(100%, var(--scm-wide));
}

.scm-band-title .scm-section-kicker,
.scm-band-title .scm-section-sub {
	color: var(--scm-white);
}

.scm-rooms,
.scm-restaurant,
.scm-facilities {
	background: var(--scm-white);
	padding-block: 0;
}

.scm-home .onesta-parallax {
	--scm-parallax-extra: clamp(40px, 4vw, 64px);
	min-height: var(--onesta-parallax-min-h-mobile, var(--onesta-parallax-min-h, 60vh)) !important;
}

@media (min-width: 769px) {
	.scm-home .onesta-parallax {
		min-height: var(--onesta-parallax-min-h, 60vh) !important;
	}
}

.scm-home .onesta-parallax__bg {
	inset: 0 0 auto;
	height: calc(100% + var(--scm-parallax-extra));
	max-width: none;
	object-fit: cover;
	width: 100%;
}

.scm-home .onesta-parallax__content {
	inset: auto auto 50px 50px;
	margin: 0;
	max-width: none;
	padding: 0;
	position: absolute;
	width: min(calc(100% - 100px), var(--scm-wide));
}

.scm-split {
	--scm-split-col-min: 440px;
	--scm-split-gap: clamp(36px, 5vw, 72px);

	box-sizing: border-box;
	gap: var(--scm-split-gap);
	margin-inline: auto;
	padding: var(--scm-section-y-compact) var(--scm-gutter);
	width: min(100%, calc((var(--scm-split-col-min) * 2) + var(--scm-split-gap) + (var(--scm-gutter) * 2)));
}

.scm-split.wp-block-columns > .wp-block-column {
	flex: 1 1 var(--scm-split-col-min) !important;
	min-width: var(--scm-split-col-min);
}

.scm-rooms .onesta-carousel__slide {
	display: grid;
	place-items: center;
	width: 100% !important;
}

.scm-split__media figure,
.scm-food-gallery figure,
.scm-food-gallery__thumbs figure,
.scm-philosophy__image {
	border-radius: var(--scm-radius-m);
	margin: auto;
	overflow: hidden;
	width: fit-content;
}

.scm-room-image img,
.scm-food-gallery__main img,
.scm-philosophy__image img {
	aspect-ratio: 1 / 1;
	border-radius: inherit;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.scm-food-gallery {
	display: grid;
	gap: var(--scm-space-m);
}

.scm-food-gallery__thumbs {
	gap: var(--scm-space-m);
}

.scm-food-gallery__thumbs figure {
	flex: 0 0 calc(50% - 7px);
}

.scm-food-gallery__thumbs img {
	aspect-ratio: 1 / 1;
	border-radius: inherit;
	object-fit: cover;
	width: 100%;
}

.scm-facilities__body {
	padding: var(--scm-section-y) var(--scm-gutter);
}

.scm-icon-grid {
	display: grid;
	gap: clamp(14px, 2vw, 24px);
	grid-template-columns: repeat(10, minmax(0, 1fr));
	margin-inline: auto;
	max-width: 1000px;
}

.scm-icon-grid figure {
	align-items: center;
	display: flex;
	justify-content: center;
}

.scm-icon-grid img {
	display: block;
	height: 64px;
	width: auto;
}

.scm-icon-grid figure {
	transform-origin: 50% 55%;
	will-change: opacity, transform, filter;
}

.scm-facilities__body .scm-content-title {
	margin-block-start: var(--scm-space-4xl);
}

.scm-facilities__body .wp-block-buttons {
	margin-block-start: var(--scm-space-l);
}

.scm-guide,
.scm-news {
	background: var(--scm-bg);
}

.scm-guide-grid.onesta-grid {
	gap: var(--scm-space-m);
	margin: var(--scm-space-3xl) auto 0;
	max-width: none;
	padding-inline: var(--scm-gutter);
	width: min(100%, 1000px);
}

.scm-guide-grid .onesta-grid__item {
	border-radius: var(--scm-radius-m);
	display: block;
	overflow: hidden;
	position: relative;
	width: min(100%, 300px);
	justify-self: center;
}

.scm-guide-grid .onesta-grid__item::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.36));
	border-radius: inherit;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.scm-guide-grid figure {
	align-items: center;
	border-radius: inherit;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.scm-guide-grid img {
	aspect-ratio: 1 / 1;
	border-radius: inherit;
	display: block;
	height: auto;
	margin-inline: auto;
	object-fit: cover;
	transition: transform 220ms ease;
	width: 100%;
}

.scm-guide-grid ul {
	align-items: center;
	bottom: var(--scm-space-xs);
	color: var(--scm-white);
	display: flex;
	flex-wrap: wrap;
	font-family: var(--scm-en);
	font-size: 12px;
	gap: var(--scm-space-xs);
	justify-content: center;
	left: 50%;
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
	transform: translateX(-50%);
	width: calc(100% - 24px);
	z-index: 2;
}

.scm-guide-grid li {
	align-items: center;
	display: inline-flex;
	white-space: nowrap;
}

.scm-guide-grid li::before {
	background: center / contain no-repeat;
	content: "";
	display: inline-block;
	filter: brightness(0) invert(1);
	height: 14px;
	margin-right: 0.5rem;
	width: 14px;
}

.scm-guide-grid li:first-child::before {
	background-image: url("../img/icon/icon-arrow-two-way.png");
}

.scm-guide-grid li:nth-child(2)::before {
	background-image: url("../img/icon/icon-time.png");
}

.scm-guide-grid .onesta-grid__item:hover img {
	transform: scale(1.035);
}

.scm-philosophy {
	background: var(--scm-white);
}

.scm-split--philosophy {
	width: min(100%, calc((var(--scm-split-col-min) * 2) + var(--scm-split-gap) + (var(--scm-gutter) * 2)));
}

.scm-news-list {
	margin-inline: auto;
	margin-block-start: var(--scm-space-3xl);
	padding-inline: var(--scm-gutter);
	width: min(100%, 720px);
}

.scm-news-list.onesta-post-list {
	padding-block: 0;
}

.scm-news-list .onesta-post-list__grid {
	border-top: 1px solid rgba(115, 137, 145, 0.34);
	gap: 0;
}

.scm-news-list .onesta-post-list__item {
	border-bottom: 1px solid rgba(115, 137, 145, 0.34);
}

.scm-news-list .onesta-post-list__card {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	display: block;
	transform: none;
}

.scm-news-list .onesta-post-list__card:hover {
	box-shadow: none;
	transform: none;
}

.scm-news-list .onesta-post-list__body {
	align-items: center;
	display: grid;
	font-family: var(--scm-sans);
	gap: var(--scm-space-l);
	grid-template-columns: 112px minmax(0, 1fr) auto;
	line-height: 1.6;
	padding: var(--scm-space-m) 0;
}

.scm-news-list .onesta-post-list__body::after {
	background-color: var(--scm-button);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 5.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: 55% center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	border-radius: 50%;
	content: "";
	height: 22px;
	width: 22px;
}

.scm-news-list .onesta-post-list__date {
	color: var(--scm-text);
	font-family: var(--scm-en);
	font-size: var(--scm-font-small);
	font-weight: 500;
}

.scm-news-list .onesta-post-list__title {
	font-family: var(--scm-sans);
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
}

.scm-news-list .onesta-post-list__title a {
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease;
}

.scm-news-list .onesta-post-list__title a:hover,
.scm-news-list .onesta-post-list__title a:focus-visible {
	color: var(--scm-button);
}

.scm-news-item {
	align-items: center;
	border-bottom: 1px solid rgba(115, 137, 145, 0.34);
	display: grid;
	font-family: var(--scm-sans);
	gap: var(--scm-space-l);
	grid-template-columns: 112px minmax(0, 1fr);
	line-height: 1.6;
	padding-block: var(--scm-space-s);
}

.scm-news-item time {
	color: var(--scm-button);
	font-family: var(--scm-en);
	font-size: var(--scm-font-small);
	font-weight: 400;
}

.scm-news-item a {
	color: inherit;
	text-decoration: none;
	text-decoration-color: var(--scm-primary);
	text-decoration-thickness: 5px;
	text-underline-offset: -2px;
	transition: color 160ms ease, text-decoration-color 160ms ease;
}

.scm-news-item a:hover,
.scm-news-item a:focus-visible {
	color: var(--scm-button);
}

.scm-news__button {
	margin-block-start: var(--scm-space-xl);
}

.scm-footer-visual {
	min-height: clamp(320px, 38vw, 560px) !important;
}

.scm-footer {
	background: var(--scm-button);
	color: var(--scm-white);
	font-family: var(--scm-serif);
	margin-block-start: 0;
	padding: clamp(76px, 9vw, 112px) var(--scm-gutter) clamp(28px, 4vw, 42px);
}

@media (min-width: 1024px) {
	.osc-site-scm .wp-site-blocks {
		background: var(--scm-button);
	}

	.osc-site-scm .onestar-template-main--front {
		background: var(--scm-bg);
		position: relative;
		z-index: 1;
	}

	.osc-site-scm .scm-footer {
		bottom: 0;
		position: sticky;
		z-index: 0;
	}
}

.scm-footer a {
	color: inherit;
	text-decoration: none;
}

.scm-footer__inner {
	display: grid;
	gap: clamp(26px, 4vw, 46px);
	margin-inline: auto;
	max-width: 840px;
}

.scm-footer__sitemap {
	display: grid;
	gap: clamp(32px, 6.8vw, 88px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1.28fr);
}

.scm-footer__column {
	align-content: start;
	display: grid;
	gap: 26px;
}

.scm-footer__group {
	display: grid;
	gap: 13px;
}

.scm-footer__column a {
	display: block;
	font-size: clamp(13px, 1.35vw, 15px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.55;
	opacity: 0.92;
	transition: opacity 180ms ease, transform 180ms ease;
}

.scm-footer__column a:not(.scm-footer__heading)::before {
	content: "- ";
}

.scm-footer__column a:hover,
.scm-footer__column a:focus-visible,
.scm-footer__legal a:hover,
.scm-footer__legal a:focus-visible {
	opacity: 1;
	transform: translateY(-1px);
}

.scm-footer__heading {
	margin-block-end: 4px;
	opacity: 1 !important;
}

.scm-footer__brand {
	display: grid;
	gap: 18px;
	justify-items: center;
	margin-block-start: clamp(4px, 2.4vw, 22px);
	text-align: center;
}

.scm-footer__logo {
	height: auto;
	width: 76px;
}

.scm-footer__hotel,
.scm-footer__address,
.scm-footer__copy {
	font-size: clamp(12px, 1.15vw, 14px);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.8;
	margin: 0;
}

.scm-footer__address {
	display: grid;
	gap: 6px;
}

.scm-footer__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-block-start: 2px;
}

.scm-footer__buttons a {
	align-items: center;
	background: rgba(82, 104, 113, 0.64);
	border-radius: var(--scm-radius-pill);
	display: inline-flex;
	font-size: clamp(12px, 1.1vw, 14px);
	justify-content: center;
	line-height: 1;
	min-height: 28px;
	min-width: 162px;
	padding: 0 34px 1px;
	position: relative;
	transition: background-color 180ms ease, transform 180ms ease;
}

.scm-footer__buttons a::after {
	border-right: 1px solid currentColor;
	border-top: 1px solid currentColor;
	content: "";
	height: 6px;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
	width: 6px;
}

.scm-footer__buttons a:hover,
.scm-footer__buttons a:focus-visible {
	background: rgba(70, 91, 100, 0.78);
	transform: translateY(-1px);
}

.scm-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 32px;
	justify-content: center;
	margin-block-start: -4px;
	text-align: center;
}

.scm-footer__legal a {
	font-size: clamp(12px, 1.1vw, 14px);
	line-height: 1.5;
	opacity: 0.92;
	transition: opacity 180ms ease, transform 180ms ease;
}

.scm-footer__copy {
	text-align: center;
}

@media (max-width: 1023px) {
	.scm-header {
		gap: 0;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
	}

	.scm-header__nav {
		display: none !important;
	}

	.scm-header__brand {
		grid-column: 1;
	}

	.scm-header__reserve {
		grid-column: 3;
		min-width: 92px;
		padding-inline: var(--scm-space-m);
	}

	.scm-header .scm-header__drawer-nav {
		align-items: center;
		display: flex;
		grid-column: 4;
		justify-content: flex-end;
	}

	.scm-split.wp-block-columns {
		flex-direction: column !important;
		width: min(100%, 640px);
	}

	.scm-split.wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 767px) {
	:root {
		--scm-header-h: 58px;
	}

	body.admin-bar .scm-header {
		top: 46px;
	}

	.scm-header {
		padding-inline: 0;
	}

	.scm-header__mark {
		height: 30px;
		width: 30px;
	}

	.scm-header__name {
		max-width: 148px;
	}

	.scm-header__reserve {
		height: 34px;
		min-width: 78px;
	}

	.scm-header__reserve-icon {
		height: 14px;
	}

	.scm-hero {
		min-height: 640px !important;
	}

	.scm-hero__content {
		gap: 210px;
		margin-block-start: var(--scm-space-3xl);
	}

	.scm-hero__copy {
		font-size: var(--scm-font-xl);
	}

	.scm-section-kicker {
		font-size: var(--scm-font-xl);
	}

	.scm-concept__title {
		font-size: var(--scm-font-xxl);
	}

	/* スマホは 2 バナーを縦積み・文字少し大きく・角丸は半分（20→10px）。 */
	.scm-hero__banners {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		max-width: min(100%, 340px);
		width: min(100%, 340px);
	}

	.scm-hero-banner {
		border-radius: 10px;
		flex: 0 0 auto;
		grid-template-columns: 72px minmax(0, 1fr);
		height: 60px;
		min-width: 0;
		width: 100%;
	}

	.scm-hero-banner img {
		height: 60px;
		width: 72px;
	}

	.scm-hero-banner__body {
		gap: var(--scm-space-3xs);
		padding: var(--scm-space-xs) var(--scm-space-m);
	}

	.scm-hero-banner__eyebrow {
		font-size: 11px;
	}

	.scm-hero-banner__title {
		font-size: 13px;
	}

	.scm-section {
		padding-block: var(--scm-section-y);
	}

	.scm-concept {
		padding-block: var(--scm-section-y-loose) var(--scm-section-y-wide);
	}

	.scm-stay-card {
		flex-basis: 74vw;
	}

	.scm-stay-card__image--pc {
		display: none;
	}

	.scm-stay-card__image--mb {
		display: block;
	}

	.scm-stay-card__image img {
		aspect-ratio: 63 / 40;
	}

	.scm-stay .onesta-carousel__slide {
		width: min(82vw, 630px) !important;
	}

	.scm-stay .onesta-carousel__slide img {
		aspect-ratio: 63 / 40;
	}

	.scm-photo-band {
		min-height: 430px !important;
	}

	.scm-photo-band--rooms .wp-block-cover__image-background {
		object-position: 63% center;
	}

	.scm-photo-band--restaurant .wp-block-cover__image-background {
		object-position: center center;
	}

	.scm-photo-band--facilities .wp-block-cover__image-background {
		object-position: 56% center;
	}

	.scm-split {
		padding-block: var(--scm-section-y-compact) var(--scm-section-y-loose);
	}

	.scm-split--restaurant {
		flex-direction: column-reverse !important;
	}

	.scm-icon-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		max-width: 320px;
	}

	.scm-guide-grid {
		gap: 10px;
		width: min(100%, 370px);
	}

	.scm-news-item {
		grid-template-columns: 84px minmax(0, 1fr);
	}

	.scm-news-list .onesta-post-list__body {
		gap: var(--scm-space-s);
		grid-template-columns: 84px minmax(0, 1fr) auto;
	}

	.scm-footer-visual {
		min-height: 360px !important;
	}

	.scm-footer-visual .wp-block-cover__image-background {
		object-position: 58% center;
	}

	.scm-footer__inner {
		text-align: center;
	}

	.scm-footer__sitemap {
		gap: 34px;
		grid-template-columns: 1fr;
	}

	.scm-footer__column,
	.scm-footer__group {
		justify-items: center;
	}

	.scm-footer__column {
		gap: 30px;
	}

	.scm-footer__buttons {
		gap: 10px;
	}

	.scm-footer__buttons a {
		min-width: min(210px, 100%);
	}

	.scm-footer__legal {
		gap: 12px 22px;
	}
}

@media (min-width: 1200px) {
	.scm-hero {
		min-height: 760px !important;
	}

	.scm-photo-band {
		min-height: 520px !important;
	}

	.scm-stay-card {
		flex-basis: 560px;
	}

	.scm-split {
		width: min(100%, calc((var(--scm-split-col-min) * 2) + var(--scm-split-gap) + (var(--scm-gutter) * 2)));
	}
}

/*
 * Sub pages (body.scm-page / scm-module components).
 * Frame rules mirror the front page so tone stays identical.
 */

.scm-page .onestar-page-main {
	background: var(--scm-bg);
	color: var(--scm-text);
	font-family: var(--scm-serif);
	margin: 0;
	overflow: clip;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 1;
}

.scm-page .onestar-template-main--page > .wp-block-post-content {
	max-width: none;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100%;
}

.scm-page .wp-block-post-content > * {
	margin-block: 0;
}

.scm-page .onestar-page-main img,
.scm-page .onestar-page-main video {
	display: block;
	max-width: 100%;
}

/* scm-module のマージンリセットはファイル前方（.scm-home リセット直後）にある */

.scm-module > .onesta-hgroup {
	color: var(--scm-text);
	margin: 0 auto;
	padding: 0 var(--scm-gutter);
	text-align: left;
	width: min(100%, var(--scm-content));
}

.scm-module > .onesta-hgroup .onesta-hgroup__title {
	color: inherit;
	font-family: var(--scm-en);
	font-size: clamp(20px, 2.85vw, 36px);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	text-transform: uppercase;
}

.scm-module > .onesta-hgroup .onesta-hgroup__lead {
	color: inherit;
	font-family: var(--scm-sans);
	font-size: clamp(9px, 0.75vw, 10px);
	letter-spacing: 0;
	line-height: 1.2;
	margin-block-start: var(--scm-space-3xs);
}

.scm-page-points > .onesta-hgroup,
.scm-page-cards > .onesta-hgroup {
	width: min(100%, var(--scm-wide));
}

.scm-section--white {
	background: var(--scm-white);
}

/* Page hero (onesta/section hero-image band + page title; some legacy pages may still use wp:cover) */

.scm-page-hero {
	padding-block: 0;
}

.scm-page-cta__band .wp-block-cover__inner-container {
	align-items: center;
	align-self: stretch;
	display: flex;
	justify-content: center;
}

.scm-page-hero__cover {
	align-items: flex-end;
	min-height: 260px !important;
	width: 100%;
}

.scm-page-hero__cover .wp-block-cover__image-background,
.scm-page-hero__cover .onesta-section__hero {
	object-fit: cover;
}

.scm-page-hero__cover .wp-block-cover__inner-container,
.scm-page-hero__cover .onesta-section__content {
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
	z-index: 2;
}

.scm-band-title .scm-page-hero__title {
	font-weight: 400;
}

/* Intro */

.scm-page-intro {
	padding-block: var(--scm-section-y-loose);
}

.scm-page-intro .scm-content-text {
	margin-inline: auto;
	max-width: 560px;
}

/* Timeline (onesta/timeline を SCM トーンでスキン / シングルカラム幅広・ビジュアル主体) */

.scm-page-timeline {
	--scm-tl-rail: 0.75rem;
	--scm-tl-indent: 2.75rem;
}

.scm-page-timeline .onesta-timeline {
	margin-block-start: var(--scm-space-xl);
	max-width: none;
	padding: 0 var(--scm-gutter);
}

.scm-page-timeline .onesta-timeline__inner {
	max-width: min(100%, 860px);
}

/* ブロック標準の交互レイアウトを打ち消し、全幅でシングルカラムに固定 */
.scm-page-timeline .onesta-timeline__track {
	--onesta-timeline-line-left: var(--scm-tl-rail);
	display: block;
	padding-inline-start: var(--scm-tl-indent);
}

.scm-page-timeline .onesta-timeline__track::before {
	background: rgba(115, 137, 145, 0.28);
	left: var(--scm-tl-rail);
}

.scm-page-timeline .onesta-timeline-item,
.scm-page-timeline .onesta-timeline-item:nth-child(odd),
.scm-page-timeline .onesta-timeline-item:nth-child(even) {
	align-self: auto;
	padding-block-end: var(--scm-space-3xl);
	text-align: left;
	width: 100%;
}

.scm-page-timeline .onesta-timeline-item:nth-child(n):last-child {
	padding-block-end: 0;
}

.scm-page-timeline .onesta-timeline-item:nth-child(odd)::before,
.scm-page-timeline .onesta-timeline-item:nth-child(even)::before {
	background: var(--scm-primary);
	border-color: var(--scm-bg);
	box-shadow: 0 0 0 2px var(--scm-primary);
	height: 1rem;
	left: calc(var(--scm-tl-rail) - var(--scm-tl-indent));
	top: 0.45rem;
	width: 1rem;
}

.scm-section--white .onesta-timeline-item:nth-child(odd)::before,
.scm-section--white .onesta-timeline-item:nth-child(even)::before {
	border-color: var(--scm-white);
}

.scm-page-timeline .onesta-timeline-item__date {
	color: var(--scm-button);
	font-family: var(--scm-en);
	font-size: var(--scm-font-xxl);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin-block-end: var(--scm-space-2xs);
}

.scm-page-timeline .onesta-timeline-item__title {
	color: var(--scm-text);
	font-family: var(--scm-serif);
	font-size: var(--scm-font-xl);
	font-weight: 500;
	line-height: 1.6;
	margin-block-end: var(--scm-space-m);
}

.scm-page-timeline .onesta-timeline-item__content {
	color: var(--scm-text);
	font-family: var(--scm-sans);
	font-size: var(--scm-font-medium);
	line-height: 2;
}

.scm-page-timeline .onesta-timeline-item__content .wp-block-image {
	margin-block-end: var(--scm-space-m);
}

.scm-page-timeline .onesta-timeline-item__content .wp-block-image img {
	border-radius: var(--scm-radius-m);
	display: block;
	height: auto;
	width: 100%;
}

@media (min-width: 768px) {
	.scm-page-timeline {
		--scm-tl-indent: 3.25rem;
	}

	.scm-page-timeline .onesta-timeline-item,
	.scm-page-timeline .onesta-timeline-item:nth-child(odd),
	.scm-page-timeline .onesta-timeline-item:nth-child(even) {
		padding-block-end: var(--scm-space-4xl);
	}

	.scm-page-timeline .onesta-timeline-item:nth-child(n):last-child {
		padding-block-end: 0;
	}

	.scm-page-timeline .onesta-timeline-item:nth-child(odd)::before,
	.scm-page-timeline .onesta-timeline-item:nth-child(even)::before {
		top: 0.65rem;
	}
}

/* Point cards */

.scm-point-grid {
	display: grid;
	gap: clamp(14px, 2vw, 24px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: var(--scm-space-2xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-wide));
}

.scm-point {
	background: var(--scm-white);
	border-radius: var(--scm-radius-m);
	padding: clamp(24px, 2.4vw, 36px);
}

.scm-point__num {
	color: var(--scm-primary);
	font-family: var(--scm-en);
	font-size: var(--scm-font-xl);
	font-weight: 700;
	line-height: 1;
}

.scm-point__title {
	font-family: var(--scm-serif);
	font-size: var(--scm-font-xl);
	font-weight: 500;
	line-height: 1.6;
	margin-block-start: var(--scm-space-m);
}

.scm-point__text {
	font-family: var(--scm-sans);
	font-size: var(--scm-font-medium);
	line-height: 2;
	margin-block-start: var(--scm-space-s);
}

/* Staff voice */

.scm-voice {
	background: var(--scm-white);
	border-radius: var(--scm-radius-m);
	margin: var(--scm-space-2xl) auto 0;
	padding: var(--scm-space-3xl) var(--scm-space-2xl);
	position: relative;
	width: min(calc(100% - var(--scm-gutter) * 2), var(--scm-content));
}

.scm-voice::before {
	color: var(--scm-icon);
	content: "\201C";
	font-family: var(--scm-en);
	font-size: 96px;
	font-weight: 700;
	left: 14px;
	line-height: 1;
	pointer-events: none;
	position: absolute;
	top: 6px;
}

.scm-voice__quote {
	font-family: var(--scm-serif);
	font-size: var(--scm-font-large);
	font-weight: 500;
	line-height: 2;
	position: relative;
}

.scm-voice__name {
	color: var(--scm-button);
	font-family: var(--scm-sans);
	font-size: var(--scm-font-small);
	margin-block-start: var(--scm-space-m);
	position: relative;
	text-align: right;
}

/*
 * 白セクション上のカードは「白地に枠線だけの箱」になるため、
 * 地側と同じスレートの淡い面に反転させて枠線を消す。
 * （地色セクション上では従来どおり白カード＋薄枠のまま）
 */
.scm-section--white .scm-point,
.scm-section--white .scm-voice {
	background: rgba(115, 137, 145, 0.08);
	border-color: transparent;
}

/* Check list */

.scm-check {
	margin: var(--scm-space-2xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-check-list {
	display: grid;
	gap: var(--scm-space-s) var(--scm-space-2xl);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.scm-check-list li {
	border-bottom: 1px solid rgba(115, 137, 145, 0.34);
	display: flex;
	font-family: var(--scm-sans);
	gap: var(--scm-space-s);
	line-height: 1.8;
	padding-block: var(--scm-space-xs);
}

.scm-check-list li::before {
	border-bottom: 2px solid var(--scm-primary);
	border-right: 2px solid var(--scm-primary);
	content: "";
	flex: 0 0 7px;
	height: 12px;
	margin-block-start: 7px;
	transform: rotate(45deg);
	width: 7px;
}

.scm-check > * + * {
	margin-block-start: var(--scm-space-m);
}

.scm-check > * + .scm-check-list,
.scm-check > .scm-check-list + * {
	margin-block-start: var(--scm-space-xl);
}

/* Card grid */

.scm-card-grid {
	display: grid;
	gap: clamp(18px, 2.4vw, 30px) clamp(14px, 2vw, 26px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: var(--scm-space-2xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-wide));
}

.scm-card-grid.scm-card-grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: min(100%, var(--scm-content));
}

.scm-card {
	position: relative;
}

.scm-card__image {
	border-radius: var(--scm-radius-m);
	overflow: hidden;
}

.scm-card__image img {
	height: auto;
	object-fit: cover;
	transition: transform 220ms ease;
	width: 100%;
}

.scm-card:hover .scm-card__image img,
.scm-card:focus-within .scm-card__image img {
	transform: scale(1.035);
}

.scm-card__eyebrow {
	color: var(--scm-button);
	font-family: var(--scm-en);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	margin-block-start: var(--scm-space-m);
}

.scm-card__title {
	font-family: var(--scm-serif);
	font-size: var(--scm-font-large);
	font-weight: 500;
	line-height: 1.8;
	margin-block-start: var(--scm-space-2xs);
}

.scm-card__title a {
	color: inherit;
	text-decoration: none;
}

.scm-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.scm-card__text {
	font-family: var(--scm-sans);
	font-size: var(--scm-font-small);
	line-height: 2;
	margin-block-start: var(--scm-space-2xs);
}

/* Spec table */

.scm-spec {
	margin: var(--scm-space-2xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-spec-table {
	margin: 0;
}

.scm-spec-table table {
	border-collapse: collapse;
	font-family: var(--scm-sans);
	width: 100%;
}

.scm-spec-table td,
.scm-spec-table th {
	border: 0;
	border-bottom: 1px solid rgba(115, 137, 145, 0.34);
	line-height: 1.8;
	padding: var(--scm-space-s) var(--scm-space-m);
	text-align: left;
	vertical-align: top;
}

.scm-spec-table tr > :first-child {
	color: var(--scm-button);
	font-weight: 700;
	white-space: nowrap;
	width: 30%;
}

/*
 * マトリクス型スペック表（thead つき。room の TYPE LIST 等）。
 * WPコアが thead に黒3px罫線を引くためトークン罫線に戻す。
 * ラベル列30%固定は2カラムのラベル/値テーブル用なので thead つきでは解除。
 * セルは折り返し禁止（15.5㎡ / 44室（32／12）が途中で割れないように）。
 * 折り返したい長文セルは内容側で <br> を入れる。幅超過時は WP コアの
 * figure 側 overflow-x: auto による横スクロールに委ねる（モバイル）。
 */
.scm-spec-table thead {
	border-bottom: 0;
}

.scm-spec-table thead th {
	color: var(--scm-button);
	font-size: var(--scm-font-small);
	font-weight: 700;
}

.scm-spec-table table:has(thead) {
	font-size: var(--scm-font-medium);
}

.scm-spec-table table:has(thead) tr > :first-child {
	width: auto;
}

.scm-spec-table table:has(thead) :where(th, td) {
	white-space: nowrap;
}

/*
 * サブページの feature セクション（facilities の AMENITY など、TOPの
 * scm-split 見せ方をサブページへ持ち込むモジュール）。scm-split はTOP用に
 * 自前の縦paddingを持つため、セクション側paddingと二重になるのを解消する。
 */
.scm-page-feature .scm-split {
	padding-block: 0;
}

/* Media placeholder (map / room tour / atmosphere) */

.scm-media {
	margin: var(--scm-space-2xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-media figure {
	border-radius: var(--scm-radius-m);
	overflow: hidden;
}

.scm-media img {
	height: auto;
	width: 100%;
}

.scm-media__note {
	color: var(--scm-button);
	font-family: var(--scm-sans);
	font-size: var(--scm-font-small);
	line-height: 1.8;
	margin-block-start: var(--scm-space-s);
}

/* Plain text page (legal etc.) */

.scm-page-plain__body {
	font-family: var(--scm-sans);
	margin-inline: auto;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-page-plain__body > * + * {
	margin-block-start: var(--scm-space-m);
}

.scm-page-plain__body p {
	font-size: var(--scm-font-medium);
	line-height: 2;
}

/* Archive templates (news / neighborhood) */

.scm-page .scm-template-main > * {
	margin-block: 0;
}

.scm-archive-filter {
	gap: var(--scm-space-s);
	margin: var(--scm-space-2xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-archive-filter__link {
	background: none;
	border: 1px solid rgba(115, 137, 145, 0.5);
	border-radius: var(--scm-radius-pill);
	color: var(--scm-text);
	cursor: pointer;
	display: inline-block;
	font-family: var(--scm-sans);
	font-size: var(--scm-font-medium);
	line-height: 1.4;
	padding: 8px 22px;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.scm-archive-filter__link:hover,
.scm-archive-filter__link:focus-visible {
	border-color: var(--scm-primary);
	color: var(--scm-primary);
}

.scm-archive-filter__link.is-active {
	background: var(--scm-button);
	border-color: var(--scm-button);
	color: var(--scm-white);
}

.scm-archive-filter__link.is-active:hover,
.scm-archive-filter__link.is-active:focus-visible {
	border-color: var(--scm-button);
	color: var(--scm-white);
}

.scm-news-archive .wp-block-post[hidden] {
	display: none;
}

.scm-news-archive {
	margin: var(--scm-space-2xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-news-archive__item {
	align-items: center;
	border-bottom: 1px solid rgba(115, 137, 145, 0.34);
	display: grid;
	gap: var(--scm-space-2xs) var(--scm-space-l);
	grid-template-columns: 112px auto minmax(0, 1fr) auto;
	padding-block: var(--scm-space-m);
}

.scm-news-archive__item::after {
	background-color: var(--scm-button);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 5.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: 55% center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	border-radius: 50%;
	content: "";
	height: 22px;
	width: 22px;
}

.scm-news-archive__date {
	color: var(--scm-button);
	font-family: var(--scm-en);
	font-size: var(--scm-font-small);
	font-weight: 400;
}

.scm-news-archive__title {
	font-family: var(--scm-sans);
	font-size: var(--scm-font-medium);
	font-weight: 400;
	line-height: 1.8;
}

.scm-news-archive__title a {
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease;
}

.scm-news-archive__title a:hover,
.scm-news-archive__title a:focus-visible {
	color: var(--scm-button);
}

@media (max-width: 767px) {
	.scm-news-archive__item {
		grid-template-columns: auto 1fr auto;
	}

	.scm-news-archive__item .scm-news-archive__title {
		grid-column: 1 / -1;
	}
}

.scm-term-chips {
	font-family: var(--scm-sans);
	font-size: var(--scm-font-small);
}

.scm-term-chips a {
	border: 1px solid rgba(115, 137, 145, 0.5);
	border-radius: var(--scm-radius-pill);
	color: var(--scm-button);
	display: inline-block;
	line-height: 1.4;
	padding: 2px 14px;
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease;
}

.scm-term-chips a:hover,
.scm-term-chips a:focus-visible {
	border-color: var(--scm-primary);
	color: var(--scm-primary);
}

.scm-news-archive .scm-term-chips a {
	cursor: default;
	pointer-events: none;
}

.scm-pagination {
	font-family: var(--scm-en);
	font-size: var(--scm-font-medium);
	justify-content: center;
	margin-block-start: var(--scm-space-xl);
}

.scm-pagination a,
.scm-pagination .page-numbers {
	color: var(--scm-text);
	text-decoration: none;
}

.scm-pagination a:hover,
.scm-pagination a:focus-visible {
	color: var(--scm-primary);
}

.scm-pagination .page-numbers.current {
	color: var(--scm-primary);
	font-weight: 700;
}

.scm-spot-grid > .wp-block-post {
	margin: 0;
}

.scm-card__eyebrow a {
	color: inherit;
	text-decoration: none;
}

/* News single */

.scm-post-meta {
	gap: var(--scm-space-m);
	justify-content: center;
	margin: var(--scm-space-2xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-post-meta__date {
	color: var(--scm-button);
	font-family: var(--scm-en);
	font-size: var(--scm-font-small);
	font-weight: 700;
}

.scm-post-single .wp-block-post-content {
	font-family: var(--scm-sans);
	margin: var(--scm-space-xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-post-single .wp-block-post-content > * + * {
	margin-block-start: var(--scm-space-m);
}

.scm-post-single .wp-block-post-content p {
	font-size: var(--scm-font-medium);
	line-height: 2;
}

/* FAQ accordion */

.scm-faq-accordion.onesta-accordion {
	margin: var(--scm-space-2xl) auto 0;
	max-width: none;
	padding: 0 var(--scm-gutter);
	width: min(100%, var(--scm-content));
}

.scm-faq-accordion .onesta-accordion__inner {
	max-width: none;
}

.scm-faq-accordion .onesta-accordion__item {
	background: var(--scm-white);
	border: 1px solid rgba(115, 137, 145, 0.34);
	border-radius: var(--scm-radius-m);
	box-shadow: none;
	margin-block-end: var(--scm-space-s);
}

.scm-faq-accordion .onesta-accordion__trigger {
	color: var(--scm-text);
	font-family: var(--scm-sans);
	font-size: var(--scm-font-medium);
	font-weight: 500;
	line-height: 1.6;
	padding: var(--scm-space-m) var(--scm-space-l);
}

.scm-faq-accordion .onesta-accordion__title::before {
	color: var(--scm-primary);
	content: "Q.";
	font-family: var(--scm-en);
	font-weight: 700;
	margin-inline-end: 0.6em;
}

.scm-faq-accordion .onesta-accordion__icon {
	color: var(--scm-button);
}

.scm-faq-accordion details.onesta-accordion__item > .onesta-accordion__body > .onesta-accordion__content {
	padding-inline: var(--scm-space-l);
}

.scm-faq-accordion .onesta-accordion__content {
	color: var(--scm-text);
	font-family: var(--scm-sans);
	font-size: var(--scm-font-medium);
	line-height: 2;
}

/* Reservation CTA */

.scm-page-cta {
	padding-block: 0;
}

.scm-page-cta__band {
	min-height: 320px !important;
}

.scm-page-cta__body {
	color: var(--scm-white);
	text-align: center;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.36);
}

.scm-page-cta__body .scm-section-kicker,
.scm-page-cta__body .scm-section-sub {
	color: var(--scm-white);
}

.scm-page-cta__copy {
	color: var(--scm-white);
	margin-block-start: var(--scm-space-l);
}

.scm-page-cta__body .wp-block-buttons {
	margin-block-start: var(--scm-space-xl);
}

.scm-button--primary .wp-block-button__link {
	background: var(--scm-primary);
	font-family: var(--scm-sans);
	font-weight: 700;
	text-shadow: none;
}

@media (max-width: 1023px) {
	.scm-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.scm-point-grid {
		grid-template-columns: 1fr;
		width: min(100%, calc(640px + var(--scm-gutter) * 2));
	}
}

@media (max-width: 767px) {
	.scm-check-list {
		grid-template-columns: 1fr;
	}

	.scm-card-grid {
		grid-template-columns: 1fr;
		width: min(100%, 420px);
	}
}

@media (min-width: 768px) {
	.scm-page-hero__cover {
		min-height: 360px !important;
	}

	.scm-page-cta__band {
		min-height: 380px !important;
	}
}

@media (min-width: 1200px) {
	.scm-page-hero__cover {
		min-height: 420px !important;
	}
}

/* Home: at-a-glance summary */

.scm-glance__list {
	display: grid;
	gap: clamp(12px, 1.6vw, 20px);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: var(--scm-space-2xl) auto 0;
	padding-inline: var(--scm-gutter);
	width: min(100%, var(--scm-wide));
}

.scm-glance__list li {
	background: var(--scm-white);
	border: 1px solid rgba(115, 137, 145, 0.28);
	border-radius: var(--scm-radius-m);
	font-family: var(--scm-sans);
	font-size: var(--scm-font-medium);
	line-height: 1.9;
	padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
}

@media (min-width: 768px) {
	.scm-glance__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Home: stay-style slide description */

.scm-stay-slide__desc {
	font-family: var(--scm-sans);
	font-size: var(--scm-font-medium);
	line-height: 1.9;
	margin-block-start: var(--scm-space-xs);
}

/* Home: news intro line */

.scm-news__intro {
	font-family: var(--scm-sans);
	line-height: 2;
	margin-inline: auto;
	margin-block-start: var(--scm-space-l);
	padding-inline: var(--scm-gutter);
	text-align: center;
	width: min(100%, 720px);
}

/* Sub pages: prose module (long-form manuscript sections) */

.scm-prose {
	margin-block-start: var(--scm-space-2xl);
	padding-inline: var(--scm-gutter);
}

.scm-prose > * {
	margin-inline: auto;
	width: min(100%, var(--scm-content));
}

.scm-prose h3 {
	font-family: var(--scm-serif);
	font-size: var(--scm-font-xl);
	font-weight: 500;
	line-height: 1.6;
	margin-block-start: var(--scm-space-3xl);
}

.scm-prose h3:first-child {
	margin-block-start: 0;
}

.scm-prose p {
	font-family: var(--scm-sans);
	font-size: var(--scm-font-medium);
	line-height: 2;
	margin-block-start: var(--scm-space-l);
}

.scm-prose a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ドロワーを開くと onesta が html に overflow:hidden（スクロールロック）を掛け、
   クラシックなスクロールバーが消えて描画幅が広がる→ position:fixed の右寄せ
   ヘッダーが数px右へずれる。スクロールバー分の溝を常に確保して開閉時のズレを消す。
   （オーバーレイ式スクロールバーの実機スマホでは元々ズレないので無害） */
html {
	scrollbar-gutter: stable;
}

/* ==========================================================================
   トップへ戻る（PAGE TOP）— 囲み/影なしの控えめなロックアップ（細い上矢印＋Barlow）。
   mix-blend-mode:difference で背景（ヒーロー/ティール帯/白セクション）に応じて自動反転し
   常に読める。色の基準は白（#fff）＝difference で「背景の反転色」になる。
   スクロールで <html>.scm-has-scrolled が付いたらフェードイン（site.js が y>80 で付与）。
   ========================================================================== */
.scm-pagetop {
	position: fixed;
	right: 22px;
	bottom: 24px;
	z-index: 90;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 6px;
	border: 0;
	background: none;
	color: #fff;
	mix-blend-mode: difference;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
	-webkit-tap-highlight-color: transparent;
}

html.scm-has-scrolled .scm-pagetop {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.scm-pagetop__icon {
	display: block;
	transition: transform 0.3s ease;
}

.scm-pagetop__label {
	font-family: var(--scm-en);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	/* letter-spacing の右余白ぶんを相殺して中央に見せる */
	text-indent: 0.2em;
}

.scm-pagetop:hover .scm-pagetop__icon {
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.scm-pagetop,
	.scm-pagetop__icon {
		transition: none;
	}
}

/* ==========================================================================
   モバイルヘッダー: 宿泊予約 / ハンバーガー（MENU↔CLOSE）— 仕様書準拠
   ・宿泊予約とメニューを「アイコン＋ラベル」の縦積みボタンに（ヘッダー高さいっぱい）
   ・ハンバーガーは開くと ✕ にアニメーション（onesta の同じ label を流用＝同じ位置）
   ・MENU / CLOSE ラベルは ::after の content 切替
   ・注意: ドロワーパネルは .scm-header 内・position:fixed・z-index:100000。
     開いている間はロゴ/予約/ハンバーガーを z-index:100002 に上げてパネルより前面へ出し、
     onesta 標準の閉じる×（パネル内）は隠す（＝ヘッダーの✕だけで閉じる）。
   末尾配置なので max-width:767 の既存 reserve ルールより後勝ちする。
   ========================================================================== */
@media (max-width: 1023px) {
	/* --- 宿泊予約: 緑の縦積みボタン（アイコン上・ラベル下） --- */
	.scm-header__reserve {
		border-radius: 0;
		flex-direction: column;
		gap: 12px;
		height: var(--scm-header-h);
		min-width: 0;
		padding: 6px 4px;
		width: 56px;
	}

	.scm-header__reserve span {
		font-size: 10px;
		letter-spacing: 0.02em;
		line-height: 1;
		order: 2;
	}

	.scm-header__reserve-icon {
		bottom: -4px;
		height: 20px;
		order: 1;
		position: relative;
	}

	/* --- ハンバーガー / ✕: アイコン＋ラベルの縦積み（宿泊予約と対の見た目） --- */
	/* 固定幅にして MENU(4字)↔CLOSE(5字) のラベル幅差でボタンがリサイズ→
	   中央アイコンが数pxずれるのを防ぐ（宿泊予約と同じ 56px で揃える）。 */
	.scm-header .scm-header__drawer-nav .onesta-drawer-open {
		flex-direction: column;
		gap: 5px;
		height: var(--scm-header-h);
		justify-content: center;
		padding: 6px 4px;
		width: 56px;
	}

	.scm-header .scm-header__drawer-nav .onesta-drawer-open svg {
		height: 24px;
		overflow: visible;
		width: 24px;
	}

	/* MENU / CLOSE ラベル（::after で切替） */
	.scm-header .scm-header__drawer-nav .onesta-drawer-open::after {
		content: "MENU";
		font-family: var(--scm-en);
		font-size: 9px;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1;
	}

	.scm-header__drawer-nav:has(.onesta-drawer-toggle:checked) .onesta-drawer-open::after {
		content: "CLOSE";
	}

	/* --- ☰ → ✕ アニメーション（注入 SVG の3本線を変形） ---
	   fill-box + origin center + px=user単位(24×24描画)で、上下線を中央へ寄せて回転。 */
	.scm-header__drawer-nav .onesta-drawer-open svg line {
		transform-box: fill-box;
		transform-origin: center;
		transition: transform 0.3s ease, opacity 0.2s ease;
	}

	.scm-header__drawer-nav:has(.onesta-drawer-toggle:checked) .onesta-drawer-open svg line:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.scm-header__drawer-nav:has(.onesta-drawer-toggle:checked) .onesta-drawer-open svg line:nth-child(2) {
		opacity: 0;
	}

	.scm-header__drawer-nav:has(.onesta-drawer-toggle:checked) .onesta-drawer-open svg line:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* --- ロゴ・予約・ハンバーガーは常にパネル(z:100000)より前面へ ---
	   条件付き（:has(:checked)）だと閉じる瞬間に z が戻り、まだフェードアウト中
	   （0.3s）のパネルに一瞬覆われて「ヘッダーメニューが一瞬消える」ため、常時前面に。
	   閉時はパネルが visibility:hidden なので常時前面でも実害はない。 */
	.scm-header__brand,
	.scm-header__reserve,
	.scm-header .scm-header__drawer-nav .onesta-drawer-open {
		position: relative;
		z-index: 100002;
	}

	/* onesta 標準の閉じる×（パネル内）は使わない（ヘッダーの✕で閉じる） */
	.scm-header__drawer-nav .onesta-drawer-close {
		display: none !important;
	}

	/* シンプルドロワー方針（2026-07-06 方向転換）: モバイルは最初から #738991 の無地バーを
	   常時敷き、スクロール追従の float in/out アニメ（translateY で引っ込み→再出現）は
	   させず静的に固定する。開閉で切り替わる要素が無くなるので、閉じる時のちらつきが
	   原理的に発生しない。 */
	.onesta-scroll-header .wp-site-blocks > header.is-floating,
	.onesta-scroll-header .wp-site-blocks > header.is-leaving {
		animation: none !important;
		transform: none !important;
	}

	/* ===== ドロワーをヘッダーの下に開く（ユーザー案「ヘッダー分下げる」）=============
	   ヘッダーに実背景 #738991 の無地バーを与えて前面に残し、ドロワーは top をヘッダー高
	   ぶん下げて“ヘッダーの下”に開く。これでロゴ/予約/✕ が視認できる（onesta 既定の全画面
	   オーバーレイ＝B だと白ロゴ/白✕が明るいフロストに溶けて見えない問題を解消）。
	   ブラーは onesta 標準の backdrop-filter のまま（コア準拠）。onesta 既定からの逸脱は
	   この「top ずらし＋ヘッダー実背景」だけ。純オーバーレイ(B)に戻すには下2ルールを外す。 */
	.wp-site-blocks > header.scm-header {
		background: #738991;
	}

	.scm-header__drawer-nav .wp-block-navigation__responsive-container {
		top: var(--scm-header-h) !important;
		height: calc(100dvh - var(--scm-header-h)) !important;
	}
	/* ===== ここまで ============================================================== */
}