@charset "utf-8";

/* 共通 */
.section-title {
	font-size: calc(100vw * (32 / 1440));
    color: #bfbfbf;
    text-align: center;
    margin-bottom: calc(100vw * (20 / 1440));
    letter-spacing: 2px;
}

@media screen and (max-width: 768px) {
	.scrolled.fadeIn .footer__bnr.sp {
		display: none!important;
	}
	}

@media screen and (max-width: 768px) {
	.section-title {
		font-size: calc(100vw * (28 / 375));
   		margin-bottom: calc(100vw * (30 / 375));
	}
	}

@media screen and (min-width: 768px) {
	.sp {
		display: none!important;
	}
	}
@media screen and (max-width: 768px) {
	.pc {
		display: none!important;
	}
	}

/* フォント */
.font-collection-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
}

.font-italiana {
  font-family: "Italiana", sans-serif;
  font-weight: 400;
}

.font-japanese-serif {
  font-family: "Noto Serif JP", serif;
  /* 必要に応じて weight を切り替え */
  /* font-weight: 400(Regular) / 500(Medium) / 600(SemiBold) / 700(Bold) */
}

.font-japanese-sans {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

/* ==========================================================
   全共通：その場でじわっとフェードイン（位置は固定）
   ========================================================== */

/* 1. アニメーションをかけたい要素の初期状態 */
.js-fadein {
	opacity: 0;
	/* 3.5秒のFV動画に合わせて、こちらも少しゆったり（1.5秒）現れるように設定 */
	transition: opacity 2.5s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: opacity; /* ブラウザの描画を滑らかにするお守り */
}

/* 2. 画面内に入った時にJavaScriptから付与されるクラス */
.js-fadein.is-active {
	opacity: 1;
}

/* SECTION fv */
#fv {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: calc(100vw * (40 / 1440));
	background-color: #fff;
}

/* --- 【極スロー調整】3.5秒かけてじわーっとフェードイン --- */
.fv-video-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	animation: fvFadeIn 3.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; 
}

.fv-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- 【極スロー調整】動画から1.2秒遅れて、4秒かけてじわじわ浮き上がる --- */
.fv-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	opacity: 0;
	transform: translateY(15px); /* 移動幅を20px→15pxに縮めてより繊細な動きに */
	animation: contentFadeIn 4s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* 劇場の幕が開くような滑らかなイージング */
	animation-delay: 1.2s; /* しっかりと余韻を作るための1.2秒ディレイ */
}

.fv-title-area {
	width: 100%;
	height: 100%;
	position: relative;
}

.fv-title-en {
	position: absolute;
}

.fv-title-en img {
	width: 100%;
	height: auto;
}

/* ⚠️コンテンツ全体の transform と衝突しないよう、各デバイスのメディアクエリ側で調整します */
.fv-title-jp {
	position: absolute;
}

.fv-title-jp img {
	width: 100%;
	height: auto;
}

.fv-line-wrapper {
	position: absolute;
}

.fv-line {
	background-color: #fff;
	animation: lineScroll 3s infinite;
}

/* ==========================================================
   PC版（768px以上）
   ========================================================== */
@media screen and (min-width: 768px) {
	#fv {
		height: calc(100dvh - 125px); /* dvhにアップデート */
	}

	/* --- 【動画出し分け】PC用動画のみ表示 --- */
	.fv-video.-sp { display: none; }
	.fv-video.-pc { display: block; }
	
	.fv-title-en {
		top: calc(100vw * (67 / 1440));
		left: calc(100vw * (1104 / 1440));
		width: calc(100vw * (202 / 1440));
	}
	
	.fv-title-jp {
		bottom: 0;
		left: 50%;
		transform: translateX(-50%); /* 元の横中央寄せを維持 */
		width: calc(100vw * (692 / 1440));
	}
	
	.fv-line-wrapper {
		bottom: 0;
		left: calc(100vw * (92 / 1440));
		width: 1px;
		height: calc(100vw * (95 / 1440));
		overflow: hidden;
	}
	
	.fv-line {
		width: 100%;
		height: 100%;
	}
}

/* ==========================================================
   スマホ版（767px以下）
   ========================================================== */
@media screen and (max-width: 767px) {
	#fv {
		height: calc(100dvh - 96px); /* dvhにアップデート */
	}

	/* --- 【動画出し分け】SP用動画のみ表示 --- */
	.fv-video.-pc { display: none; }
	.fv-video.-sp { display: block; }
	
	.fv-title-en {
		top: calc(100vw * (25 / 375));
		left: 50%;
		transform: translateX(-50%); /* 元の横中央寄せを維持 */
		width: calc(100vw * (146 / 375));
	}
	
	.fv-title-jp {
		bottom: calc(100vw * (20 / 375));
		left: 50%;
		transform: translateX(-50%); /* 元の横中央寄せを維持 */
		width: calc(100vw * (287 / 375));
	}
	
	.fv-line-wrapper {
		bottom: 0;
		left: calc(100vw * (30 / 375));
		width: 1px;
		height: calc(100vw * (121 / 375));
		overflow: hidden;
	}
	
	.fv-line {
		width: 100%;
		height: 100%;
	}
}

/* ==========================================================
   アニメーション定義（@keyframes）
   ========================================================== */

/* 1. 背景動画のフェードイン */
@keyframes fvFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* 2. コンテンツエリア全体の浮かび上がりフェードイン */
@keyframes contentFadeIn {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 3. スクロールライン（既存の動きを維持） */
@keyframes lineScroll {
	0% { transform: translateY(-100%); }
	50% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

/* ==========================================================
   ファーストビュー（動画対応ベース）
   ========================================================== */
#fv {
	position: relative;
	width: 100%;
	height: calc(100dvh - 125px); /* 画面いっぱいの高さにする場合（カンプに合わせて適宜調整してください） */
	overflow: hidden;
}

/* 動画を包むラッパー（画面いっぱいに広げる固定領域） */
.fv-video-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* コンテンツより下に配置 */
}

/* 動画自体のスタイル（トリミングされずに画面いっぱいにカバーする設定） */
.fv-video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 画像の background-size: cover; と同じ効果 */
	display: block;
}

