/* =========================================================================
   高層フロア プレミアムルーム（renewal）専用スタイル。各 .renewal-* にスコープ。
   core ブロック構造の特設デザイン。全幅の背景帯＋中央寄せ内容。
   ========================================================================= */
:where(.renewal-main) :is(.renewal-mv, .renewal-box01, .renewal-box02, .renewal-box03, .renewal-box04, .renewal-box05) {
	color: #333;
	line-height: 1.8;
	letter-spacing: 0.1em;
}
.renewal-main img { max-width: 100%; height: auto; }

/* ===== KV（地紋を max-width で中央、左右はぼかしコピーで満たす bg-blur 方式） ===== */
.renewal-mv {
	position: relative;
	overflow: hidden;
	background: #000;
}
/* 左右いっぱいに広がるぼかし背景（同じ地紋を拡大・ぼかし）。 */
.renewal-mv::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url("../images/renewal/top_img.jpg") center / cover no-repeat;
	filter: blur(24px);
	transform: scale(1.1);
}
/* 地紋本体は max-width で中央。中央の箱にタイトル・ロゴを重ねる。 */
.renewal-mv .renewal-mv__inner {
	position: relative;
	z-index: 1;
	max-width: 1320px;
	margin: 0 auto;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 16px;
	background: url("../images/renewal/top_img.jpg") center / cover no-repeat;
	text-align: center;
}
/* タイトルは半透明黒のパネルに。見出し・飾り文とも sans・同じ太さ。 */
.renewal-mv .renewal-mv__panel {
	display: inline-block;
	padding: 30px 56px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.52));
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid rgba(255, 255, 255, 0.28);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35);
}
.renewal-mv .renewal-mv__eyebrow {
	margin: 0 0 14px;
	font-size: 21px;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.2em;
	font-family: var(--wp--custom--brand-body, "Noto Sans JP", "Hiragino Sans", sans-serif) !important;
}
/* 親 blocks.css の見出しルール（詳細度 0,2,1）に勝つため .renewal-main h1 で詳細度を上げる。 */
.renewal-main .renewal-mv h1.renewal-mv__h { margin: 0; font-size: 32px; font-weight: 500; color: #fff; letter-spacing: 0.16em; font-family: var(--wp--custom--brand-body, "Noto Sans JP", "Hiragino Sans", sans-serif) !important; }
/* ホテルロゴ（白抜き）。hilton/hotel-logo-white パターンで p.hotel-logo-white > img を出力。 */
.renewal-mv .renewal-mv__logo { margin: 40px 0 0; }
.renewal-mv .renewal-mv__logo .hotel-logo-white { margin: 0; }
.renewal-mv .renewal-mv__logo img { display: inline-block; width: 160px; height: auto; }

/* ===== box01: コンセプト導入文（背景画像・右寄せ本文） =====
   箱は max-width:1000 で中央寄せ。__inner を左ビューポート端まで全幅化（margin-left の
   負値）し、背景地図を箱の右端に固定。本文は箱の右半分（58.5%）に配置する。 */
.renewal-box01 { max-width: 1000px; margin: 0 auto; }
.renewal-box01 .renewal-box01__inner {
	display: flex;
	align-items: center;
	min-height: 582px;
	margin-left: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	background: url("../images/renewal/renewal_box01_bg.png") right 50% top 0 / cover no-repeat;
}
.renewal-box01 .renewal-box01__text {
	width: 58.5%;
	margin-left: auto;
	font-size: 16px;
}
.renewal-box01 .renewal-box01__text p { margin: 0 0 1.6em; }
.renewal-box01 .renewal-box01__text p:last-child { margin-bottom: 0; }

/* ===== box02: コンセプト写真3点＋説明 ===== */
.renewal-box02 { padding: 100px 0; background-color: #dcd9d7; }
.renewal-box02 .renewal-box02__imgs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.5%;
	max-width: 1000px;
	margin: 0 auto 6%;
	padding-inline: 16px;
	box-sizing: border-box;
}
.renewal-box02 .renewal-box02__img { margin: 0; flex: 1 1 0; }
/* 写真間のつなぎ装飾（＋）。写真と同じフレックス行に並ぶ要素として中央に挟む。 */
.renewal-box02 .renewal-box02__plus {
	flex: 0 0 34px;
	align-self: center;
	width: 34px;
	height: 34px;
	background: url("../images/renewal/renewal_box02.svg") center / contain no-repeat;
}
.renewal-box02 .renewal-box02__text { max-width: 1000px; margin: 0 auto; padding-inline: 16px; font-size: 16px; box-sizing: border-box; }

/* ===== box03: 動画（YouTube 16:9） ===== */
.renewal-box03 { padding: 100px 0; background: url("../images/renewal/renewal_box03_bk.jpg.png") right bottom no-repeat; }
.renewal-box03 .renewal-box03__video { position: relative; max-width: 1000px; margin: 0 auto; padding-top: min(56.25%, 562px); padding-inline: 16px; box-sizing: content-box; }
.renewal-box03 .renewal-box03__video iframe { position: absolute; inset: 0 16px; width: calc(100% - 32px); height: 100%; }

/* ===== box04: 白砂青松リード（背景を max-width 中央＋左右ぼかし＝KV と同方式） ===== */
.renewal-box04 {
	position: relative;
	overflow: hidden;
	display: flex;
}
/* 左右いっぱいのぼかし背景。 */
.renewal-box04::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url("../images/renewal/renewal_box04_bk.jpg") center / cover no-repeat;
	filter: blur(24px);
	transform: scale(1.1);
}
/* 背景本体は max-width で中央。 */
.renewal-box04 .renewal-box04__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	min-height: 300px;
	padding: 100px 0;
	display: flex;
	align-items: center;
	background: url("../images/renewal/renewal_box04_bk.jpg") center / cover no-repeat;
}
.renewal-box04 .renewal-box04__text {
	max-width: 1025px;
	margin: 0 auto;
	padding-inline: 16px;
	box-sizing: border-box;
	font-size: 26px;
	color: #fff;
	letter-spacing: 0.18em;
	text-shadow: 1px 1px 65px #002f40, -1px -1px 65px #002f40, 2px 2px 10px #000, -2px -2px 10px #000;
}
/* ふりがな（ruby）の読みは本文より小さく。 */
.renewal-main rt { font-size: 50%; font-weight: 400; letter-spacing: 0.04em; }

