@charset "UTF-8";
/* ================================================================
   TOP メインビジュアル : バナースライダー
   （現行の #hero video を置き換える想定 / section は id="mv"）

   ・バナー内の文字はすべて HTML テキスト。画像は写真のみ。
   ・高さの考え方
       PC : 写真は 4:1。--mv-h（1200 x 300px）が表示高さ。
            ikyu (restaurant.ikyu.com) の MV は 1000 x 250px = 4:1。
       SP : 現行の #hero と同じ 56vw（≒16:9）を維持。
   ================================================================ */

.mv {
	--mv-h: 300px;
	/* PC バナー表示高さ */
	--mv-gap: 16px;
	/* スライド間の余白 */
	--mv-peek: 200px;
	/* 左右の見切れ分の確保幅（パターンA） */
	--mv-navw: 124px;
	/* 画面左の固定ナビ（ご予約/お問い合わせ）を避ける幅 */
	position: relative;
	width: 100%;
	background: var(--white, #fff);
	overflow: hidden;
	/* コミコミ帯の位置（上／下）を order で入れ替えられるように縦フレックスにする */
	display: flex;
	flex-direction: column;
	/* 本番は WP の global-styles が body{padding-top:0} を当てており、
	   固定ヘッダーが中身に覆いかぶさる前提。動画は全面表示だったので問題なかったが、
	   バナーは頭が隠れるため MV 側でヘッダー分を確保する。 */
	padding: var(--header-h-sp, 50px) 0 0;
}

.mv-slider {
	order: 2;
}

.mv-pagination {
	order: 3;
}

/* コミコミ帯：スライダーの上／下 */
.mv[data-perks="top"] .mv-perks {
	order: 1;
}

.mv[data-perks="bottom"] .mv-perks {
	order: 4;
}

.mv[data-perks="off"] .mv-perks {
	display: none;
}

/* ================================================================
   スライダー本体
   ================================================================ */
.mv-slider {
	position: relative;
	width: 100%;
	overflow: visible;
}

.mv-slider .swiper-wrapper {
	align-items: center;
}

.mv-slide {
	height: auto;
	width: 100%;
}

.mv-slide-link {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #0b2b3d;
	line-height: 0;
	text-decoration: none;
}

.mv-photo,
.mv-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* 文字を読ませるための暗幕。写真には焼き込まず CSS で乗せる */
.mv-slide-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ================================================================
   バナー内テキスト
   ================================================================ */
.mv-caption {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #fff;
	line-height: 1.5;
	text-shadow: 0 1px 12px rgba(0, 20, 35, .45);
}

.mv-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.mv-label {
	display: inline-block;
	background: var(--blue, #1882ba);
	color: #fff;
	font-weight: 700;
	line-height: 1;
	border-radius: 3px;
	text-shadow: none;
}

.mv-badge {
	display: inline-block;
	background: var(--orange, #f97316);
	color: #fff;
	font-weight: 700;
	line-height: 1;
	border-radius: 3px;
	text-shadow: none;
}

.mv-title {
	font-family: var(--font-serif, serif);
	font-weight: 400;
	line-height: 1.32;
	letter-spacing: .04em;
	padding-bottom: 0;
	line-height: 1.1;
}

.mv-lead {
	color: #e2f0f8;
	letter-spacing: .04em;
}

.mv-price {
	font-family: var(--font-num, sans-serif);
	color: #fff;
	letter-spacing: .04em;
}

/* ================================================================
   SP（〜800px）
   写真は 56vw。文字は下寄せ＋下からの暗幕。
   ================================================================ */
@media (max-width: 800px) {

	/* SP は1枚見せ。スクロールバー幅ぶんの隙間から隣のバナーが覗かないよう塞ぐ */
	.mv-slider {
		overflow: hidden;
	}

	.mv-slider .swiper-slide {
		width: 100%;
	}

	.mv-slide-link {
		/* 現行 #hero と同じ高さ */
		height: 56vw;
	}

	.mv-slide-link::after {
		background: linear-gradient(0deg,
				rgba(4, 26, 42, .82) 0%,
				rgba(4, 26, 42, .55) 38%,
				rgba(4, 26, 42, .12) 66%,
				rgba(4, 26, 42, 0) 100%);
	}

	.mv-caption {
		justify-content: flex-end;
		padding: 0 5.5% 4.5%;
	}

	.mv-label,
	.mv-badge {
		font-size: clamp(10px, 3vw, 15px);
		padding: .42em .7em;
	}

	.mv-title {
		font-size: clamp(20px, 6.4vw, 34px);
		margin: .42em 0 .3em;
	}

	.mv-lead {
		font-size: clamp(10px, 3vw, 15px);
	}

	.mv-price {
		font-size: clamp(11px, 3.4vw, 17px);
		margin-top: .2em;
	}

}

/* ================================================================
   PC（801px〜）
   文字は左寄せ・上下中央。暗幕は左からのグラデーション。
   文字サイズは --mv-h に連動させ、高さを変えても比率が崩れないようにする。
   ================================================================ */
@media (min-width: 801px) {

	/* --mv-th = 実際に描画されるバナーの高さ。
	   パターンA は画面が狭いとバナー幅が縮み、4:1 なので高さも一緒に縮む。
	   文字サイズを --mv-h（指定値）基準にすると狭い画面で文字がはみ出すため、
	   実寸である --mv-th を基準にする。 */
	.mv[data-pattern="a"] {
		--mv-th: min(var(--mv-h), calc((100vw - var(--mv-peek)) / 4));
	}

	.mv[data-pattern="b"] {
		--mv-th: var(--mv-h);
	}

	.mv-slide-link::after {
		background: linear-gradient(90deg,
				rgba(4, 26, 42, .74) 0%,
				rgba(4, 26, 42, .56) 30%,
				rgba(4, 26, 42, .12) 62%,
				rgba(4, 26, 42, 0) 82%);
	}

	.mv-caption {
		justify-content: center;
		padding-right: 12%;
	}

	.mv-label,
	.mv-badge {
		font-size: calc(var(--mv-th) * .056);
		padding: .5em .85em;
	}

	.mv-title {
		font-size: calc(var(--mv-th) * .148);
		margin: calc(var(--mv-th) * .05) 0 calc(var(--mv-th) * .038);
	}

	.mv-lead {
		font-size: calc(var(--mv-th) * .058);
	}

	.mv-price {
		font-size: calc(var(--mv-th) * .07);
		margin-top: calc(var(--mv-th) * .022);
	}

	/* ---- パターンA : 中央ピーク（ikyu と同じ見せ方） ---- */
	.mv[data-pattern="a"] {
		padding: var(--header-h-pc, 60px) 0 0;
	}

	/* コミコミ帯が上にあるときはその下、無いときはヘッダーの下に余白をとる */
	.mv[data-pattern="a"] .mv-slider {
		margin-top: 15px;
	}

	.mv[data-pattern="a"] .swiper-slide {
		width: min(calc(var(--mv-h) * 4), calc(100vw - var(--mv-peek)));
		transition: opacity .4s ease;
		opacity: .7;
	}

	.mv[data-pattern="a"] .swiper-slide-active {
		opacity: 1;
	}

	.mv[data-pattern="a"] .mv-slide-link {
		aspect-ratio: 4 / 1;
		border-radius: 4px;
	}

	.mv[data-pattern="a"] .mv-caption {
		padding-left: max(32px, 5.6%);
	}

	/* ---- パターンB : フル幅 ---- */
	.mv[data-pattern="b"] {
		padding: var(--header-h-pc, 60px) 0 0;
	}

	.mv[data-pattern="b"] .mv-slider {
		margin-top: 0;
	}

	.mv[data-pattern="b"] .swiper-slide {
		width: 100%;
	}

	.mv[data-pattern="b"] .mv-slide-link {
		height: var(--mv-h);
		border-radius: 0;
	}

	/* 画面左の固定ナビ（ご予約/お問い合わせ）を必ず避けつつ、
	   広い画面ではサイトのコンテンツ幅に合わせて内側へ寄せる */
	.mv[data-pattern="b"] .mv-caption {
		padding-left: max(var(--mv-navw), calc((100% - 1000px) / 2));
		padding-right: 15%;
	}
}

/* ================================================================
   ナビゲーション（矢印）
   ================================================================ */
.mv-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	color: var(--blue, #1882ba);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}

.mv-nav:hover {
	background: #fff;
}

.mv-nav.swiper-button-disabled {
	opacity: .35;
	pointer-events: none;
}

.mv-prev {
	left: 24px;
}

.mv-next {
	right: 24px;
}

@media (min-width: 801px) {

	/* パターンA は見切れスライドの上に重ねる */
	.mv[data-pattern="a"] .mv-prev {
		left: calc(50% - min(calc(var(--mv-h) * 4), calc(100vw - var(--mv-peek))) / 2 - 56px);
	}

	.mv[data-pattern="a"] .mv-next {
		right: calc(50% - min(calc(var(--mv-h) * 4), calc(100vw - var(--mv-peek))) / 2 - 56px);
	}

	/* パターンBは左側にコピーが入るため、矢印は右側にまとめる */
	.mv[data-pattern="b"] .mv-prev {
		left: auto;
		right: 82px;
	}

	.mv[data-pattern="b"] .mv-next {
		right: 24px;
	}
}

@media (max-width: 800px) {

	/* SP はスワイプ操作。矢印はバナー内の文字と重なるため出さない */
	.mv-nav {
		display: none;
	}
}

/* ================================================================
   ページネーション（ドット）
   ================================================================ */
.mv-pagination {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 0 18px;
}

.mv-bullet {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #c9d4dc;
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}

.mv-bullet:hover {
	background: #9fb3c0;
}

.mv-bullet.is-on {
	width: 24px;
	border-radius: 4px;
	background: var(--blue, #1882ba);
}

@media (max-width: 800px) {
	.mv-pagination {
		padding: 10px 0 12px;
	}
}

/* ---- 読み込み前のガタつき防止 ---- */
.mv:not(.is-ready) .mv-nav,
.mv:not(.is-ready) .mv-pagination {
	visibility: hidden;
}

/* ================================================================
   全プラン共通の特典「ぜんぶコミコミ」
   スライドせず常時表示。写真バナーと混同されないよう、
   写真を使わずベタ塗り＋罫線のあしらいにしている。
   ================================================================ */
.mv-perks {
	--perks-bg: #0f5f8a;
	background: var(--perks-bg);
	color: #fff;
}

.mv-perks__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 13px 20px;
	line-height: 1.4;
}

.mv-perks__lead {
	font-size: 12px;
	color: #a9d4ec;
	letter-spacing: .04em;
	padding-bottom: 0;
}

.mv-perks__title {
	font-size: 16px;
	letter-spacing: .04em;
	padding-bottom: 0;
}

.mv-perks__title b {
	font-size: 19px;
	font-weight: 700;
}

/* 日本語・中国語は全角の読点で字間が空くが、英語と韓国語は詰まるので空ける */
:lang(en) .mv-perks__title b,
:lang(ko) .mv-perks__title b {
	margin-left: .3em;
}

.mv-perks__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mv-perks__list li {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 5px 11px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 3px;
}

.mv-perks__note {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #fff;
	background: var(--orange, #f97316);
	padding: 6px 13px;
	border-radius: 3px;
}

/* ---- 画面左下に固定（予約ボタンと同じ扱い） ---- */
.mv[data-perks="fixed"] .mv-perks {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 400;
	width: 268px;
	border-radius: 6px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
}

.mv[data-perks="fixed"] .mv-perks .mv-perks__inner {
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	padding: 14px 16px;
}

.mv[data-perks="fixed"] .mv-perks .mv-perks__title {
	font-size: 15px;
}

.mv[data-perks="fixed"] .mv-perks .mv-perks__title b {
	display: block;
	font-size: 20px;
}

@media (max-width: 800px) {
	.mv-perks__inner {
		gap: 7px 12px;
		padding: 12px 16px;
	}

	.mv-perks__lead {
		font-size: 11px;
		width: 100%;
		text-align: center;
	}

	.mv-perks__title {
		font-size: 14px;
		text-align: center;
	}

	.mv-perks__title b {
		font-size: 17px;
	}

	/* SP は縦に厚くなりすぎるため、設備名は枠を外して1行の並記にする */
	.mv-perks__list {
		justify-content: center;
		gap: 0;
	}

	.mv-perks__list li {
		font-size: 12px;
		font-weight: 400;
		padding: 0;
		border: 0;
		border-radius: 0;
	}

	.mv-perks__list li:not(:last-child)::after {
		content: "／";
		opacity: .6;
	}

	.mv-perks__note {
		font-size: 12px;
		padding: 4px 10px;
	}

	/* SP の固定表示はボトムバーの上に置く */
	.mv[data-perks="fixed"] .mv-perks {
		left: 8px;
		right: 8px;
		bottom: calc(var(--bottom-bar-h, 95px) + 8px);
		width: auto;
	}

	.mv[data-perks="fixed"] .mv-perks .mv-perks__inner {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
}