/* 上に乗るコンテンツエリア */
.fv-content {
	position: relative;
	z-index: 2; /* 動画（z-index: 1）の上に重ねる */
	width: 100%;
	height: 100%;
	/* ここから下のレイアウト指定は既存のCSSをそのまま引き継いでください */
}

@media screen and (max-width: 767px) {
	#fv {
		/* --- 【ここを追加】SP版：100%の高さからヘッダーの96pxを引く --- */
		height: calc(100dvh - 96px);
		
		/* height: calc(100vh - 96px); */
	}
	
	/* 〜〜 スマホ用の .fv-video などの記述はそのまま 〜〜 */
}

/* ==========================================================
   PC・スマホでの動画出し分け（レスポンシブ制御）
   ========================================================== */

/* PC版（768px以上）のとき */
@media screen and (min-width: 768px) {
	.fv-video.-sp {
		display: none; /* スマホ用動画を隠す */
	}
	.fv-video.-pc {
		display: block;
	}
}

/* スマホ版（767px以下）のとき */
@media screen and (max-width: 767px) {
	.fv-video.-pc {
		display: none; /* PC用動画を隠す */
	}
	.fv-video.-sp {
		display: block;
	}
}

/* SECTION concept */
#concept {
	width: 100%;
	background-color: #fff;
	overflow: hidden;
	margin: 0 auto;
}

.concept-inner {
	width: 100%;
	margin: 0 auto;
}

.concept-intro-text-jp {
	font-weight: 400;
	font-size: calc(100vw * (15 / 1440));
	line-height: 1.8;
	letter-spacing: 0.05em;
	color: #333;
}

.concept-catch-en {
	font-weight: 400;
	font-size: calc(100vw * (32 / 1440));
	line-height: 1.3;
	color: #BFBFBF;
}

.concept-sub-en-pc {
	font-weight: 400;
	font-size: calc(100vw * (11 / 1440));
	line-height: 1.6;
	color: #666;
}

.concept-catch-jp {
	font-weight: 400;
	font-size: calc(100vw * (17 / 1440));
	line-height: 2;
	letter-spacing: 0.03em;
	color: gray;
}

.concept-inner picture img {
	width: 100%;
	height: auto;
	display: block;
}

@media screen and (min-width: 768px) {
	.concept-inner {
		width: 100%;
		position: relative;
	}

	.concept-intro-block {
		position: relative;
		width: 100%;
		height: calc(100vw * (560 / 1440));
	}

	.concept-intro-text-jp {
		position: absolute;
		top: 50%;
		left: calc(100% * (254 / 1440));
		margin: auto;
		transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
	}

	.concept-main-image-wrap {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(100% * (784 / 1440));
	}

	.concept-sp-overlay-content {
		display: none;
	}

	.concept-grid-block {
		position: relative;
		width: 100%;
		height: calc(100vw * (1100 / 1440));
	}

	.concept-grid-left {
		position: absolute;
		top: 0;
		left: 0;
		width: calc(100% * (457 / 1440));
	}

	.concept-left-top-wrap {
		position: relative;
		width: 100%;
	}

	.concept-left-top-wrap picture {
		width: calc(100vw * (457 / 1440));
	}

	.concept-catch-en {
		position: absolute;
		top: calc(100vw * (60 / 1440));
		left: calc(100vw * (410 / 1440));
		white-space: nowrap;
	}

	.concept-left-images-bottom {
		position: relative;
		width: 100%;
	}

	.concept-center-wrap {
		position: absolute;
		top: calc(100vw * (-250 / 1440));
		left: calc(100vw * (463 / 1440));
		width: calc(100vw * (286 / 1440));
	}

	.concept-left-bottom-wrap {
		position: absolute;
		top: calc(100vw * (6 / 1440));
		right: 0;
		width: calc(100vw * (251 / 1440));
	}

	.concept-grid-right {
		position: absolute;
		top: 0;
		right: calc(100vw * (80 / 1440));
		width: calc(100vw * (412 / 1440));
	}

	.concept-right-logo-wrap {
		position: absolute;
		top: calc(100vw * (60 / 1440));
		left: 0;
		text-align: center;
	}

	.concept-about-logo {
		width: calc(100vw * (202 / 1440));
		height: auto;
		margin-bottom: calc(100vw * (24 / 1440));
	}

	.concept-sub-en-pc {
		width: calc(100vw * (380 / 1440));
		text-align: left;
	}

	.concept-right-bottom-wrap {
		position: absolute;
		top: calc(100vw * (480 / 1440));
		right: 0;
		width: calc(100vw * (412 / 1440));
	}

	.concept-right-bottom-wrap picture {
		width: calc(100vw * (412 / 1440));
		margin-left: auto;
	}

	.concept-catch-jp {
		position: absolute;
		top: calc(100vw * (40 / 1440));
		left: calc(100vw * (-102 / 1440));
		white-space: nowrap;
		z-index: 2.2;
	}
}