/* ===== box05: 客室カード5部屋（部屋ごとに濃紺〜砂色のグラデ帯・左右交互） ===== */
.renewal-box05 { padding: 100px 0 0; overflow: hidden; }
/* 各部屋の帯（全幅）。上=濃紺〜下=砂色。白タイトルは濃い上部、ボタンは明るい下部に乗る。 */
.renewal-box05 .renewal-room {
	padding-bottom: 6%;
	background: linear-gradient(to bottom, #003f56 0%, #005b81 22%, #008cab 45%, #8bc1cd 64%, #eeebe9 82%, #eeebe9 100%);
}
.renewal-box05 .renewal-room__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}
.renewal-box05 .renewal-room__inner--reverse { flex-direction: row-reverse; }
.renewal-box05 .renewal-room__media { flex: 0 0 47.7%; }
/* 画像は帯の上端より上に出して前の帯に重ねる（原デザイン）。図ブロック既定マージンに勝つ詳細度。 */
.renewal-box05 .renewal-room__media .renewal-room__img { margin: -40px 0 0; }
.renewal-box05 .renewal-room__img img { display: block; width: 100%; box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25); position: relative; z-index: 2; }
/* テキストは上から 90px・画像と反対側へ 4.7% のアキ。 */
.renewal-box05 .renewal-room__text { width: 47.6%; margin: 90px 0 0 4.7%; color: #fff; }
.renewal-box05 .renewal-room__inner--reverse .renewal-room__text { margin: 90px 4.7% 0 0; }
/* 親 blocks.css の見出し配色（濃色）に勝つよう詳細度を上げて白抜きに。 */
.renewal-main .renewal-box05 .renewal-room__en,
.renewal-main .renewal-box05 .renewal-room__ja { color: #fff; }
.renewal-box05 .renewal-room__en { position: relative; margin: 0; padding-bottom: 14px; font-size: 30px; font-weight: 600; letter-spacing: 0.12em; }
/* 下線は画像と反対側（外側）へ画面端まで伸ばす。overflow:hidden で画面外をクリップ。画像には乗らない。 */
.renewal-box05 .renewal-room__en::after { content: ""; position: absolute; left: 0; right: -100vw; bottom: 0; height: 1px; background: rgba(255, 255, 255, 0.6); }
.renewal-box05 .renewal-room__inner--reverse .renewal-room__en::after { left: -100vw; right: 0; }
.renewal-box05 .renewal-room__ja { margin: 14px 0 0; font-size: 18px; font-weight: 400; letter-spacing: 0.2em; }
/* ボタンは core/button の outline。本文から十分下げ、画像側と反対の端に寄せる。 */
.renewal-box05 .renewal-room__btn { margin: 15% 0 0; display: flex; justify-content: flex-end; }
.renewal-box05 .renewal-room__inner--reverse .renewal-room__btn { justify-content: flex-start; }
.renewal-box05 .renewal-room__btn .wp-block-button.is-style-outline .wp-block-button__link {
	min-width: 200px;
	padding: 13px 28px;
	border: 1px solid #a48c6a;
	border-radius: 0;
	background: transparent;
	color: #6f5b3e;
	letter-spacing: 0.08em;
	text-align: center;
}
.renewal-box05 .renewal-room__btn .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #a48c6a; color: #fff; transition: 0.3s; }

/* タブレット幅では横並びだと地図（画像左側）が切れて消えるため、縦積みに切替えて
   SP 用画像を contain で上部に全表示し、本文をその下へ送る。 */
@media (max-width: 1024px) {
	.renewal-box01 { max-width: none; }
	.renewal-box01 .renewal-box01__inner {
		min-height: 0;
		margin-left: 0;
		padding: 10% 16px;
		background-image: url("../images/renewal/renewal_box01_bgsp.png");
		background-position: center top;
		background-size: contain;
	}
	/* 画像（上）と本文（下）の間に余裕を持たせる。 */
	.renewal-box01 .renewal-box01__text { width: 100%; margin: 0; padding-top: 54%; }
	/* タブレット・SP では KV/box04 のぼかし背景は使わず、画像を全幅 cover にする
	   （上下左右にぼかし帯を出さない）。 */
	.renewal-mv::before, .renewal-box04::before { display: none; }
	.renewal-mv .renewal-mv__inner, .renewal-box04 .renewal-box04__inner { max-width: none; }
}

@media (max-width: 768px) {
	.renewal-mv { min-height: 280px; padding: 36px 16px; }
	.renewal-mv .renewal-mv__panel { padding: 22px 24px; }
	.renewal-mv .renewal-mv__eyebrow { margin-bottom: 10px; font-size: 15px; letter-spacing: 0.16em; }
	.renewal-main .renewal-mv h1.renewal-mv__h { font-size: 21px; letter-spacing: 0.12em; }
	.renewal-mv .renewal-mv__logo { margin-top: 18px; }
	.renewal-mv .renewal-mv__logo img { width: 128px; }
	.renewal-box02, .renewal-box03, .renewal-box05 { padding: 12% 0; }
	.renewal-box04 .renewal-box04__inner { padding: 12% 0; }
	/* 縦積み時は写真と＋を左右中央に。図は画像幅にフィットさせて中央寄せ。 */
	.renewal-box02 .renewal-box02__imgs { flex-direction: column; align-items: center; gap: 16px; }
	.renewal-box02 .renewal-box02__img { flex: 0 0 auto; width: fit-content; max-width: 100%; margin: 0 auto; }
	.renewal-box02 .renewal-box02__img img { display: block; }
	/* SP は手動 br を無効化し budoux(.bdx) の文節折り返しに任せる。 */
	.renewal-box04 .renewal-box04__text { font-size: 18px; }
	.renewal-box04 .renewal-box04__text br { display: none; }
	/* 客室カードは縦積み（画像→本文）。PC の左右マージン・大きな余白はここでリセット。
	   縦に高くなる分、グラデは砂色(#eeebe9)を最下端(100%)に置き直し、終わる位置を合わせる。 */
	.renewal-box05 .renewal-room {
		padding-bottom: 14%;
		background: linear-gradient(to bottom, #003f56 0%, #005b81 28%, #008cab 56%, #8bc1cd 80%, #eeebe9 100%);
	}
	.renewal-box05 .renewal-room__inner, .renewal-box05 .renewal-room__inner--reverse { flex-direction: column; }
	.renewal-box05 .renewal-room__media, .renewal-box05 .renewal-room__text { width: 100%; flex-basis: auto; }
	.renewal-box05 .renewal-room__media .renewal-room__img { margin-top: -15px; }
	.renewal-box05 .renewal-room__text,
	.renewal-box05 .renewal-room__inner--reverse .renewal-room__text { margin: 24px 0 0; }
	.renewal-box05 .renewal-room__btn,
	.renewal-box05 .renewal-room__inner--reverse .renewal-room__btn { margin: 24px 0 0; justify-content: flex-end; }
}