@media screen and (max-width: 767px) {
	.concept-inner {
		padding: calc(100vw * (80 / 375)) 0 calc(100vw * (60 / 375));
	}

	.concept-intro-block {
		display: flex;
		flex-direction: column;
		gap: calc(100vw * (100 / 375));
		margin-bottom: calc(100vw * (60 / 375));
	}

	.concept-intro-text-jp {
		font-size: calc(100vw * (15 / 375));
		text-align: left;
		padding: 0 calc(100vw * (40 / 375));
	}

	.concept-main-image-wrap {
		position: relative;
		width: 100%;
	}

	.concept-sp-overlay-content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: calc(100vw * (40 / 375)) calc(100vw * (24 / 375));
		box-sizing: border-box;
	}

	.concept-sp-sub-en {
		font-weight: 400;
		font-size: calc(100vw * (11 / 375));
		line-height: 1.6;
		color: #fff;
		text-align: left;
		margin-bottom: calc(100vw * (10 / 375));
	}

	.concept-sp-logo {
		width: calc(100vw * (167 / 375));
		height: auto;
		display: block;
	}

	.concept-grid-block {
		display: flex;
		flex-direction: column;
		position: relative;
		height: calc(100vw * (860 / 375))
	}
	.concept-left-top-wrap {
		position: absolute;
		width: calc(100vw * (224 / 375));
		right: 0;
	}

	.concept-left-top-wrap picture {
		width: calc(100vw * (240 / 375));
		margin-left: auto;
	}

	.concept-catch-en {
		font-size: calc(100vw * (32 / 375));
		position: absolute;
		top: calc(100vw * (20 / 375));
		left: calc(100vw * (-110 / 375));
	}

	.concept-left-images-bottom {
		position: absolute;
        width: calc(100vw * (224 / 375));
        right: 0;
        margin-top: calc(100vw * (323 / 375));
        top: 10px;
	}

	.concept-left-bottom-wrap {
		width: calc(100vw * (145 / 375));
		position: absolute;
    	left: calc(100vw * (-150 / 375));
    	top: calc(100vw * (-116 / 375));
	}

	.concept-center-wrap {
		width: calc(100vw * (224 / 375));
	}

	.concept-center-wrap picture {
		width: calc(100vw * (150 / 375));
    	position: absolute;
    	left: 0;
    	top: -6px;
	}

	.concept-right-logo-wrap {
		display: none;
	}

	.concept-right-bottom-wrap {
		position: absolute;
		width: calc(100vw * (222 / 375));
		bottom: 0;
	}

	.concept-right-bottom-wrap picture {
		width: calc(100vw * (222 / 375));
	}

	.concept-catch-jp {
		font-size: calc(100vw * (17 / 375));
		position: absolute;
		bottom: calc(100vw * (40 / 375));
		right: calc(100vw * (-140 / 375));
		text-align: left;
	}
}

/* ==========================================================
   コレクション全体の基本設定
   ========================================================== */
.collection-container {
	width: 100%;
	margin: 0 auto;
	background-color: #fff;
}

.collection-item {
	width: 100%;
	position: relative;
}

/* 共通：画像リセット */
.collection-item picture img {
	width: 100%;
	height: auto;
	display: block;
}

/* ［img01］メインブロックの絶対比率化 */
.collection-main-block {
	width: 100%;
	position: relative;
}

/* ボタン切り替えの制御クラス */
.collection-toggle-btn .btn-icon-close { display: none; }
.collection-item.is-open .btn-icon-open { display: none; }
.collection-item.is-open .btn-icon-close { display: block; }

/* ［img02］アコーディオン開閉の土台（JSで動かすために必須） */
.collection-accordion-content {
	height: 0;
	overflow: hidden;
	transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* 滑らかな開閉アニメーション */
	background-color: #EEEBE7; /* カンプの薄いグレー背景 */
}

.jedia .collection-accordion-content,
.leafia .collection-accordion-content {
	background-color: #BBB;
}


/* ==========================================================
   PC版：1440pxアートボード完全連動レイアウト
   ========================================================== */
@media screen and (min-width: 768px) {
	
	/* ［img01］の縦横比を1440x810にロック（これで％配置が完全にシンクロします） */
	.collection-main-block {
		aspect-ratio: 1440 / 810;
	}
	.collection-main-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.collection-main-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 右上のキャッチコピー（30px medium指定） */
	.collection-main-catch-jp {
		position: absolute;
		top: 27%; /* 240px / 810px */
		right: 6.9%; /* 100px / 1440px */
		font-size: calc(100vw * (30 / 1440));
		font-weight: 500;
		color: #fff;
		letter-spacing: 0.05em;
		line-height: 1.5;
	}

	.jedia .collection-main-catch-jp {
		top: calc(100vw * (219 / 1440));
		left: calc(100vw * (967 / 1440));
		right: auto;
	}

	.lis .collection-main-catch-jp {
		top: calc(100vw * (219 / 1440));
		left: calc(100vw * (967 / 1440));
		right: auto;
	}

	.leafia .collection-main-catch-jp {
		top: calc(100vw * (219 / 1440));
		left: calc(100vw * (948 / 1440));
		right: auto;
	}

	/* 左下のタイトルグループ（90px regular指定） */
	.collection-title-wrap {
		position: absolute;
		bottom: 12.3%; /* 100px / 810px */
		left: 5.5%;    /* 80px / 1440px */
		color: #fff;
	}
	.collection-title-en {
		font-size: calc(100vw * (90 / 1440));
		line-height: 1;
		letter-spacing: 0.02em;
	}
	.collection-title-sub {
		font-size: calc(100vw * (14 / 1440));
		margin-top: calc(100vw * (16 / 1440));
		letter-spacing: 0.05em;
		opacity: 0.9;
	}

	.lis .collection-title-sub {
		line-height: 1.5;
	}

	/* 右下の切り替えボタン（VIEW MORE / CLOSE） */
	.collection-toggle-btn {
		position: absolute;
		bottom: 9.8%; /* 80px / 810px */
		right: 5.5%;  /* 80px / 1440px */
		width: calc(100% * (160 / 1440)); /* カンプ比率の横幅 */
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		outline: none;
	}

	/* ［img02］アコーディオン内部の絶対配置システム（1440x1050想定） */
	.collection-accordion-inner {
		width: 100%;
		position: relative;
		aspect-ratio: 1440 / 1050; 
	}

	.leafia .collection-accordion-inner {
		margin-top: calc(100vw * (30 / 1440));
	}

	/* 左：チャペル画像 */
	.collection-img-left {
		position: absolute;
		top: 7.6%;
		left: 0;
		width: calc(100% * (723 / 1440));
	}

	.jedia .collection-img-left {
		width: calc(100% * (351 / 1440));
	}

	.lis .collection-img-left {
		width: calc(100% * (400 / 1440));
		left: calc(100vw * (68 / 1440));
	}

	.leafia .collection-img-left {
		top: calc(100% * (50 / 1440));
		width: calc(100% * (496 / 1440));
	}

	/* 中央：説明テキスト */
	.collection-detail-text-wrap {
		position: absolute;
		top: 11.5%;
		left: 54.1%;
		font-size: calc(100vw * (15 / 1440));
		line-height: 2;
		color: #7F7F7F;
		letter-spacing: 0.03em;
		z-index: 1;
	}

	.jedia .collection-detail-text-wrap {
		color: #515151;
		left: calc(100vw * (410 / 1440));
	}

	.lis .collection-detail-text-wrap {
		color: #515151;
		left: calc(100vw * (531 / 1440));
	}

	.leafia .collection-detail-text-wrap {
		color: #515151;
		top: calc(100% * (40 / 1440));
    	left: calc(100% * (552 / 1440));
	}

	.collection-text-p2 {
		margin-top: calc(100vw * (40 / 1440));
	}

	.lis .collection-text-p2 {
		margin-top: calc(100vw * (20 / 1440));
	}

	.lis .collection-text-p3 {
		position: absolute;
    	bottom: calc(100% * (126 / 1440));
    	right: calc(100% * (720 / 1440));
    	z-index: 3;
    	color: #fff;
    	line-height: 2;
	}

	.lis .collection-img-center {
		position: absolute;
		right: auto;
    	left: calc(100% * (478 / 1440));
    	width: calc(100% * (279 / 1440));
    	top: calc(100% * (460 / 1440));
		z-index: 0;
	}

	.leafia .collection-img-center {
    	width: calc(100% * (269 / 1440));
    	position: absolute;
    	left: calc(100% * (527 / 1440));
    	top: calc(100% * (350 / 1440));
	}

	/* 右：新婦立ち姿画像 */
	.collection-img-right {
		position: absolute;
		top: 7.6%;
		right: 0;
		width: calc(100% * (492 / 1440));
		z-index: 0;
	}

	.jedia .collection-img-right {
		width: calc(100% * (748 / 1440));
	}

	.lis .collection-img-right {
		width: calc(100% * (588 / 1440));
	}

	.leafia .collection-img-right {
		width: calc(100% * (538 / 1440));
		top: calc(100% * (50 / 1440));
	}

	/* 背景の巨大透かし文字 */
	.collection-bg-text {
		position: absolute;
		bottom: calc(100% * (-200 / 1440));
		right: calc(100% * (100 / 1440));
		font-size: calc(100vw * (130 / 1440));
		color: rgba(255, 255, 255, 0.5);
		z-index: 2;
		pointer-events: none;
	}

	.lis .collection-bg-text {
		bottom: calc(100% * (90 / 1440));
        right: calc(100% * (140 / 1440));
	}

	.leafia .collection-bg-text {
		font-size: calc(100vw * (112 / 1440));
		bottom: calc(100% * (-128 / 1440));
        right: calc(100% * (240 / 1440));
	}

	.collection-img-right picture {
		position: relative;
		z-index: 2;
	}

	/* 中央下：ドレスの裾アップ（左右の画像にまたがって手前に重ねる） */
	.collection-img-detail {
		position: absolute;
		top: 48.5%;
		left: calc(100% * (750 / 1440));
		width: calc(100% * (237 / 1440));
		z-index: 3;
	}

	.jedia .collection-img-detail {
		left: calc(100% * (371 / 1440));
		width: calc(100% * (261 / 1440));
	}

	.lis .collection-img-detail {
		top: calc(100% * (836/ 1440));
		left: calc(100% * (222 / 1440));
		width: calc(100% * (246 / 1440));
	}

	.leafia .collection-img-detail {
		top: calc(100% * (836/ 1440));
		left: calc(100% * (806 / 1440));
		width: calc(100% * (183 / 1440));
	}

	/* 最下部：予約ボタン */
	.reserve-btn-wrap {
		position: absolute;
		bottom: 7.6%;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.reserve-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% * (320 / 1440));
		height: calc(100vw * (56 / 1440));
		background-color: #F4F2F2;
		border-radius: calc(100vw * (28 / 1440));
		color: #7F7F7F!important;
		text-decoration: none;
		font-size: calc(100vw * (14 / 1440));
		letter-spacing: 0.08em;
		transition: all 0.3s ease;
		font-weight: 600;
	}
	/*.collection-reserve-btn:hover {
		background-color: #333;
		color: #fff;
		border-color: #333;
	}*/

	.reserve-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% * (320 / 1440));
		height: calc(100vw * (56 / 1440));
		background-color: #F4F2F2;
		border-radius: calc(100vw * (28 / 1440));
		color: #7F7F7F!important;
		text-decoration: none;
		font-size: calc(100vw * (14 / 1440));
		letter-spacing: 0.08em;
		transition: all 0.3s ease;
		font-weight: 600;
		flex-direction: row; 
	}

	.reserve-btn::after {
		content: "";
		display: block;
		width: calc(100vw * (16 / 1440));
		height: calc(100vw * (16 / 1440));
		margin-left: calc(100vw * (12 / 1440));
		background-image: url("/wp-content/themes/arluis/cpnt/images/royal/pc/arrow-right.svg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		transition: transform 0.3s ease;
	}
	/*.collection-reserve-btn:hover::after {
		transform: translateX(4px);
	}*/
}

@media screen and (min-width: 1440px) {
	/* 既存の記述に追加 */
	.reserve-btn {
		height: 56px;
		border-radius: 28px;
		font-size: 14px;
	}
	/* 矢印も1440px以上で巨大化しないように固定値を指定 */
	.reserve-btn::after {
		width: 16px;
		height: 16px;
		margin-left: 12px;
	}
}

/* ==========================================================
   大画面モニター対策：1440px以上の時はvwのフォントサイズをピクセル固定にする
   ========================================================== */
@media screen and (min-width: 1440px) {
	.collection-main-catch-jp { font-size: calc(100vw * (30 / 1440)); }
	.collection-title-en { font-size: calc(100vw * (90 / 1440)); }
	.collection-title-sharp { font-size: calc(100vw * (30 / 1440)); }
	.collection-title-num { font-size: calc(100vw * (45 / 1440)); }
	.collection-title-sub { font-size: calc(100vw * (16 / 1440)); margin-top: 6px; }
	.collection-detail-text-wrap { font-size: calc(100vw * (13 / 1440)); }
	.collection-text-p2 { margin-top: 40px; }
	.collection-bg-text { font-size: calc(100vw * (150 / 1440)); }
	.leafia .collection-bg-text { font-size: calc(100vw * (112 / 1440)); }
	.collection-reserve-btn {
		height: 56px;
		border-radius: 28px;
		font-size: calc(100vw * (14 / 1440));;
	}
}

/* ==========================================================
   SP版：はみ出しを防ぐフレキシブル・縦並びレイアウト
   ========================================================== */
@media screen and (max-width: 767px) {
	/* ［img01］SP用の縦長アスペクト比 */
	.collection-main-block {
		aspect-ratio: 375 / 620;
	}
	.collection-main-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.collection-main-block .collection-main-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.collection-main-catch-jp {
		position: absolute;
		top: calc(100vw * (42 / 375));
		left: 0;
		right: 0;
		margin: auto;
		width: 90%;
		text-align: center;
		font-size: calc(100vw * (22 / 375));
		color: #fff;
		letter-spacing: 0.05em;
		line-height: 1.6;
	}

	.jedia .collection-main-catch-jp {
		left: auto;
		right: calc(100vw * (10 / 375));
		text-align: left;
		width: auto;
	}

	.lis .collection-main-catch-jp {
		text-align: left;
    	left: calc(100vw * (34 / 375));
	}

	.leafia .collection-main-catch-jp {
		width: auto;
    	text-align: left;
    	top: calc(100vw * (49 / 375));
    	right: calc(100vw * (20 / 375));
    	left: auto;
	}

	.collection-title-wrap {
		position: absolute;
		bottom: calc(100vw * (110 / 375));
		left: calc(100vw * (34 / 375));
		color: #fff;
	}
	.collection-title-en {
		font-size: calc(100vw * (60 / 375));
		line-height: 1;
		letter-spacing: 4px;
	}
	.collection-title-sharp {
		font-size: calc(100vw * (20 / 375));
	}
	.collection-title-num {
		font-size: calc(100vw * (35 / 375));
	}
	.collection-title-sub {
		font-size: calc(100vw * (13 / 375));
		margin-top: 4px;
	}
	.lis .collection-title-sub {
		line-height: 1.5;
	}

	.collection-toggle-btn {
		position: absolute;
		bottom: calc(100vw * (40 / 375));
		right: calc(100vw * (13 / 375));
		width: calc(100vw * (120 / 375));
		background: none;
		border: none;
		padding: 0;
	}

	/* ［img02］SPは絶対配置だと文字が被るので、流れに沿った縦並びでズレを作る */
	.collection-accordion-inner {
		width: 100%;
		padding: calc(100vw * (2 / 375)) 0;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.jedia .collection-accordion-inner {
		margin-top: calc(100vw * (30 / 375));
		padding-bottom: calc(100vw * (40 / 375));
	}

	.collection-img-left {
		width: 100%;
		margin-bottom: calc(100vw * (30 / 375));
	}

	.jedia .collection-img-left {
		width: calc(100vw * (180 / 375));
		position: absolute;
		right: 0;
	}

	.collection-detail-text-wrap {
		font-size: calc(100vw * (13 / 375));
		line-height: 2.1;
		color: #7F7F7F;
		margin-top: calc(100vw * (34 / 375));
		margin-left: calc(100vw * (38 / 375));
		z-index: 10;
	}

	.jedia .collection-detail-text-wrap {
		color: #515151;
		margin-top: calc(100vw * (6 / 375));
		margin-left: calc(100vw * (23 / 375));
	}

	.lis .collection-detail-text-wrap {
		position: absolute;
    	color: #fff;
    	right: calc(100vw * (20 / 375));
	}

	.leafia .collection-detail-text-wrap {
		position: absolute;
    	color: #fff;
    	width: 100%;
	}

	.collection-text-p2 {
		position: absolute;
    	bottom: calc(100vw * (200 / 375));
    	right: calc(100vw * (24 / 375));
	}

	.jedia .collection-text-p2 {
		top: calc(100vw * (310 / 375));
        right: calc(100vw * (0 / 375));
        bottom: auto;
	}

	.lis .collection-text-p2 {
		top: calc(100vw * (310 / 375));
        left: calc(100vw * (-200 / 375));
        color: #515151;
	}

	.leafia .collection-text-p2 {
		top: calc(100vw * (730 / 375));
        right: calc(100vw * (50 / 375));
        color: #515151;
	}

	.jedia .collection-text-p3 {
		position: absolute;
    	top: calc(100vw * (512 / 375));
    	right: calc(100vw * (16 / 375));
    	color: #fff;
    	font-size: calc(100vw * (14 / 375));
	}

	.lis .collection-text-p3 {
		color: #515151;
    	line-height: 2;
    	margin-left: calc(100vw * (30 / 375));
    	margin-top: calc(100vw * (20 / 375));
	}

	.lis .collection-img-center {
		width: calc(100vw * (191 / 375));
    	position: absolute;
    	right: 0;
    	top: calc(100vw * (315 / 375));
	}

	.leafia .collection-img-center {
		position: absolute;
    	width: calc(100vw * (216 / 375));
    	top: calc(100vw * (870 / 375));
    	right: 0;
	}

	.collection-img-right {
		width: calc(100vw * (254 / 375));
		margin-left: auto;
		position: absolute;
        top: calc(100vw * (300 / 375));
        right: 0;
	}

	.lis .collection-img-right {
		right: auto;
		left: 0;
		width: calc(100vw * (294 / 375));
        top: calc(100vw * (605 / 375));
	}

	.jedia .collection-img-right {
		width: calc(100vw * (336 / 375));
		top: calc(100vw * (465 / 375));
	}

	.leafia .collection-img-right {
		width: calc(100vw * (318 / 375));
		top: calc(100vw * (480 / 375));
		left: 0;
		right: auto;
	}

	.collection-bg-text {
		position: absolute;
		bottom: calc(100vw * (-190 / 375));
		left: calc(100vw * (-110 / 375));
		font-size: calc(100vw * (112 / 375));
		color: rgba(255,255,255,.5);
		z-index: 1;
	}

	.jedia .collection-bg-text {
		z-index: 5;
	}

	.lis .collection-bg-text {
		bottom: calc(100vw * (-120 / 375));
		left: calc(100vw * (20 / 375));
	}

	.jedia .collection-bg-text {
		top: calc(100vw * (230 / 375));
        left: calc(100vw * (-20 / 375));
	}

	.leafia .collection-bg-text {
		top: calc(100vw * (667 / 375));
    	right: 0;
    	left: calc(100vw * (86 / 375));
	    z-index: 5;
	}

	.collection-img-right picture { position: relative; z-index: 2; }

	/* ドレスの裾：右画像の下部に少し食い込ませるネガティブマージン */
	.collection-img-detail {
		width: calc(100vw * (140 / 375));
		margin-top: calc(100vw * (90 / 375));
		position: relative;
		z-index: 3;
		margin-bottom: calc(100vw * (150 / 375));
	}

	.jedia .collection-img-detail {
		margin-bottom: calc(100vw * (380 / 375));
	}

	.jedia .collection-img-detail {
		width: calc(100vw * (183 / 375));
		margin-top: calc(100vw * (40 / 375));
	}

	.lis .collection-img-detail {
		width: calc(100vw * (163 / 375));
		bottom: calc(100vw * (240 / 375));
    	right: 0;
    	position: absolute;
    	margin-bottom: 0;
	}

	.leafia .collection-img-detail {
		width: calc(100vw * (154 / 375));
		top: calc(100vw * (920 / 375));
    	position: absolute;
	}

	.reserve-btn-wrap {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.collection-container .reserve-btn-wrap {
		margin-bottom: calc(100vw * (40 / 375));
	}

	.lis .reserve-btn-wrap {
		margin-top: calc(100vw * (940 / 375));
		margin-bottom: calc(100vw * (40 / 375));
	}

	.leafia .reserve-btn-wrap {
		margin-top: calc(100vw * (860 / 375));
		margin-bottom: calc(100vw * (40 / 375));
	}

	.reserve-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 280px;
		height: 48px;
		background-color: #fff;
		border-radius: 24px;
		color: #333;
		text-decoration: none;
		font-size: 13px;
		letter-spacing: 0.05em;
	}
	.jedia .reserve-btn,
	.leafia .reserve-btn {
		background-color: rgba(244, 242, 242, 0.49);
		color: #7F7F7F;
	}
	.reserve-btn::after {
		content: "";
		display: block;
		width: calc(100vw * (14 / 375));
		height: calc(100vw * (14 / 375));
		margin-left: calc(100vw * (8 / 375));
		background-image: url("/wp-content/themes/arluis/cpnt/images/royal/sp/arrow-right.svg"); /* SP用パス */
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
}

/* ==========================================================
   SECTION about
   ========================================================== */

.about {
	text-align: center;
    padding: calc(100vw * (100 / 1440));
}
@media screen and (max-width: 768px) {
	.about {
    	padding: calc(100vw * (80 / 375)) 0;
	}
	}
.about p.section-title {
	padding-bottom: 0;
	font-size: calc(100vw * (24 / 1440));
    color: rgba(133, 126, 126, 0.5);
}
@media screen and (max-width: 768px) {
	.about p.section-title {
		font-size: calc(100vw * (24 / 375));
	}
	}
.about img {
    padding-bottom: calc(100vw * (80 / 1440));
}
@media screen and (max-width: 768px) {
	.about img {
		padding-bottom: calc(100vw * (160 / 1440));
	}
	}
.about p {
	line-height: 2;
    color: #515151;
    font-size: calc(100vw * (15 / 1440));
    padding-bottom: calc(100vw * (30 / 1440));
}
.about p.font-japanese-serif:nth-of-type(3) {
    padding-bottom: calc(100vw * (80 / 1440));	
}
@media screen and (max-width: 768px) {
	.about p {
    	font-size: calc(100vw * (15 / 375));
	    padding-bottom: calc(100vw * (20 / 375));
	}
	.about p.font-japanese-serif:nth-of-type(3) {
	    padding-bottom: calc(100vw * (60 / 375));		
	}
	}
.about .reserve-btn-wrap {
	position: relative;
}
.about .reserve-btn {
	width :calc(100% * (480 / 1440));
}
@media screen and (max-width: 768px) {
	.about .reserve-btn {
		width :calc(100% * (261 / 375));
		background-color: #f4f2f2;
    	border: none;
	}
	}

/* ==========================================================
   SECTION message
   ========================================================== */
.message {
	position: relative;
}
.message-bg img {
	width: 100%;
}
.message-block {
	position: absolute;
	top: calc(100vw * (100 / 1440));
	left: 0;
	right: 0;
}
@media screen and (max-width: 768px) {
	.message-block {
		top: calc(100vw * (100 / 375));
	}
	}
.message-block p {
	color: #fff;
	font-size: calc(100vw * (14 / 1440));
	text-align: center;
	line-height: 2;
	padding-bottom: calc(100vw * (30 / 1440));
}
@media screen and (max-width: 768px) {
	.message-block p {
		font-size: calc(100vw * (13 / 375));
		padding-bottom: calc(100vw * (30 / 375));
	}
	}
.message-signature {
	position: absolute;
    top: calc(100vw * (650 / 1440));
    left: 0;
    right: 0;
    text-align: center;
}
@media screen and (max-width: 768px) {
	.message-signature {
		top: calc(100vw * (680 / 375));
	}
	}

/* ==========================================================
   SECTION profile
   ========================================================== */
/* ==========================================================
   プロフィールセクション（PC版ベース 768px以上）
   ========================================================== */
@media screen and (min-width: 768px) {
	.profile {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center; /* 全体を中央寄せ */
		padding: calc(100vw * (140 / 1440)) 0;
	}

	/* 横並びにするブロック（1440px換算で最大625px） */
	.profile-block {
		display: flex;
		justify-content: space-between;
		align-items: end; /* 上揃え */
		width: calc(100vw * (625 / 1440));
		margin: 0 auto;
	}

	/* 左：画像エリア（1440px換算で255px） */
	.profile-img {
		display: block;
		width: calc(100vw * (255 / 1440));
		height: auto;
	}
	.profile-img img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* 右：テキストエリア（1440px換算で331px） */
	.profile-text {
		width: calc(100vw * (331 / 1440));
	}

	/* 名前・肩書き */
	.profile-name {
		font-size: calc(100vw * (16 / 1440));
		color: #000;
		font-weight: normal;
		margin-bottom: calc(100vw * (24 / 1440));
		letter-spacing: 0.05em;
		line-height: 1.4;
	}

	/* プロフィール本文 */
	.profile-read {
		font-size: calc(100vw * (12 / 1440));
		color: #7f7f7f;
		line-height: 1.5; /* ゆったりとした行間 */
		letter-spacing: 0.04em;
		text-align: justify; /* 両端揃えで綺麗に見せる */
	}

	/* ボタンの余白調整 */
	.profile-btn-wrap {
		margin-top: calc(100vw * (48 / 1440));
		width: 100%;
		display: flex;
		justify-content: center;
	}
}

/* ==========================================================
   PC大画面モニター対策（1440px以上でピクセル固定）
   ========================================================== */
@media screen and (min-width: 1440px) {
	.profile-block {
		width: 625px;
	}
	.profile-img {
		width: 255px;
	}
	.profile-text {
		width: 331px;
	}
	.profile-name {
		font-size: calc(100vw * (16 / 1440));
		margin-bottom: 24px;
	}
	.profile-read {
		font-size: calc(100vw * (12 / 1440));
	}
	.profile-btn-wrap {
		margin-top: 48px;
	}
}

/* ==========================================================
   スマホ版（SP：767px以下）自動縦並びレイアウト
   ========================================================== */
@media screen and (max-width: 767px) {
	.profile {
		padding: calc(100vw * (60 / 375)) calc(100vw * (30 / 375));
	}
	.profile-block {
		display: flex;
		flex-direction: column; /* 縦並び */
		align-items: center;
		width: 100%;
	}
	.profile-img {
		width: 100%; /* スマホでは横幅いっぱいに */
		margin-bottom: calc(100vw * (24 / 375));
	}
	.profile-img img {
		width: 100%;
	}
	.profile-text {
		width: 100%;
	}
	.profile-name {
		font-size: calc(100vw * (20 / 375));
		text-align: left; /* スマホでは中央寄せが綺麗 */
		margin-bottom: calc(100vw * (16 / 375));
		color: #000;
	}
	.profile-read {
		font-size: calc(100vw * (13 / 375)); /* スマホの文字サイズ調整 */
		line-height: 1.8;
		color: #7f7f7f;
	}
	.profile-btn-wrap {
		margin-top: calc(100vw * (32 / 375));
		width: 100%;
		display: flex;
		justify-content: center;
	}
}

.profile .reserve-btn-wrap {
	position: relative;
	margin-top: calc(100vw * (180 / 1440))
}
.profile .reserve-btn {
	width :calc(100% * (400 / 1440));
}
@media screen and (max-width: 768px) {
	.profile .reserve-btn {
		width :calc(100% * (261 / 375));
		background-color: #f4f2f2;
    	border: none;
	}
	}

/* ==========================================================
   バナーセクション（PC版ベース 768px以上）
   ========================================================== */
@media screen and (min-width: 768px) {
	.banner-section {
		width: 100%;
		max-width: 1000px;
		/* PCのみ上部に1pxの線を表示 */
		border-top: 1px solid #BBBBBB; 
		padding-top: calc(100vw * (40 / 1440));
		padding-bottom: calc(100vw * (120 / 1440));
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
	}

	/* セクション見出し：「このドレスを絶景とともに。」 */
	.banner-section-title {
		font-size: calc(100vw * (20 / 1440));
		font-weight: 500; /* Noto Serif JPのMedium相当 */
		color: #7f7f7f;
		text-align: center;
		letter-spacing: 0.08em;
		margin-bottom: calc(100vw * (40 / 1440));
	}

	/* バナーを横並びにするコンテナ（カンプの余白感に調整） */
	.banner-container {
		display: flex;
		justify-content: center;
		gap: calc(100vw * (40 / 1440)); /* バナー間の隙間 */
		width: 100%;
		max-width: calc(100vw * (1000 / 1440)); /* 2枚並んだ全体の最大幅 */
	}

	/* バナー単体リンク（Aタグ） */
	.banner-item {
		display: flex;
		flex-direction: column;
		width: calc(50% - (100vw * (20 / 1440))); /* 隙間を引いた50% */
		text-decoration: none;
		transition: opacity 0.3s ease;
	}
	.banner-item:hover {
		opacity: 0.9;
	}

	/* 背景画像が入るボックス（アスペクト比を維持） */
	.banner-image-box {
		width: 100%;
		aspect-ratio: 480 / 270; /* デザインの縦横比（16:9等）に合わせて自動伸縮 */
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		position: relative;
		display: flex;
		justify-content: center;
		text-align: center;
	}
	/* 画像を少し暗くして文字の視認性をあげるオーバーレイ（必要に応じて） */
	.banner-image-box::before {
		content: "";
		position: absolute;
		top: 0; left: 0; width: 100%; height: 100%;
		background-color: rgba(0, 0, 0, 0.15);
	}

	/* 左側（リゾート）のPC用背景 */
	.banner-resort .banner-image-box {
		background-image: url('/wp-content/themes/arluis/cpnt/images/royal/pc/resortwedding-bg.webp');
	}
	
	/* 右側（フォト）のPC用背景 */
	.banner-photo .banner-image-box {
		background-image: url('/wp-content/themes/arluis/cpnt/images/royal/pc/premierphotowedding-bg.webp');
	}

	/* 画像内のテキストコンテナ */
	.banner-inner-text {
		position: relative;
		z-index: 1;
		width: 100%;
		padding: 0 calc(100vw * (20 / 1440));
	}

	/* 画像内の上部日本語（Noto Serif JP 16px Bold） */
	.banner-sub-txt {
		font-size: calc(100vw * (16 / 1440));
		font-weight: 700; /* Bold */
		color: #fff;
		line-height: 1.6;
		letter-spacing: 0.06em;
		margin-bottom: calc(100vw * (16 / 1440));
		text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 文字の白浮き防止 */
		margin-top: calc(100vw * (30 / 1440));
	}

	/* 左中央：「RESORT WEDDING」タイトル（36px） */
	.banner-main-title {
		font-size: calc(100vw * (36 / 1440));
		color: #fff;
		font-weight: normal;
		letter-spacing: 0.04em;
	}

	/* 右中央：PREMIER PHOTO WEDDINGのSVGロゴ用ラッパー */
	.banner-logo-wrap {
		width: calc(100vw * (195) / 1440)); /* カンプに合わせたロゴの横幅サイズ */
		margin: 0 auto;
	}
	.banner-logo-wrap img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* 下部の白/薄グレーの文字が入るフッターエリア */
	.banner-footer {
		width: 100%;
		padding: calc(100vw * (16 / 1440)) 0;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color 0.3s ease;
	}
	/* 各バナーの下部カラー設定（カンプ準拠） */
	.banner-resort .banner-footer { background-color: #D3DBDE; }
	.banner-photo .banner-footer { background-color: #EAE3D4; }

	/* フッターの日本語（#515151、Noto Serif JP 15px Bold） */
	.banner-footer-txt {
		font-size: calc(100vw * (15 / 1440));
		font-weight: 700; /* Bold */
		color: #515151;
		letter-spacing: 0.04em;
		display: flex;
		align-items: center;
	}
	/* 右側の矢印アイコン（前回の共通アローを流用） */
	.banner-footer-txt::after {
		content: "";
		display: block;
		width: calc(100vw * (14 / 1440));
		height: calc(100vw * (14 / 1440));
		margin-left: calc(100vw * (8 / 1440));
		background-image: url("/wp-content/themes/arluis/cpnt/images/royal/pc/arrow-right.svg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		transition: transform 0.3s ease;
	}
	.banner-item:hover .banner-footer-txt::after {
		transform: translateX(4px);
	}
}

/* ==========================================================
   PC大画面モニター対策（1440px以上でピクセル固定）
   ========================================================== */
@media screen and (min-width: 1440px) {
	.banner-section {
		padding-top: 40px;
		padding-bottom: 120px;
	}
	.banner-section-title {
		font-size: 20px;
		margin-bottom: 40px;
	}
	.banner-container {
		gap: 40px;
		max-width: 1000px;
	}
	.banner-item {
		width: 480px;
	}
	.banner-inner-text {
		padding: 0 20px;
	}
	.banner-sub-txt {
		font-size: 16px;
		margin-bottom: 16px;
		margin-top: 30px;
	}
	.banner-main-title {
		font-size: 36px;
	}
	.banner-logo-wrap {
		width: 195px;
	}
	.banner-footer {
		padding: 16px 0;
	}
	.banner-footer-txt {
		font-size: 15px;
	}
	.banner-footer-txt::after {
		width: 14px;
		height: 14px;
		margin-left: 8px;
	}
}

/* ==========================================================
   スマホ版（SP：767px以下）自動縦並び
   ========================================================== */
@media screen and (max-width: 767px) {
	.banner-section {
		width: 100%;
		border-top: none; /* スマホは上部線なし */
		padding: calc(100vw * (48 / 375)) calc(100vw * (20 / 375));
		box-sizing: border-box;
	}
	.banner-section-title {
		font-size: calc(100vw * (20 / 375));
		font-weight: 500; /* スマホで見栄え良くするためBoldに調整 */
		margin-bottom: calc(100vw * (24 / 375));
		color: #7f7f7f;
		text-align: center;
	}
	.banner-container {
		display: flex;
		flex-direction: column; /* 縦並び */
		gap: calc(100vw * (24 / 375));
		width: 100%;
	}
	.banner-item {
		width: 100%;
	}
	.banner-image-box {
		aspect-ratio: 340 / 275; /* スマホで正方形に近いやや縦に厚い比率へ調整 */
	}
	.banner-resort .banner-image-box {
		background-image: url('/wp-content/themes/arluis/cpnt/images/royal/sp/resortwedding-bg.webp');
		background-repeat: no-repeat;
        background-size: cover;
	}
	.banner-photo .banner-image-box {
		background-image: url('/wp-content/themes/arluis/cpnt/images/royal/sp/premierphotowedding-bg.webp');
		background-repeat: no-repeat;
        background-size: cover;
	}
	.banner-inner-text {
		text-align: center;
	}
	.banner-sub-txt {
		font-size: calc(100vw * (16 / 375));
		margin-bottom: calc(100vw * (12 / 375));
		font-weight: 700;
		color: #fff;
		line-height: 1.7;
		padding-top: calc(100vw * (30 / 375));
	}

	.banner-main-title {
		font-size: calc(100vw * (36 / 375)); /* スマホ用に縮小 */
		color: #fff;
	}
	.banner-logo-wrap {
		width: calc(100vw * (195 / 375));
		margin: 0 auto;
	}
	.banner-footer {
		padding: calc(100vw * (26 / 375)) 0;
	}
	.banner-resort .banner-footer { background-color: #D3DBDE; }
	.banner-photo .banner-footer { background-color: #EAE3D4; }
	.banner-footer-txt {
		font-size: calc(100vw * (15 / 375));
		font-weight: 700;
		color: #515151;
		text-align: center;
		justify-content: center;
		letter-spacing: 0.04em;
		display: flex;
		align-items: center;
	}
	.banner-footer-txt::after {
		content: "";
		display: block;
		background-image: url("/wp-content/themes/arluis/cpnt/images/royal/sp/arrow-right.svg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		transition: transform 0.3s ease;
		width: calc(100vw * (12 / 375));
		height: calc(100vw * (12 / 375));
		margin-left: calc(100vw * (6 / 375));
		margin-top: calc(100vw * (3 / 375));
	}
}