@charset "utf-8";
/* CSS Document */

:root {
	/* 変更: コントラストの強いネイビー/ゴールドをやめ、シャンパンゴールドとダークグレーのシックな配色へ */
	--yc-champagne: #c5a880; /* 洗練されたくすんだゴールド */
	--yc-charcoal: #2c3338; /* 真っ黒ではない、上品なダークグレー */
	--yc-gray-light: #f7f7f7;
	--yc-gray-text: #666666;
	--yc-white: #ffffff;
	--neumorphic-shadow-bk-dark: 
	0 0 14px rgba(0, 0, 0, 1);
	--font-serif: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif;
}
/*▼----------------PC・SP共通----------------▼*/
/*
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
*/
body {
	width: 100%;
	overflow-x: hidden;
}
body.fix_now_colorbox {
	overflow: hidden !important;
}
.l-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.yachtclubLp main,
.ea-modal-desc,
.ea-modal-features-wrap {
	font-family: "Zen Kaku Gothic New", sans-serif !important;
	color: #4d1a0a;
	font-size: 16px;
	font-weight: 400;
}
.yachtclubLp .price_table_wrap,
.ea-modal-title,
.cv-btn,
.big-text,
.jc-label,
.modern-rounded-btn,
.feature-btn,
.ea-modal-category,
.ea-modal-section-title,
.yachtclubLp main nav,
.nav-menu a,
.jc-point-badge,
.svgim-font-serif-en,
.a-modal-section-title,
.schedule-container,
.room-content-wrapper,
.yachtclubLp .lpo_header,
.yachtclubLp main h1,
.yachtclubLp main h2,
.yachtclubLp main h3,
.yachtclubLp main h4,
.yachtclubLp main h5,
.yachtclubLp main h6,
.yachtclubLp main button {
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif !important;
	font-weight: 400;
}
.yachtclubLp main section,
.yachtclubLp main div,
.yachtclubLp main p,
.yachtclubLp main nav,
.yachtclubLp main ul,
.yachtclubLp main li,
.yachtclubLp main span,
.yachtclubLp main a,
.yachtclubLp main h1,
.yachtclubLp main h2,
.yachtclubLp main h3,
.yachtclubLp main h4,
.yachtclubLp main h5,
.yachtclubLp main h6,
.yachtclubLp main button {
	box-sizing: border-box;
}
.menuDisplayPosition {
	display: none;
}
/*アンカーの位置調整*/
.anc_pos {
	top: -80px;
}
.small-text {
	font-size: 1rem;
}
.small-text-Annotation {
	font-size: 12px;
	vertical-align: text-top;
	padding: 0 !important;
}
.small-text-2 {
	font-size: 8px;
	padding: 5px 10px 0 0;
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp main {
		overflow-x: hidden;
		min-width: auto;
	}
	.yachtclubLp main p {
		font-size: 1rem;
	}
	.section-padding-bottom {
		padding-bottom: 50px;
	}
}

section {
	width: 100% !important;
}
.section_around_margin {
	padding: 20px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.section_around_margin {
		padding: 0px;
	}
}
.section_side_margin {
	padding: 0 10px;
}
.text-height-16 {
	line-height: 1.6;
}
.ea-modal-title {
	line-height: 1.2;
	font-size: 23px;
}

/* ▼ ロード完了後のアニメーション発火 ▼ */
body.is-loaded .hero-image {
	animation: shrinkToFit 1.5s ease-out forwards;
} /* 背景が1.5秒かけて落ち着く */
body.is-loaded .hero-text h3 {
	animation: fadeInSlow 1.5s ease-out 0.5s forwards;
}
body.is-loaded .hero-text h1 {
	animation: fadeInSlow 1.5s ease-out 1s forwards;
}
body.is-loaded .hero-content .modern-rounded-btn {
	animation: fadeInSlow 2.5s ease-out 1.5s forwards;
}
body.is-loaded .btn-vip-hero {
	animation: fadeUpText 1.5s ease-out 3s forwards;
}

.yachtclubLp #cruising_popup .popup_closeBtn {
	background-image: url(/shopping/img/special/cruising/common/icon_close_v2.svg);
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	transition: 0.4s;
}
.yachtclubLp #cruising_popup .popup_closeBtn:hover {
	transform: rotate(90deg);
	transition: 0.4s;
}


/* =================================
Global layout 
=================================*/
main {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	overflow-x: hidden;
}

.box986 {
	width: 100%;
	margin: 0 auto;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.box986 {
		width: 986px;
		display: block;
		position: relative;
		margin: 0px auto;
	}
}

.scroll-section {
	width: 100%;
	position: relative;
	will-change: transform, filter;
}

.js-parallax-section {
	position: sticky;
	top: 0;
}

.font-weight-change {
	font-weight: 500;
}

/* =========================================
共通
========================================= */
body {
	background-image: url(/shopping/img/special/cruising/2026autumn/yachtclub/main_bg.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	margin: 0 auto;
}
.content-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	padding: 0 0 40px 0;
}
.content-title-padding {
	padding-left: 20px;
}

.content-title_sub {
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif;
	font-weight: 500;
	letter-spacing: 0.15em;
	color: #4d1a0a;
	margin: 0;
	/*font-size: 0.9rem;*/
	font-size: 16px;
}
.white-text {
	color: #fff;
}

.content-title_main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.content-title_main h2 {
	font-family: "Cinzel", "Noto Serif JP", serif;
	font-size: 2.2rem;
	font-weight: 400;
	letter-spacing: 0.05em;
	margin: 0;
	line-height: 1.2;
}
.content-title_main p {
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.08em;
	margin: 0;
	line-height: 1.6;
}
.h2_line {
	display: none;
}

.guide-block {
	width: 100%;
	margin-top: 20px;
}
.guide-block_title {
	font-size: 1.2rem;
	background: linear-gradient(45deg, #e8e8e8 0%, #9e9e9e 100%);
	padding: 12px 20px;
	margin: 0 0 20px 0;
	font-weight: bold;
}
.guide-block_list {
	list-style: none;
	padding-bottom: 20px;
	margin-top: 20px;
}
.guide-block_item + .guide-block_item {
	margin: 0 auto;
}
.guide-block_item {
	max-width: 500px;
	width: 70vw;
	padding-bottom: 10px;
	margin: 0 auto;
}
.annotation_area {
	width: 100%;
	margin-top: 30px;
	padding: 0;
	text-align: left;
	font-weight: 400;
}
.annotation_area-2 {
	margin-bottom: 30px;
}
.padding-left-annotation {
	padding-left: 15px;
	font-size: 12px;
}
.annotation_area p {
	font-size: 0.8rem !important;
	color: #555;
	line-height: 1.6;
	margin: 0;
	padding-bottom: 0;
}
.annotation_area_bk p {
	color: #fff;
	padding: 0 10px;
}
.item-li-style {
	display: flex;
	padding-bottom: 15px;
}
.annotation_area > .item-li-style {
	padding-bottom: 0;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.annotation_area > .item-li-style {
		padding-bottom: 0;
	}
	.annotation_area-2 {
		margin-bottom: 0px;
	}
}

.guide-block_desc {
	padding: 0 5px;
}
.small-text-3 {
	font-size: 0.8rem;
	color: #555;
	line-height: 1.6;
	margin: 0;
}
.name-impact {
	background-color: #3175a0;
	font-size: 0.8rem;
	color: #fff;
	line-height: 1.6;
	margin: 0;
	padding: 0px 10px;
}
.name-impact-2 {
	background-color: #4e88ac;
	font-size: 0.9rem;
	color: #fff;
	line-height: 1.6;
	margin: 0;
	padding: 5px 10px;
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* =========================================
	共通
	========================================= */
	/* Content Titles PC Layout */
	.big-text {
		font-size: 1.5rem !important;
	}
	.small-text {
		font-size: 1.3rem;
	}
	.content-title_main {
		flex-direction: row;
		align-items: center;
		gap: 30px;
	}
	.content-title {
		padding: 0 0 40px 10px;
	}

	.h2_line {
		display: block;
		border: none;
		height: 1px;
		background-color: #3b2f28;
		width: 60px;
	}
	.guide-block {
		margin-top: 60px;
	}
	.guide-block-2 {
		margin-top: 0;
	}
	.guide-block_list {
		display: flex;
		justify-content: space-between;
		gap: 30px;
	}
	.guide-block_item + .guide-block_item {
		margin-top: 0;
	}
	.guide-block_item {
		width: calc();
	}
	#article_link h2 span,
	#cruisingfaq h2 span,
	#osusume h2 span {
		padding-top: 16px !important;
	}
	.name-impact {
		width: fit-content;
	}
}

/* ==============================
スクロールバー
==============================*/
/* WebKit系（Chrome, Safari, Edge） */
::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.05);
	border-radius: 100vh;
}
::-webkit-scrollbar-thumb {
	background: #cba052;
	border-radius: 100vh;
}
::-webkit-scrollbar-thumb:hover {
	background: #a67c00;
}
/* シンプルバー */
.simplebar-scrollbar::before {
	background: #cba052 !important;
}

/* ==============================
ホバーアニメ
==============================*/
/*ホバー時　キラッと光る筋 
-------------------------*/
.anime-shine {
	overflow: hidden;
	position: relative;
}
.anime-shine::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
	transform: skewX(-25deg);
	transition: all 0.5s ease;
	z-index: 10; /* テキストの上を光らせる */
	pointer-events: none;
}
.anime-shine:hover::after {
	left: 150%; 
}
/* ホバー時 拡大 
------------------------*/
.anime-expand {
	transition: 0.3s ease;
}
.anime-expand:hover {
	transform: translateY(-2px) scale(1.02);
	transition: 0.3s ease;
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	.desktop-only {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
	}
	.mobile-only {
		display: none;
	}
}
/* ▲ホバーアニメ▲ */
/* ==============================
アニメーション
==============================*/
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
/* ▲アニメーション▲ */


/* =========================================================================
Mobile First Rules (Smartphones) - Default Styles
========================================================================= */


/* ======================================
▼Header Nav▼
========================================*/
.lpo_header {
	transform: translateY(-100%);
	transition:
		transform 0.4s ease,
		opacity 0.4s ease;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 5000;
}
.lpo_header.is-sticky-active {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.lpo_header.header-hidden {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}
.nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 5000; /* lpo_headerや追従ボタンと同じか少し下 */
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.4s ease,
		visibility 0.4s ease;
}
.nav-overlay.active {
	opacity: 1;
	visibility: visible;
	cursor: pointer;
}
.menu-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	align-items: center;
	gap: 10px;
	z-index: 1001;
	display: flex;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		visibility 0.4s ease,
		opacity 0.4s ease;
	cursor: pointer;
	padding: 10px 0px;
	transform: translateY(-110%);
	animation: slideDownMenu 0.4s ease-out 0.8s forwards;
	width: 100%;
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/blue_bg_sp.jpg);
	background-position: right 1%;
	border-bottom: 1px solid;
	border-image: linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);
	border-image-slice: 1;
}
.menu-wrapper.is-fixed {
	z-index: 9999;
	height: 2rem;
	background-color: #112241;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
.menu-label {
	font-family: "Cinzel", serif;
	font-size: 0.9rem;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: color 0.3s;
}
.menu-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	width: 35px;
	height: 25px;
	position: relative;
	z-index: 1001;
}
.menu-btn .bar {
	display: block;
	width: 100%;
	height: 1px;
	background-color: #fff;
	margin: 5px 0;
	transition: all 0.3s ease;
}
.nav-btn:hover .menu-label {
	color: #d4af37;
}
.menu-btn:focus .bar,
.menu-btn:hover .bar {
	background-color: #a67c52;
}
.menu-btn.open .bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.menu-btn.open .bar:nth-child(2) {
	opacity: 0;
}
.menu-btn.open .bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}
.nav-logo {
	margin-left: auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	height: 100%;
	flex-shrink: 0;
}
.nav-logo img {
	/* width: 100%; のままだと親要素の幅に依存しすぎるため変更 */
	width: auto;
	max-width: 100%;
	/* ▼ 画像の縦横比を崩さないための必須プロパティ ▼ */
	height: auto;
	max-height: 100%; /* 親の高さ（ヘッダー枠）を突き破らないようにする */
	object-fit: contain; /* 絶対にアスペクト比を維持して枠内に収める */
}
.nav-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 20px;
}
/* スクロール時の余裕を持たせるためにpadding-bottom追加 */
.nav-menu ul {
	padding-bottom: 50px;
}
.nav-menu {
	position: fixed;
	top: 0;
	left: -250px;
	width: 250px;
	height: 100vh; /* 保険 */
	height: 100dvh;
	background-color: #a67c52;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: left 0.5s ease-in-out;
	z-index: 999;
	padding: 60px 0 55px 0;
	box-sizing: border-box; /* 余白を高さに含める設定 */
	pointer-events: auto;
}
.nav-menu.active {
	left: 0;
}
.nav-menu ul {
	list-style: none;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.nav-menu li {
	flex: 1 1 0;
	margin: 0;
	opacity: 0;
	transform: translateX(-20px);
	transition: all 0.5s ease;
	position: relative;
	display: flex;
	min-height: 50px;
}
.nav-menu li:not(:first-child):not(:last-child):not(:nth-child(2))::after {
	position: absolute;
	content: "";
	width: 70%;
	height: 1px;
	background: #fff;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
}
.nav-menu li:first-child {
	margin-bottom: 0;
}
.nav-menu li:last-child {
	background: #a60000;
	color: #fff;
}
/* active時 */
.nav-menu.active li {
	opacity: 1;
	transform: translateX(0);
}
.nav-menu.active li:nth-child(1) {
	transition-delay: 0.05s;
}
.nav-menu.active li:nth-child(2) {
	transition-delay: 0.1s;
}
.nav-menu.active li:nth-child(3) {
	transition-delay: 0.15s;
}
.nav-menu.active li:nth-child(4) {
	transition-delay: 0.2s;
}
.nav-menu.active li:nth-child(5) {
	transition-delay: 0.25s;
}
.nav-menu.active li:nth-child(6) {
	transition-delay: 0.3s;
}
.nav-menu.active li:nth-child(7) {
	transition-delay: 0.35s;
}
.nav-menu.active li:nth-child(8) {
	transition-delay: 0.4s;
}
.nav-menu.active li:nth-child(9) {
	transition-delay: 0.45s;
}
.nav-menu.active li:nth-child(10) {
	transition-delay: 0.5s;
}
.nav-menu.active li:nth-child(11) {
	transition-delay: 0.55s;
}

.nav-menu a {
	flex: 1;
	text-decoration: none;
	color: #fff;
	font-size: clamp(14px, 2.2vh, 1.2rem);
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: color 0.3s;
	display: flex;
	align-items: center;
	padding: clamp(5px, 1vh, 10px) 0;
	padding-left: 2.5rem;
}
.nav-menu a svg {
	width: 100%;
	max-width: 130px;
	height: auto;
	max-height: 8vh;
	object-fit: contain;
}
.nav-menu a:hover {
	color: #a67c52;
	background-color: #0d1b2a;
}
.nav-menu li:first-child a:hover {
	background-color: transparent;
}

/* ▼ ナビメニューの高さ調整（固定ボタンとの被り防止） ▼ */
.nav-menu.is-shortened {
	height: calc(100vh - 44px);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.nav-btn {
		width: 280px;
		display: flex;
		justify-content: flex-start;
		background-image: url(/shopping/img/special/cruising/yachtclub_hub/blue_bg_pc.jpg);
		background-position: right;
		background-size: cover;
		gap: 40px;
		align-items: center;
		background-repeat: no-repeat;
		padding-left: 20px;
		height: 4rem;
	}
	.nav-logo {
		display: flex;
		justify-content: flex-end;
		background-color: #112241;
		padding-right: 10px;
		height: 4rem;
		padding: 0 20px 0 0;
	}
	.nav-logo img {
		width: 100%;
	}
	.nav-menu {
		width: 300px;
		left: -300px;
		padding: 4rem 0 0 0;
	}
	.nav-menu a {
		font-size: 1rem;
		padding-left: 3rem;
	}
	.nav-menu a svg {
		max-width: 170px;
	}
	.nav-menu.is-shortened {
		height: 100vh;
	}

	.menu-wrapper {
		width: 100%;
		height: 4rem;
		display: flex;
		justify-content: space-between;
		background-image: none;
		padding: 0;
		border-bottom: 1px solid;
	}
	.menu-wrapper.is-fixed {
		height: 4rem;
	}

	.menu-btn.open .bar:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}
	.menu-btn.open .bar:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
	}
	.menu-btn {
		width: 38px;
		height: 50px;
	}
	.menu-btn .bar {
		height: 1.5px;
		margin: 8px;
	}
	.menu-label {
		font-size: 1.2rem;
	}
}

/* 資料請求ボタン
-------------- */
.manu-btn-brochure {
	display: none;
}
@media (min-width: 980px)  {
	.manu-btn-brochure {
		position: relative;
		display: flex;
		align-items: center;
		width: 90%;
		max-width: 300px;
		height: 50px; 
		/* 四角ベースにしつつ、少しだけ角を丸めて上品さを出す */
		border-radius: 4px; 
		/* シャンパンゴールド系のグラデーション */
		background: linear-gradient(to right, #cca063 0%, #e2c27c 30%, #e2c27c 85%, #bd9758 85.5%, /* くっきりした境界線 */ #d1aa68 86%, #e2c27c 100% /* 右端の濃いゴールド */);
		text-decoration: none;
		color: #1a2238;
		overflow: hidden;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}


	.manu-btn-brochure__badge {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 44px;
		height: 100%;
		/* 右側にうっすらと区切り線を入れてスマートに */
		border-right: 1px solid rgba(26, 34, 56, 0.2); 
		background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
	}

	.manu-btn-brochure__badge span {
		font-size: 13px;
		font-weight: 700;
		line-height: 1.1;
	}

	/* 上下の「ー」を疑似要素で表現 */
	/* .manu-btn-brochure__badge::before,
	.manu-btn-brochure__badge::after {
		content: "";
		display: block;
		width: 1px;
		height: 6px;
		background-color: #1a2238;
		margin: 2px 0;
	} */

	/* 中央のテキストエリア（2段構成） */
	.manu-btn-brochure__texts {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-grow: 1;
		padding: 0 5px;
	}

	.manu-btn-brochure__sub {
		font-size: 10px;
		font-weight: 500;
		color: #333;
		margin-bottom: -1px;
		letter-spacing: 0.05em;
	}

	.manu-btn-brochure__main {
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-shadow: 1px 1px 0px rgba(255,255,255,0.2);
	}

	/* 右側のアイコン（矢印）エリア */
	.manu-btn-brochure__icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 44px;
		height: 100%;
		/* 押せる感を強調するために少し暗くする */
		background-color: rgba(26, 34, 56, 0.06); 
		border-left: 1px solid rgba(255, 255, 255, 0.3);
	}

	.manu-btn-brochure__icon svg {
		width: 18px;
		height: 18px;
		stroke: #1a2238;
		transition: transform 0.3s ease;
	}

	/* ホバー時のアクション */
	.manu-btn-brochure:hover {
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
		transform: translateY(-1px);
		filter: brightness(1.08);
	}
	.manu-btn-brochure:hover .header-btn__icon svg {
		transform: translateX(3px); /* 矢印が右に動く */
	}
}
/* お問い合わせボタン
-------------- */
.menu-btn-contact {
	display: none;
}
@media (min-width: 1200px)  {
	.menu-btn-contact {
		display: inline-flex;
		align-items: center;
		width: 300px;
		height: 50px; 
		box-sizing: border-box;
		text-decoration: none;
		background-color: transparent;
		border: 1px solid #ffffff;
		border-radius: 4px; 
		color: #ffffff;
		font-family: "Noto Serif JP", "游明朝", "Yu Mincho", serif;

	}
	
	/* 左側ブロック：お問い合わせ */
	.menu-btn-contact-left {
		width: 38%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative; /* ★中央の縦線の基準位置にします */
		box-sizing: border-box;
	}
	/* ★中央の縦区切り線（上下に隙間を空ける設定） */
	.menu-btn-contact-left::after {
		content: '';
		position: absolute;
		right: 0;
		top: 8px; 
		bottom: 8px; 
		width: 1px;
		background-color: rgba(255, 255, 255, 0.7); 
	}
	.menu-btn-contact-title {
		font-size: 14px;
		letter-spacing: 0.1em;
		white-space: nowrap;
	}
	/* 右側ブロック：電話番号と受付時間 */
	.menu-btn-contact-right {
		width: 62%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	
	/* 電話番号 */
	.menu-btn-contact-tel {
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0.18em; /* 数字の間隔 */
		line-height: 1.1;
		margin-bottom: 2px;
	}
	
	/* 受付時間 */
	.menu-btn-contact-hours {
		font-size: 10px;
		letter-spacing: 0.08em;
		opacity: 0.9;
		white-space: nowrap;
	}
	.menu-btn-contact:hover {
		transform: translateY(-1px);
		/* background: rgba(255, 255, 255, 0.1); */
		box-shadow: inset 0 0px 12px rgba(255, 255, 255, 0.3);
		transition: .4s;
	}
}

/* =========================================
hero Section
========================================= */

/* LPOheader & Menu Button */
.yc-fv-header {
	width: 100%;
	height: 50px;
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	z-index: 999;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.yc-fv-header img {
	width: 125px;
	height: auto;
	padding-left: 20px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yc-fv-header img {
		width: 140px;
		height: auto;
		padding: 0;
	}
	.yc-fv-header {
		justify-content: center;
		height: 4rem;
		padding: 0;
	}
}

/* --- 背景動画エリア --- */
.video-bg-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0; /* 一番下に配置 */
	/* 動画が読み込まれる前や非対応時のための静止画（スマホ用） */
	background-image: url("/shopping/img/special/cruising/yachtclub_hub/fv_sp.avif");
	background-size: cover;
	background-position: center;
	background-color: #333; /* 画像がない場合のベース色 */
}
.video-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}
/* アニメーションを適用 */
.video-fade-in {
	opacity: 0; /* 初期状態は透明 */
	animation: fadeIn 1.5s ease-in-out forwards; /* 1.5秒かけてフェードイン */
}

/* フェードインのキーフレーム（動きの定義） */
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.hero {
	position: relative;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}
.hero-image-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	transform: scale(1.1);
	filter: brightness(1);
	/* transition: transform 0.6s ease-out, filter 0.6s ease-out;  */
	will-change: transform, filter;
}
/* アニメーション完了後の固定状態：1.0 */
.hero-image-container.is-completed {
	transform: scale(1) !important;
	filter: brightness(0.2) !important;
}

.hero-image-sp {
	display: block;
}
.hero-image-tab {
	display: none;
}
.hero-image-pc {
	display: none;
}
.hero-image {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	transform: scale(1.1);
	/* animation: shrinkToFit 1s ease-out forwards; */
}

.hero-content {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: left;
	gap: 40px;
	z-index: 1;
	width: 100%;
	max-width: 90vw;
}
.hero-text {
	text-align: left;
}
.hero-text h1 {
	font-size: 2rem;
	letter-spacing: 3px;
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	z-index: 2;
	opacity: 0;
	/* animation: fadeInSlow 2.5s ease-out 1.4s forwards; */
	margin-top: 30px;
	position: relative;
}
.hero-text h3 {
	font-size: 1rem;
	letter-spacing: 2px;
	line-height: 1.8;
	color: #fff;
	position: relative;
	z-index: 1;
	opacity: 0;
	/* animation: fadeInSlow 2.5s ease-out 1s forwards; */
}

.modern-rounded-btn {
	width: 250px;
	background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 40px;
	padding: 7px 40px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all 0.4s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateY(5px);
	/* animation: fadeUpText 0.8s ease-out 1.8s forwards; */
}
.modern-rounded-btn:hover {
	background-color: #fff;
	color: #3b2f28;
	border-color: #fff;
	transform: translateY(-2px);
}

.btn-vip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif;
	text-decoration: none;
	position: relative;
	overflow: hidden;
}
.btn-vip::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(212, 175, 55, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	animation: shine 5s infinite;
}
.btn-vip:hover {
	border-color: rgba(212, 175, 55, 0.8);
}

/* 共通テキスト・アイコン系（スマホベース） */
.btn-vip-text {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
}
.btn-vip-sub-box {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-bottom: 0;
}
.btn-vip-sub-box img {
	width: 0.8rem;
}
.btn-vip-subtitle {
	font-size: 0.65rem;
	color: #9ca3af;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 0;
}
.btn-vip-title {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	white-space: nowrap;
	background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.btn-vip-plus {
	width: 1rem;
	height: 1rem;
	color: #d4af37;
	opacity: 0.8;
	transition: transform 0.3s ease;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}
.btn-vip:hover .btn-vip-plus {
	opacity: 1;
}

/* Hero内ボタン（スマホベース：丸いボタン） */
.btn-vip-hero {
	display: none;
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 20;
	padding: 0.6rem 1rem;
	border-radius: 9999px;
	border: 1px solid transparent;
	background:
		linear-gradient(135deg, #1e293b 0%, #0f172a 100%) padding-box,
		linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%) border-box;

	box-shadow:
		0 10px 25px -5px rgba(0, 0, 0, 0.5),
		0 0 15px rgba(212, 175, 55, 0.15);
	transform: translateY(30px);
}
.btn-vip-hero:hover {
	transform: translateY(-2px) scale(1.02);
}
.btn-vip-hero .btn-vip-text {
	flex-direction: column;
	align-items: flex-start;
	padding-right: 0.5rem;
	gap: 0;
}
.btn-vip-hero .btn-vip-sub-box img {
	width: 1rem;
}
.btn-vip-hero .btn-vip-subtitle {
	font-size: 0.625rem;
	margin-bottom: 0.125rem;
}

/* 追従バー（スマホベース：画面下部固定バー） */
.btn-vip-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 55px;
	border-radius: 0;
	padding: 0.5rem;
	z-index: 5000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	border: none;
	background: 
		/* 1層目：上部1pxのグラデーション線 */
		linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%) no-repeat top left / 100% 1px,
		/* 2層目：本体の赤系グラデーション背景 */ linear-gradient(135deg, #8a1111 0%, #930707 100%);
}
.btn-vip-fixed.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.btn-vip-sub-box {
	display: inline;
	padding-bottom: 5px;
}
.btn-vip-sub-box img {
	width: 1rem;
	padding-bottom: 3px;
}

.pop_link_btn_erea {
	width: 100%;
	height: 100px;
	position: relative;
}
.pop_link_btn {
	width: 300px;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	cursor: pointer;
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUpText 0.2s ease-out 0.5s forwards;
	text-align: center;
}

.pop_link_btn:hover {
	background-color: #fff;
	color: #3b2f28;
	border-color: #fff;
	transform: translateY(-2px);
}

.section-border-line {
	width: 95%;
	border-top: #4d1a0a 0.5px solid;
	margin: 20px auto;
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* =========================================
	Main Visual
	========================================= */
	.video-bg-wrapper {
		/* 動画が読み込まれる前や非対応時のための静止画（PC用） */
		background-image: url("/shopping/img/special/cruising/2026autumn/yachtclub/FV_bg.jpg");
	}

	.hero-content {
		top: 0;
	}
	.hero-content h1 {
		font-size: 2rem;
		letter-spacing: 5px;
	}

	.hero-content h3 {
		font-size: 1.5rem;
	}

	.hero-text h1 {
		font-size: 2.2rem;
		margin-top: 130px;
	}
	.hero-text h3 {
		font-size: 1.6rem;
	}

	.modern-rounded-btn {
		width: 300px;
		padding: 15px 25px;
		font-size: 1rem;
		letter-spacing: 0.2em;
		border-radius: 50px;
		text-align: center;
	}

	.btn-vip-hero {
		bottom: 1.5rem;
		right: 1.5rem;
		padding: 0.875rem 1.25rem;
		width: 400px;
	}
	.btn-vip-fixed {
		bottom: 1.5rem;
		right: 20px;
		width: 320px;
		height: auto;
		border-radius: 9999px;
		border: 1px solid transparent;
		background:
			linear-gradient(#112241, #112241) padding-box,
			/* ボタン内の色 */ linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%) border-box;
		box-shadow:
			0 10px 25px -5px rgba(0, 0, 0, 0.5),
			0 0 15px rgba(212, 175, 55, 0.15);
		padding: 0.875rem 1.25rem;
	}
	.btn-vip-fixed:hover {
		transform: translateY(-2px) scale(1.02);
	}
	.btn-vip-text {
		flex-direction: column;
		align-items: flex-start;
		padding-right: 0.5rem;
		gap: 0;
	}
	.btn-vip-sub-box {
		padding-bottom: 2px;
	}
	.btn-vip-hero .btn-vip-sub-box img {
		width: 1.4rem;
	}
	.btn-vip-sub-box img {
		width: 1.4rem;
	}
	.btn-vip-subtitle {
		font-size: 1rem;
		margin-bottom: 0.125rem;
		padding-left: 10px;
	}
	.btn-vip-title {
		font-size: 1.1rem;
	}

	.btn-vip-plus {
		width: 1.2rem;
		height: 1.2rem;
		padding-left: 10px;
	}
	.btn-vip-hero .btn-vip-subtitle {
		font-size: 0.8rem;
		margin-bottom: 0.125rem;
	}
}

/* =========================================
3. セクション別スタイル：タイトル
========================================= */
.title-section {
	width: 100%;
	text-align: left;
	z-index: 20;
	padding: 20px 0 5px 0;
	flex-shrink: 0;
	visibility: hidden; /* JSで表示させるため初期は隠す */
}
.title-section.is-visible {
	visibility: visible;
}
.title-heading {
	font-size: 1.3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.title-heading-top {
	line-height: 1.6;
}
.title-heading_2 {
	justify-content: flex-start;
	padding-top: 0 !important;
	align-items: flex-start !important;
	line-height: 1.6;
}
.letter-spacing_small {
	letter-spacing: -1px;
}
.cinematic-text {
	display: inline-block;
	opacity: 0;
	filter: blur(15px);
	transform: scale(1.05) translateY(10px);
	letter-spacing: 0.2em;
	transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.title-subtitle {
	font-size: 1.3rem; /* text-xs相当 */
	color: #4b5563; /* text-gray-600相当 */
	font-weight: normal;
}
.title-main {
	font-weight: bold;
}
.title-section.is-visible .cinematic-text {
	opacity: 1;
	filter: blur(0);
	transform: scale(1) translateY(0);
	letter-spacing: 0.05em;
}
.title-section.is-visible .cinematic-text:nth-child(1) {
	transition-delay: 0.2s;
}
.title-section.is-visible .cinematic-text:nth-child(2) {
	transition-delay: 0.5s;
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	.title-section {
		padding-top: 2.5rem;
		padding-bottom: 1rem;
		text-align: left;
	}
	.title-heading-top {
		padding-top: 60px;
	}
	.title-heading {
		font-size: 1.6rem; /* text-3xl相当 */
		flex-direction: row;
		gap: 1rem;
		padding-top: 30px;
	}
	.title-subtitle {
		font-size: 1.25rem; /* text-xl相当 */
	}
}


/* =========================================
intro Section
========================================= */
.intro-content {
	width: 95vw;
	display: flex;
	flex-direction: column;
	gap: 50px;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	padding-top: 10px;
}
.intro_logo {
	width: 80vw;
	margin: 0 auto;
	display: inline-block;
	opacity: 0;
	filter: blur(15px);
	transform: scale(1.05) translateY(10px);
	transition: all 2.5s cubic-bezier(0.22, 1, 0.36, 1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	padding-bottom: 20px;
}
.intro_logo.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: scale(1) translateY(0);
}
.intro_msc {
	position: relative;
	min-height: 300px;
	overflow: hidden;
	color: #fff;
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/blue_bg_sp.jpg);
	background-position: right 1%;
	background-size: cover;
}
.message-section p {
	line-height: 1.6;
}

.intro_text_box {
	padding-bottom: 20px;
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	.intro-content {
		width: 986px;
	}
	.intro_pc_layout {
		display: flex;
		min-width: 986px;
		margin: 0 auto;
		width: fit-content;
		gap: 20px;
		padding: 0 0 30px 0;
		justify-content: center;
	}	
	.intro_logo {
		width: 200px;
		margin: 0;
	}
	.intro_logo img {
		width: 180px;
	}


	.message-section {
		width: 500px;
	}
	/*intro_msc*/
	.intro_msc {
		width: 100%;
		margin-top: 0;
		background-image: url(/shopping/img/special/cruising/yachtclub_hub/blue_bg_pc.jpg);
		background-position: left;
		background-size: cover;
		box-shadow:
			inset 0 10px 10px -10px rgba(0, 0, 0, 0.5),
			inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5);
	}
}

/* =========================================
2. 共通アニメーションスタイル
========================================= */

@keyframes fadeUpText {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeInSlow {
	0% {
		opacity: 0;
		filter: blur(10px);
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}
@keyframes shrinkToFit {
	to {
		transform: scale(1);
	}
}
@keyframes slideDownMenu {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes shine {
	0% {
		left: -100%;
		top: 0;
	}
	20% {
		left: 100%;
		top: 0;
	}
	100% {
		left: 100%;
		top: 0;
	}
}

.fade-item {
	opacity: 0;
	filter: blur(10px);
	transform: translateY(30px) scale(0.95);
	transition:
		opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-item.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0) scale(1);
}
.fade-down {
	opacity: 0;
	filter: blur(10px);
	transform: translateY(-30px) scale(0.95);
	transition:
		opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-down.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0) scale(1);
}
.fade-slidein {
	opacity: 0;
	filter: blur(10px);
	transform: translateX(-30px) scale(0.95);
	transition:
		opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-slidein.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translateX(0) scale(1);
}
/* テキスト用アニメーション初期状態 */
.fade-text-item {
	opacity: 0;
	filter: blur(10px);
	transform: translateY(15px);
	transition:
		opacity 1.5s ease-out,
		filter 1.5s ease-out,
		transform 1.5s ease-out;
	pointer-events: none;
}
.fade-text-item.is-visible {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

/* CV Button & Pricing Section */
.cv-action-row {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 50px 0 0 0;
	background-color: transparent;
	position: relative;
	z-index: 10;
}
.cv-btn {
	background-color: #9c2121;
	color: #fff;
	border: none;
	padding: 15px 40px;
	font-size: 1.2rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 8px;
}
.cv-btn:hover {
	background-color: #ad2424;
	transform: translateY(-3px);
	box-shadow: 0 5px 15px #6a16167a;
}
/* =========================================
　3点訴求エリア
========================================= */
.svgim-bg-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	display: none; /* スマホ時は非表示にする */
	align-items: center;
	overflow: hidden;
	pointer-events: none; /* マウスイベントを貫通させる */
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.svgim-bg-layer {
		display: flex;
	}
	.svgim-main-content {
		padding: 3.5rem 2rem;
	}
	.svgim-subtitle {
		font-size: 0.875rem;
	}
	.svgim-title {
		font-size: 2.25rem;
	}
	.svgim-lead-text {
		font-size: 1rem;
	}

	#svgim-bg-text-container {
		white-space: nowrap;
		color: #fff;
		width: 100%;
		/* シニア層が誤ってテキストを選択してしまわないようにする配慮 */
		user-select: none;
		-webkit-user-select: none;
		font-size: 4.5rem;
	}

	/* 各文字（span）のベーススタイル */
	.svgim-bg-char {
		display: inline-block;
		vertical-align: middle;
		padding: 0 0.2em;
		transform-origin: center center;
		/* will-changeでブラウザにアニメーションを事前予告し、カクつきを防ぐ */
		will-change: transform, opacity;
	}
}
.parallax__bg {
	position: absolute;
	/* 動く余白を作るため、親要素より上下に大きく配置する */
	top: 0;
	left: 0;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	/* パフォーマンス最適化 */
	will-change: transform;
}
.parallax__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	width: 100%;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* 
3点訴求
---------------------*/
.features-wrap {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 2px;
	background-color: #1a1a1a;
	color: #fff;
}
.feature-card {
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
	height: 200px;
}
.feature-bg {
	position: absolute;
	top: -25px;
	left: 0;
	width: 100%;
	height: 140%;
	background-size: cover;
	background-position: center 50%;
	transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.feature-gradient {
	position: absolute;
	top: -25px;
	left: 0;
	width: 100%;
	height: 140%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
	pointer-events: none;
}
.feature-text-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 25px;
	pointer-events: none;
}
.feature-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	color: var(--text-color);
	font-size: 24px;
	line-height: 1.6;
	letter-spacing: 0.15em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.feature-text span {
	display: inline-block;
	margin-left: 12px;
}

/* 下部の詳細ボタン帯 */
.feature-btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 12px 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 100%);
	color: var(--text-color);
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.1em;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:
		padding-bottom 0.4s ease,
		background 0.4s ease,
		opacity 0.4s ease;
}
.feature-btn .icon-plus {
	margin-left: 8px;
	font-size: 12px;
	font-family: sans-serif;
	transition: transform 0.4s ease;
}
@media (hover: hover) {
	.feature-card:hover .feature-bg {
		transform: scale(1.05);
	}
	.feature-card:hover .feature-btn {
		background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0) 100%);
		padding-bottom: 18px;
	}
	.feature-card:hover .icon-plus {
		transform: rotate(90deg);
	}
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* =========================================
	　3点訴求
	========================================= */
	.features-bg-wrap {
		width: 100%;
		background-image: url(/shopping/img/special/cruising/yachtclub_hub/feature_bg.jpg);
		background-size: cover;
		height: 500px;
		position: relative;
		z-index: 1;
	}
	.container {
		width: 986px !important;
	}
	.features-wrap {
		flex-direction: row;
		height: 500px;
		gap: 0;
		position: relative;
		overflow: hidden;
		width: 100%;
	}
	.feature-card {
		height: 500px;
	}

	.feature-card-content,
	.parallax__content {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 20; /* Pure Tranquility 文字の前面に配置 */
	}
	/* ▼ ホバーで伸びる白い背景（帯） ▼ */
	.feature-card-content::before,
	.parallax__content::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
		width: 135px; /* 白い帯の幅 */
		height: 60%; /* ホバー前の初期の高さ */
		background-color: rgba(255, 255, 255, 0.7);
		z-index: -1; /* テキストの後ろに配置 */
		transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	}

	/* ホバーしたら白い背景が縦幅Max(100%)に伸びる */
	.feature-card:hover .feature-card-content::before,
	.feature-card:hover .parallax__content::before {
		height: 100%;
	}
	/* ▼ ホバーで表示される矢印（▼▼▼） ▼ */
	.feature-card-content::after,
	.parallax__content::after {
		content: "";
		position: absolute;
		bottom: 170px; /* 詳細ボタンの上に配置 */
		left: 50%;
		transform: translateX(-50%) translateY(-15px);
		width: 10px;
		height: 50px;
		/* 縦書きに影響されないようSVGで3連の三角形を描画 */
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 30'%3E%3Cpolygon points='0,0 12,0 6,5' fill='%23333'/%3E%3Cpolygon points='0,10 12,10 6,15' fill='%23333'/%3E%3Cpolygon points='0,20 12,20 6,25' fill='%23333'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		opacity: 0;
		z-index: 25;
		transition:
			opacity 0.4s ease,
			transform 0.4s ease;
		pointer-events: none; /* ホバー判定の邪魔をしない */
	}

	/* ホバー時に矢印をフェードイン＆少し下にスライド */
	.feature-card:hover .feature-card-content::after,
	.feature-card:hover .parallax__content::after {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	.feature-text-box {
		padding-bottom: 0; /* 元のスマホ用paddingをリセット */
		position: relative;
		z-index: 2;
		top: 20%;
		align-items: stretch;
	}

	/* ▼ テキストの縦書き設定 ▼ */
	.feature-text {
		font-size: 1.6rem;
		writing-mode: vertical-rl; /* 縦書き */
		line-height: 1.2;
		color: #333; /* 白背景に乗るため暗い色を指定 */
		margin: 0;
		text-shadow: none;
	}

	/* ▼ 詳細を見るボタンの縦書き設定 ▼ */
	/* 下部の詳細ボタン帯 */

	.feature-btn {
		font-size: 1.1rem;
		padding: 0;
		writing-mode: vertical-rl; /* ボタンも縦書き */
		color: #333;
		position: absolute;
		bottom: 18px; /* 白い帯の下部に配置 */
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		letter-spacing: 0.1em;
		background: none;
		opacity: 0;
	}

	.feature-btn .icon-plus {
		margin-left: 0;
		margin-top: 15px; /* 縦書き時のアイコンの余白 */
		font-size: 12px;
	}
	.feature-btn:hover {
		opacity: 1;
	}
	.feature-card:hover .feature-btn {
		opacity: 1;
		background: none;
		padding-bottom: 0;
	}

	.feature-card {
		height: 100%;
		flex: 1;
		border-right: 1px solid rgba(255, 255, 255, 0.15);
	}
	.feature-card:last-child {
		border-right: none;
	}
}

.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple-anim 0.6s linear;
	background-color: rgba(255, 255, 255, 0.2);
	pointer-events: none;
}

@keyframes ripple-anim {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* =========================================
船マップ
========================================= */
.msc-map-icon-svg {
	width: 1.6rem;
}

.ship-map-section {
	width: 100%;
	background: linear-gradient(180deg, #0f172a 60%, #1e1b4b 100%);
	position: relative;
	z-index: 10;
}
.msc-map-app-container {
	display: flex;
	flex-direction: column;
	min-height: 700px;
	position: relative;
	overflow: hidden; /* コンテナ外へのはみ出しを防ぐ */
	z-index: 1; /* 既存ページのコンテンツと被らないようベースを指定 */
	transform: translate3d(0, 0, 0);
	transform-style: preserve-3d;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.msc-map-app-container {
		height: 770px;
		min-height: auto;
	}
}

/* --- メインスクロールエリア --- */
.msc-map-scroll-area {
	flex-grow: 1;
	overflow-x: auto;
	overflow-y: hidden;
	cursor: grab;
	/* スクロールバー非表示 */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	transform-style: preserve-3d;
	position: relative;
	z-index: 30;
}
.msc-map-scroll-area::-webkit-scrollbar {
	display: none;
}
.msc-map-scroll-area:active {
	cursor: grabbing;
}
@media (max-width: 768px) {
	/* アイコンタップでポップアップが出る瞬間だけ、マップ全体をフッターより上に引き上げる */
	.msc-map-scroll-area:has(.msc-map-icon-wrapper:hover),
	.msc-map-scroll-area:has(.msc-map-active-wrapper) {
		z-index: 50;
	}
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.msc-map-scroll-area {
		overflow-x: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: default; /* PC時はドラッグカーソルを解除 */
	}
	.msc-map-scroll-area:active {
		cursor: default;
	}
}

/* マップ本体（スマホでも縮小させないため最低幅を確保） */
.msc-map-container {
	position: relative;
	height: 100%;
	width: 1000px; /* 固定幅 */
	max-width: none; /* スマホで縮まないように */
	margin: 0 auto;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.msc-map-container {
		width: 1200px;
		min-width: 1200px;
		max-width: none;
		height: 100%;
	}
}

/* --- 背景・画像レイヤー --- */
.msc-map-bg-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(14deg, #1e3c72, #050814, #0a0510);
	z-index: 0;
}
.msc-map-bg-ocean {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-image: url("/shopping/img/special/cruising/yachtclub_hub/map_ocean_bg.jpg");
	background-size: cover;
	background-position: bottom;
	z-index: 0;
	height: 300px;
	box-shadow:
		inset 0 10px 10px -10px rgba(0, 0, 0, 0.5),
		inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* 海の背景をコンテナ(1200px)から飛び出させて画面幅いっぱいに広げる */
	.msc-map-bg-ocean {
		width: 100vw; /* 画面の幅を100%にする指定 */
		left: 50%; /* 一旦コンテナの中央に配置 */
		transform: translateX(-50%); /* 自身の幅の半分だけ左にずらしてど真ん中に固定 */
		height: 530px;
	}
	.msc-map-bg-gradient {
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* 船の画像 */
.msc-map-ship-wrapper {
	position: absolute;
	top: 220px;
	left: 570px;
	transform: translate(-50%, -50%);
	width: 830px;
	z-index: 20;
	pointer-events: none;
}
.msc-map-ship-image {
	width: 100%;
	height: auto;
	object-fit: cover;
	opacity: 1;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.msc-map-ship-wrapper {
		width: 1200px;
		max-width: none;
		top: 195px;
		left: 0;
		min-width: 1200px;
		transform: none;
	}
}

/* --- テキストレイヤー --- */
.msc-map-text-yacht-club {
	position: absolute;
	left: 896px;
	top: 0;
	font-size: 38px;
	line-height: 1;
	letter-spacing: 2px;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	color: #1e2749;
	z-index: 11;
	pointer-events: none;
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif;
}
.msc-map-box-filter {
	position: absolute;
	left: 714px;
	top: 0;
	background-color: #1e27499c;
	width: 190px;
	height: 290px;
	z-index: 10;
	backdrop-filter: blur(2px);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* 文字サイズの拡大 */
	.msc-map-text-yacht-club {
		font-size: 53px;
		left: 1058px;
		top: 148px;
	}
	.msc-map-box-filter {
		left: 793px;
		width: 276px;
		height: 530px;
	}
	.msc-map-text-ship-name {
		font-size: 5rem;
		left: 10%;
	}
}

/* --- アイコンとポップアップ --- */
.msc-map-icon-wrapper {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 30;
	cursor: pointer;
}
/* ホバー時やポップアップ展開時は他のアイコンより上に表示する */
.msc-map-icon-wrapper:hover,
.msc-map-icon-wrapper.msc-map-active-wrapper {
	z-index: 100;
}
/* 下向きに開くポップアップ用のクラス */
.msc-map-popup.msc-map-popup-down {
	bottom: auto;
	top: 100%; /* アイコンの下端を基準にする */
	transform: translateX(calc(-50% + var(--msc-map-shift-x))) translateY(-15px);
	margin-bottom: 0;
	margin-top: 16px;
}
.msc-map-popup-down .msc-map-popup-tail {
	bottom: auto; /* 下部配置を解除 */
	top: -15px; /* ポップアップの上部に配置 */
	border-top: 8px solid transparent; /* 上辺の色を透明にする */
	border-bottom: 8px solid #ffffff; /* 白い三角形が上（アイコン）を向く */
}
/* マップを入れているコンテナに物理的な余白を作る */
#msc-map-mapContainer {
	padding-top: 300px; /* ポップアップが収まる高さを確保 */
	box-sizing: content-box;
}

/* アクティブ時の動き */
.msc-map-popup.msc-map-active.msc-map-popup-down {
	transform: translate(calc(-50% + var(--msc-map-shift-x)), 0);
	z-index: 99999;
}

/* 光るアニメーション定義（より目立つように強化） */
@keyframes msc-map-slowGlow {
	0% {
		box-shadow: 0 0 5px 0px var(--msc-map-glow-color);
		transform: scale(0.95);
	}
	100% {
		box-shadow:
			0 0 25px 8px var(--msc-map-glow-color),
			0 0 20px 5px var(--msc-map-glow-color) inset;
		transform: scale(1.1);
	}
}

.msc-map-icon-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid;
	background-color: rgba(10, 15, 36, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	transition: transform 0.3s;
	animation: msc-map-slowGlow 1.5s infinite alternate ease-in-out; /* 少し速くしてメリハリを出す */
}
.msc-map-icon-wrapper:hover .msc-map-icon-circle {
	transform: scale(1.15); /* ホバー時はさらに少し大きく */
}
.msc-map-icon-svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* アイコンサイズの拡大 */
	.msc-map-icon-circle {
		width: 60px;
		height: 60px;
	}
	.msc-map-icon-svg {
		width: 36px;
		height: 36px;
	}
}

/* カテゴリカラー（光を少し濃くする） */
.msc-map-cat-yacht {
	--msc-map-glow-color: #ceb77e9a;
	color: #fff9e6;
	border: 1px solid transparent;
	background:
		linear-gradient(rgba(10, 15, 36, 0.9), rgba(10, 15, 36, 0.9)) padding-box,
		/* ボタン内の色 */ linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%) border-box;
}
.msc-map-cat-facility {
	border-color: #ffffff;
	color: #ffffff;
	--msc-map-glow-color: rgba(255, 255, 255, 0.4);
	border-radius: 8px;
}
.msc-map-cat-cyan {
	border-color: #a5f3fc;
	color: #ffffff;
	--msc-map-glow-color: rgba(6, 182, 212, 0.4);
}

/* ポップアップ吹き出し */
.msc-map-popup {
	/* translateX/Y と Z軸150pxの移動を1行にまとめる */
	transform: translate(calc(-50% + var(--msc-map-shift-x)), 15px);
	/* その他のプロパティはそのまま */
	--msc-map-shift-x: 0px;
	position: absolute;
	bottom: 100%;
	left: 50%;
	display: block;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 0.4s ease,
		transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		visibility 0.4s;
	margin-bottom: 16px;
	width: 240px;
	background-color: #ffffff;
	color: #1f2937;
	border-radius: 8px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
	cursor: default;
}
.msc-map-popup.msc-map-active {
	transform: translate3d(calc(-50% + var(--msc-map-shift-x)), 0, 150px);
	visibility: visible;
	opacity: 1;
	z-index: 99999;
}
.msc-map-popup-img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.msc-map-popup-content {
	padding: 8px;
}
.msc-map-modal-contact-title {
	font-size: 0.875rem;
	font-weight: bold;
	margin: 0 0 4px 0;
	line-height: 1.3;
}
.msc-map-btn-detail {
	width: 100%;
	background-color: #1e2b4d;
	color: #ffffff;
	border: none;
	padding: 4px 0;
	border-radius: 4px;
	font-size: 0.75rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	transition: background-color 0.2s;
}
.msc-map-btn-detail:hover {
	background-color: #2a3c6b;
}
.msc-map-popup-tail {
	position: absolute;
	top: 100%;
	left: calc(50% - var(--msc-map-shift-x)); /* 尻尾の位置をずらした分だけ逆に戻す */
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: #ffffff;
	transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.msc-map-popup {
		width: 300px;
	}
	.msc-map-popup-img {
		height: 130px;
	}
}

/* --- スワイプインジケーター（スマホ用） --- */
.msc-map-swipe-indicator {
	position: absolute;
	bottom: 240px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	z-index: 45;
	pointer-events: none;
	transition: opacity 0.5s ease;
}
.msc-map-swipe-line {
	width: 100px; /* 線を長く */
	height: 3px; /* 線を太く */
	background: rgba(255, 255, 255, 0.4); /* 透明度を調整 */
	border-radius: 3px;
	position: relative;
	box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
.msc-map-swipe-dot {
	position: absolute;
	top: -2.5px;
	left: 0;
	width: 8px; /* ドットを大きく */
	height: 8px; /* ドットを大きく */
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.9); /* 光を強く */
	animation: msc-map-swipeAnim 2s infinite ease-in-out;
}
.msc-map-swipe-text {
	font-size: 0.75rem; /* 文字を少し大きく */
	font-weight: bold;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 影をつけて目立たせる */
}
@keyframes msc-map-swipeAnim {
	0% {
		left: 0;
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 1;
		left: calc(100% - 8px);
	}
	100% {
		left: calc(100% - 8px);
		opacity: 0;
	}
}
.msc-map-swipe-indicator.msc-map-hidden {
	opacity: 0;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* スワイプ案内はタブレット以上では非表示 */
	.msc-map-swipe-indicator {
		display: none;
	}
}

/* --- 下部固定エリア --- */
.msc-map-footer {
	position: absolute; /* 全体のコンテナに対して絶対配置し、背景に重ねる */
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 24px 16px 32px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 40;
	pointer-events: none; /* 透明なエリアがスワイプ（スクロール）の操作を邪魔しないようにする */
	box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5);
}
.msc-map-footer-text {
	text-align: center;
	color: #d1d5db;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 30px;
	letter-spacing: 0.05em;
	pointer-events: auto; /* テキスト部分は念のためクリック可能に */
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif;
}

.msc-map-footer-text p {
	margin: 0;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.msc-map-footer-text {
		font-size: 0.875rem;
		margin-bottom: 50px;
	}
	.msc-map-footer {
		padding-bottom: 45px;
	}
}
.msc-map-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
	font-size: 0.75rem;
	color: #9ca3af;
	pointer-events: auto; /* 凡例部分は念のためクリック可能に */
}
.msc-map-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
}
.msc-map-legend-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid;
	animation: msc-map-slowGlow 1.5s infinite alternate ease-in-out;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.msc-map-legend {
		gap: 32px;
		font-size: 0.875rem;
	}
	.msc-map-legend-dot {
		width: 15px;
		height: 15px;
	}
}
.msc-map-dot-yacht {
	--msc-map-glow-color: #ceb77e9a;
	border: 1px solid transparent;
	background:
		linear-gradient(#b39855, #b39855) padding-box,
		linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%) border-box;
}
.msc-map-dot-facility {
	border-color: #ffffff;
	--msc-map-glow-color: rgba(255, 255, 255, 0.4);
	border-radius: 2px;
}
.msc-map-dot-cyan {
	border-color: #a5f3fc;
	--msc-map-glow-color: rgba(6, 182, 212, 0.4);
}

/* --- 詳細モーダル --- */

.msc-map-modal-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(4px);
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.msc-map-modal-overlay.msc-map-active {
	opacity: 1;
	pointer-events: auto;
}
.msc-map-modal-content {
	background-color: #ffffff;
	border-radius: 12px;
	width: 100%;
	max-width: 672px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	transform: scale(0.95);
	transition: transform 0.3s;
}
.msc-map-modal-overlay.msc-map-active .msc-map-modal-content {
	transform: scale(1);
}
.msc-map-btn-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s;
}
.msc-map-btn-close:hover {
	background-color: rgba(0, 0, 0, 0.8);
}
.msc-map-modal-header {
	position: relative;
	height: 256px;
	width: 100%;
}
.msc-map-modal-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.msc-map-modal-title-wrapper {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
	display: flex;
	align-items: flex-end;
	padding: 15px;
}
.msc-map-modal-title-wrapper h2 {
	margin: 0;
	font-size: 1.5rem;
	color: #ffffff;
}
.msc-map-modal-body {
	padding: 15px;
	color: #1f2937;
}
.msc-map-modal-desc {
	margin: 0 0 32px 0;
	font-size: 1rem;
	line-height: 1.6;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.msc-map-modal-header {
		height: 320px;
	}
	.msc-map-modal-title-wrapper h2 {
		font-size: 1.875rem;
	}
	.msc-map-modal-body {
		padding: 32px;
	}
	.msc-map-modal-desc {
		font-size: 1.125rem;
	}
}

/* =========================================
クラブ専用サービス service Section
========================================= */
.service_box_pc_layout {
	display: none;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.service_box_pc_layout {
		display: block;
	}
}
.service_box_sp_layout {
	display: block;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.service_box_sp_layout {
		display: none;
	}
}
.service-section {
	padding: 50px 0 0 0 !important;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.service-section {
		padding: 20px 0 0 0;
		background-image: url(/shopping/img/special/cruising/yachtclub_hub/service_bg_pc.jpg);
		background-size: cover;
		background-position: center;
		box-shadow:
			inset 0 10px 10px -10px rgba(0, 0, 0, 0.5),
			inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5);
	}
}
.service-section .content-title.service_box_sp_layout {
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/blue_bg_sp.jpg);
	color: #fff;
	padding-top: 40px;
}
.service-section .content-title.service_box_sp_layout .content-title_sub {
	color: #fff;
}
.service_box_bu {
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/blue_bg_sp.jpg);
	background-position: right 1%;
	color: #fff;
}

.service_text_box {
	padding: 30px 15px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.service_text_box {
		flex: 1;
		padding: 0;
	}
}
.service_text_box_title {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.service_text_box_title h3 {
	font-size: 20px;
}
.service_text_box_title img {
	width: 30px;
	padding-right: 10px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.service_box {
		display: flex;
	}
	.service_img {
		flex: 1;
	}
	.service_text_box_inner {
		padding: 35px 20px 0 20px;
	}
}
/* ▲専用サービス　メイン▲ */
/* ▼　専用サービス サブ　▼
---------------------------- */
.service-sub-section {
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/service_2_bg_sp.jpg);
	padding-bottom: 180px !important;
	padding-top: 20px !important;
	background-position: left 10%;
	background-size: cover;
}
.service-sub-card {
	background-color: #00000083 !important;
	color: #fff;
}
.wristband_box {
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/wristband_bg.jpg);
	width: 100%;
	height: 300px;
	display: flex;
	overflow: hidden;
	background-size: cover;
}
.wristband_box img {
	width: 70%;
	height: 100%;
	object-fit: cover;
	padding-left: 5px;
	filter: drop-shadow(2px 4px 5px #000);
}
.wristband_box_text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 30px 20px 0 30px;
}
.wristband_box_text h3 {
	font-size: 20px;
}
.wristband_box_text p {
	border-top: 1px solid #4d1a0a;
	padding-top: 20px;
}
.btn-reserve {
	width: 100%;
	max-width: 300px;
	box-sizing: border-box;
	background-color: #930707;
	font-family: var(--font-serif) !important;
	color: #fff;
	border: 1px solid ;
	border-color: #C5A059;
	border-radius: 40px;
	padding: 7px 40px;
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: 0.1em;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all 0.4s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transform: translateY(5px);
	/* animation: fadeUpText 0.8s ease-out 1.8s forwards; */
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn-reserve:hover {
	transform: translateY(-2px);
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	
	.service-sub-section {
		background-image: url(/shopping/img/special/cruising/yachtclub_hub/service_2_bg_sp.jpg);
		background-size: cover;
	}
	/* 2. 右下のグレーの三角形を border を使って作成 */
	.service-sub-card[onclick]::before {
		content: "";
		position: absolute;
		bottom: 0;
		right: 0;
		width: 0;
		height: 0;
		/* 三角形のサイズと色（45pxの部分を変更すると大きさが変わります） */
		border-bottom: 45px solid #a8a8a8; /* 三角形の高さと色 */
		border-left: 45px solid transparent; /* 斜めのカット幅 */
		z-index: 10;
		pointer-events: none; /* ホバーやクリックの邪魔をしないように */
	}
	/* 3. プラス（＋）マークの作成 */
	.service-sub-card[onclick]::after {
		content: "+";
		position: absolute;
		bottom: 4px; /* 下からの位置 */
		right: 8px; /* 右からの位置 */
		color: #222; /* プラスマークの色（少し濃いめのグレー/黒） */
		font-size: 24px;
		font-weight: 300; /* 細字にしてモダンな印象に */
		line-height: 1;
		font-family: Arial, sans-serif;
		z-index: 11;
		pointer-events: none;
	}
	.wristband_box {
		height: 220px;
		margin-top: 30px;
	}
	.wristband_box img {
		width: 18%;
		padding-left: 20px;
	}
	.yc_img li {
		max-width: 200px;
	}
	.btn-reserve {
		padding: 15px 25px;
		font-size: 1rem;
		letter-spacing: 0.2em;
		border-radius: 50px;
		font-family: var(--font-serif);
	}
}

/* =========================================================
モーダルが開かない（onclick属性を持たない）カードの制御
========================================================= */

/* 1. onclickを持たないカードはカーソルを通常（矢印）にする */
.service-sub-card:not([onclick]) {
	cursor: default;
}

/* 2. PC用: ホバー時の黒い半透明オーバーレイと「詳細を見る」ボタンを非表示 */
.service-sub-card:not([onclick]) .exclusive-area-hover-overlay {
	display: none !important;
}

/* 3. SP用: 「詳細を見る」バッジを非表示 */
.service-sub-card:not([onclick]) .exclusive-area-sp-badge {
	display: none !important;
}

/* 4. （もしあれば）ホバー時の画像ズームアニメーションなどを無効化 */
.service-sub-card:not([onclick]):hover .exclusive-area_img-wrapper img {
	transform: none !important; /* 画像の拡大を防ぐ */
}

/* 5. （もしあれば）カード全体の浮き上がりアニメーションを無効化 */
.service-sub-card:not([onclick]):hover {
	transform: none !important;
	box-shadow: none !important; /* 影の変化があれば防ぐ（元の影は維持するよう注意） */
}
/* =========================================================
モーダルが開くカード右下の「＋」マーク（三角形）デザイン
========================================================= */

/* 1. 基準となるカードに relative を設定（すでにある場合は不要ですが念のため） */
.service-sub-card[onclick] {
	position: relative;
	overflow: hidden; /* 角丸からはみ出さないようにする */
}

/* ▼ スライダー帯 ▼ */
.aroundMv__yc {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	padding: 0;
	overflow: hidden;
}
.yc_img {
	margin: 0;
	padding: 0;
	list-style: none;
}
.yc_img li {
	padding: 0;
	outline: none;
}
.yc_img img {
	width: auto;
	object-fit: contain;
}

/* =========================================
ドリンクパッケージ
========================================= */
.drink_pdf_img_sp {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 68vw;
}
.drink_pdf_img {
	height: 100%;
	width: auto;
	object-fit: contain;
}
.drink_pdf_btn_sp {
	position: absolute;
	bottom: 3vw;
	width: 80%;
	left: 50%;
	transform: translateX(-50%);
}

/* =========================================
クラブ専用エリア Exclusive Area Section
========================================= */

.exclusive-area-section {
	overflow: hidden;
	padding: 20px 0;
}

.exclusive-area-responsive-slider {
	position: relative;
}
/* スライダー全体 */
.exclusive-area-slider-wrapper {
	display: flex;
	gap: 16px; /* カード同士の間に余白を追加 */
	width: 100%; /* 親コンテナの幅にぴったり合わせる */
	transition: transform 0.4s ease-in-out;
}

/* スライダーの各アイテム */
.exclusive-area-slider-item {
	flex: 0 0 100%; /* コンテンツに依存せず常に100%幅を維持 */
	width: 100%;
	max-width: 100%; /* 横広がりを強制的に防ぐ */
}
.exclusive-area-box {
	background-color: #3b1c2b;
	color: #fff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	position: relative;
}
.exclusive-area_img-wrapper {
	position: relative;
	height: 220px;
	overflow: hidden;
}
.exclusive-area_img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}
.exclusive-area__text-body {
	padding: 24px;
	padding-bottom: 60px; /* SPナビゲーションと被らないように下部に余白 */
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
.exclusive-area__item-title {
	margin: 0 0 16px 0;
	padding-bottom: 16px;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.exclusive-area__item-desc {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}
.exclusive-area-annotation {
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 12px;
}
/* SP用「詳細を見る」バッジ (ベース表示) */
.exclusive-area-sp-badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 4px 14px 6px 20px;
	border-radius: 20px;
	font-size: 14px;
	display: block;
	pointer-events: none;
}
/* PC用ホバーオーバーレイ (ベース非表示) */
.exclusive-area-hover-overlay {
	display: none;
}

.exclusive-area-hover-btn {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	padding: 8px 24px;
	border-radius: 30px;
	font-size: 14px;
}
/* SP用ナビゲーション (右下に配置) */
.exclusive-area-sp-nav {
	position: absolute;
	bottom: 24px; /* インジケーターの高さ分を上げてカード下端にピッタリ合わせる */
	right: 0; /* コンテンツのpaddingに合わせる */
	display: flex;
	z-index: 10;
	border-bottom-right-radius: 8px; /* カードの右下角丸に合わせる */
	overflow: hidden;
}
.exclusive-area-slider-btn {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #ffffff;
	border: none;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	padding: 16px 22px;
	font-size: 16px;
	font-weight: 300;
	cursor: pointer;
	outline: none;
	transition: background 0.3s;
}
.exclusive-area-slider-btn:first-child {
	border-left: none;
}
.exclusive-area-slider-btn:active {
	background: rgba(0, 0, 0, 0.7);
}
/* SP用インジケーター */
.exclusive-area-indicators {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}
.indicator-dot {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #ccc;
	transition: all 0.3s ease;
}
.indicator-dot.active {
	width: 24px;
	background: #5a2a3e;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* =========================================
	Exclusive Area Section 専用エリア
	========================================= */
	.exclusive-area-section {
		padding: 50px 0;
	}
	.exclusive-area-content {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0; /* サイドの余白を16pxから24pxに広げていい感じに */
		position: relative;
		overflow: hidden; /* SPスライダーのはみ出しを隠す */
	}
	.exclusive-area-slider-wrapper {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
		transform: none !important; /* JSによるスライド移動を無効化 */
	}
	.exclusive-area-slider-item {
		min-width: 0;
		width: 100%;
	}
	.exclusive-area__text-body {
		padding-bottom: 24px;
	}
	.exclusive-area-box {
		transition:
			transform 0.3s ease,
			box-shadow 0.3s ease;
	}
	.exclusive-area-box:hover {
		box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
	}
	.exclusive-area-box:hover .exclusive-area_img-wrapper img {
		transform: scale(1.05);
	}
	/* 画面幅が481px等、狭めのPC幅になった際にテキストがはみ出さないように微調整 */
	.exclusive-area__item-title {
		font-size: clamp(14px, 2.5vw, 20px);
	}
	.exclusive-area__item-desc {
		font-size: clamp(12px, 2vw, 14px);
	}
	/* PC用ホバーオーバーレイを表示・設定 */
	.exclusive-area-hover-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		transition: opacity 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.exclusive-area-box:hover .exclusive-area-hover-overlay {
		opacity: 1;
	}
	/* PCではSP用UIを非表示 */
	.exclusive-area-sp-badge,
	.exclusive-area-sp-nav,
	.exclusive-area-indicators {
		display: none !important;
	}
}

/* =========================================
Premium Dining
========================================= */
.dining-section {
	/* background-position: right; */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/dining_bg.jpg);
}
.dining-container {
	padding: 40px 20px;
}
.dining-img-box {
	display: grid;
	grid-template:
		"a a" auto
		"b c" auto
		/ 1fr 1fr;
	gap: 4px;
}
.dining-img.is-first {
	grid-area: a;
}
.dining-img.is-second {
	grid-area: b;
}
.dining-img.is-third {
	grid-area: c;
}
.dining-text-box {
	margin-top: 20px;
	display: grid;
	grid-row-gap: 6px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.dining-section {
		background-position: center;
	}
	.dining-container {
		padding: 50px 0;
	}
	.dining-img-box {
		display: grid;
		grid-template:
			"a b c" auto
			/ calc((667 / 1655) * 100%) calc((480 / 1655) * 100%) calc((480 / 1655) * 100%);
	}
	.dining-text-box {
		margin-top: 40px;
		grid-row-gap: 10px;
	}
}

/* =========================================
モーダル用スタイル
========================================= */
.ea-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	padding: 0px;
}
.ea-modal-overlay.active {
	opacity: 1;
	visibility: visible;
}
.ea-modal-container {
	background: #fff;
	width: 95vw;
	height: fit-content;
	max-height: 85vh; /* dvhに対応していないブラウザ向け */
	max-height: 95dvh;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transform: scale(0.95);
	transition: transform 0.3s ease;
	/* スクロール自体は有効にしておく */
	overflow-y: auto;
	/* Firefox 対応 */
	scrollbar-width: none;
	/* IE, 古いEdge 対応 */
	-ms-overflow-style: none;
	/* Chrome, Safari, 新しいEdge 対応 */
}
.ea-modal-container::-webkit-scrollbar {
	display: none;
}
.ea-modal-overlay.active .ea-modal-container {
	transform: scale(1);
}
.ea-modal-close-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}
.ea-modal-close-btn:hover {
	background: rgba(0, 0, 0, 0.8);
}
.ea-modal-body {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

/* モーダル矢印 */
.ea-modal-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.6);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 2;
	transition: all 0.3s ease;
	padding: 0;
}
.ea-modal-arrow svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ea-modal-arrow:hover {
	background: rgba(90, 42, 62, 0.8);
	border-color: #fff;
}
.ea-modal-arrow-prev {
	left: 10px;
}
.ea-modal-arrow-next {
	right: 10px;
}

.ea-modal-main-img-wrap {
	height: 250px;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.ea-modal-info {
	width: 100%;
	padding: 20px 15px 20px 15px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.ea-modal-info :last-child {
	margin: auto 0 0 0;
}

.ea-modal-category {
	font-size: 14px;
	color: #5a2a3e;
	letter-spacing: 1px;
	padding-bottom: 10px;
}
.ea-modal-features-annotation {
	font-size: 18px;
}

.ea-modal-gallery {
	width: 50%;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}
.ea-modal-main-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.5s ease;
}

.ea-modal-thumbnails {
	display: flex;
	gap: 8px;
	padding: 16px;
	overflow-x: auto;
	background: #fafafa;
}

/* 1. スクロールバー全体の領域（横スクロールの場合はheightを指定） */
.ea-modal-thumbnails::-webkit-scrollbar {
	height: 6px; /* バーの太さ */
}
/* 2. スクロールバーの背景（軌道部分） */
.ea-modal-thumbnails::-webkit-scrollbar-track {
	background: #f0f0f0; /* 薄いグレーなどの背景色 */
	border-radius: 6px; /* 丸みを持たせる */
}

/* 3. スクロールバーの動く部分（つまみ・サム） */
.ea-modal-thumbnails::-webkit-scrollbar-thumb {
	background: #a0a0a0; /* つまみの色 */
	border-radius: 6px; /* 丸みを持たせる */
}

/* 4. （オプション）ホバー時のつまみの色 */
.ea-modal-thumbnails::-webkit-scrollbar-thumb:hover {
	background: #707070;
}
.ea-modal-thumb {
	width: 100px;
	height: 66px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	opacity: 0.6;
	transition: all 0.2s;
}
.ea-modal-thumb.active {
	border-color: #5a2a3e;
	opacity: 1;
}
.ea-modal-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ea-modal-title {
	margin: 0 0 20px 0;
	font-size: 24px;
	color: #222;
}
.ea-modal-desc {
	font-size: 16px;
	line-height: 1.7;
	color: #555;
	margin-bottom: 30px;
}
.ea-modal-section-title {
	font-size: 13px;
	font-weight: bold;
	color: #888;
	text-transform: uppercase;
	border-bottom: 1px solid #eee;
	padding-bottom: 8px;
	margin-bottom: 16px;
}
.ea-modal-details-list {
	list-style: none;
	padding: 0;
	margin: 0 0 10px 0;
}
.ea-modal-details-list li {
	margin-bottom: 12px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: #444;
}
.ea-modal-details-list li strong {
	display: block;
	color: #222;
	white-space: nowrap;
	flex-shrink: 0;
}
.ea-modal-features-wrap {
	background: #f9f9f9;
	padding: 16px;
	border-radius: 8px;
}
.ea-modal-features-wrap h4 {
	margin: 0 0 12px 0;
	font-size: 14px;
}
.ea-modal-features-grid {
	display: grid;
	gap: 5px;
	font-size: 14px;
}
.ea-modal-features-annotation {
	color: #444;
	margin: 20px 0 0 0;
	font-size: 13px;
}
.ea-modal-feature-item {
	color: #444;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ea-modal-feature-item::before {
	content: "✓";
	color: #16a34a;
	font-weight: bold;
}
.ea-modal-gallery {
	width: 100%;
	background: #f5f5f5;
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* モーダル */
	.ea-modal-container {
		/*height: 80vh;*/
		width: 100%;
		max-width: 986px;
	}
	.ea-modal-info {
		width: 50%;
		overflow-y: auto;
		padding: 25px 20px 20px 20px;
		display: flex;
		flex-direction: column;
	}
	.ea-modal-info :last-child {
		margin: auto 0 0 0;
	}

	.ea-modal-category {
		font-size: 1.1rem;
		color: #5a2a3e;
		letter-spacing: 1px;
		padding-bottom: 10px;
	}

	.ea-modal-features-annotation {
		font-size: 18px;
	}
	.ea-modal-body {
		flex-direction: row;
		overflow-y: hidden;
	}
	.ea-modal-gallery {
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		padding: 10px;
		width: 56%;
	}

	.ea-modal-main-img-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: opacity 0.5s ease;
	}

	.ea-modal-thumbnails {
		height: auto;
		display: flex;
		gap: 8px;
		overflow-x: auto;
		background: #fafafa;
		padding: 16px 0;
	}

	.ea-modal-thumb {
		width: 156px;
		height: 96px;
		flex-shrink: 0;
		border-radius: 4px;
		overflow: hidden;
		cursor: pointer;
		border: 2px solid transparent;
		opacity: 0.6;
		transition: all 0.2s;
	}
	.ea-modal-thumb.active {
		border-color: #5a2a3e;
		opacity: 1;
	}
	.ea-modal-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ea-modal-title {
		margin: 0 0 20px 0;
		font-size: 1.8rem;
		color: #222;
	}
	.ea-modal-desc {
		font-size: 1rem;
		line-height: 1.7;
		color: #555;
		margin-bottom: 0px;
	}

	.ea-modal-section-title {
		font-size: 13px;
		font-weight: bold;
		color: #888;
		text-transform: uppercase;
		border-bottom: 1px solid #eee;
		padding-bottom: 8px;
		margin-bottom: 16px;
	}

	.ea-modal-details-list {
		list-style: none;
		padding: 0;
		margin: 0 0 10px 0;
	}
	.ea-modal-details-list li {
		margin-bottom: 12px;
		display: flex;
		align-items: flex-start;
		gap: 8px;
		font-size: 14px;
		color: #444;
	}
	.ea-modal-details-list li strong {
		display: block;
		color: #222;
		white-space: nowrap;
		flex-shrink: 0;
	}

	.ea-modal-features-wrap {
		background: #f9f9f9;
		padding: 16px;
		border-radius: 8px;
	}
	.ea-modal-features-wrap h4 {
		margin: 0 0 12px 0;
		font-size: 14px;
	}
	.ea-modal-features-grid {
		display: grid;
		gap: 5px;
		font-size: 0.9rem;
	}
	.ea-modal-features-annotation {
		color: #444;
		margin: 10px 0 0 0;
		font-size: 0.8rem;
	}
	.ea-modal-feature-item {
		color: #444;
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.ea-modal-feature-item::before {
		content: "✓";
		color: #16a34a;
		font-weight: bold;
	}

	.ea-modal-main-img-wrap {
		height: 400px;
		width: 100%;
		position: relative;
		overflow: hidden;
	}
}

/* =========================================
PDFボタンエリア
========================================= */
.Package_pdf {
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/dining_pdf_bg_sp.jpg);
	background-repeat: no-repeat;
	height: 355px;
	width: 100%;
	color: #fff;
	background-size: cover;
	position: relative;
	padding-top: 6vw;
	background-position-y: bottom 34%;
}
.Package_pdf_drink {
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/drink_pdf_sp.jpg);
	box-shadow: var(--neumorphic-shadow-bk-dark);
	margin-top: 20px;
}
.Package_pdf h2 {
	font-size: 2.4rem;
	line-height: 1.3;
	padding-left: 6vw;
}
.pdf-text-bg {
	background-color: #00000083;
	font-size: 1rem;
	line-height: 2;
	width: 60vw;
	padding-left: 6vw;
	margin: 3vw 0;
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif !important;
	font-weight: 400;
}
.Package_pdf p {
	padding: 5vw 0 5vw 6vw;
	font-size: 0.9rem;
	background-color: #00000083;
}
.Package_pdf span {
	padding-left: 20px;
	font-size: 0.8rem;
}

.pdf_btn {
	position: absolute;
	display: block;
	width: 90vw;
	border-radius: 50px;
	padding: 10px;
	font-size: 1rem;
	background-color: #3881ac;
	text-align: center;
	bottom: 6vw;
	left: 50%;
	transform: translate(-50%, 30px);
	margin: 0;
	cursor: pointer;
	transition: all 0.4s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	opacity: 0;
	animation: fadeUpText_pdf 0.8s ease-out 1.8s forwards;
}
.pdf_btn a {
	color: #fff;
}
.fa-file-pdf {
	font-weight: 300;
	font-size: 1.2rem;
}
.pdf_btn:hover,
.pdf_btn:focus {
	background-color: #155f8a;
	color: #fff;
	transform: translate(-50%, -2px);
}

.port_pdf_btn {
	position: absolute;
	display: block;
	width: 90vw;
	border-radius: 50px;
	padding: 10px;
	font-size: 1rem;
	background-color: #3881ac;
	text-align: center;
	bottom: 6vw;
	left: 50%;
	transform: translate(-50%, 30px);
	margin: 0;
	cursor: pointer;
	transition: all 0.4s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	opacity: 0;
	animation: fadeUpText_pdf 0.8s ease-out 1.8s forwards;
}
.port_pdf_btn a {
	color: #fff;
}
.port_pdf_btn,
a,
button {
	-webkit-tap-highlight-color: transparent; /* タップ時のデフォルトのハイライトを透明にする */
	outline: none; /* フォーカス時の枠線も念のため消す */
}

@keyframes fadeUpText_pdf {
	0% {
		opacity: 0;
		transform: translate(-50%, 30px);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* =========================================
	PDFボタンエリア
	========================================= */
	.Package_pdf {
		background-image: url(/shopping/img/special/cruising/yachtclub_hub/dining_pdf_bg.jpg);
		height: 240px;
		width: 100%;
		padding: 20px 0 0 0;
		margin: 40px auto 0 auto;
	}
	.Package_pdf_drink {
		background-image: url(/shopping/img/special/cruising/yachtclub_hub/drink_pdf_pc.jpg);
		margin: 40px auto 0 auto;
	}
	.Package_pdf h2 {
		font-size: 2.4rem;
		padding-left: 4%;
	}
	.pdf-text-bg {
		font-size: 1rem;
		width: 40%;
		padding-left: 4%;
		margin: 12px 0;
	}

	.Package_pdf p {
		padding: 2vw 0 1vw 4%;
		background: none;
	}
	.pdf_btn {
		width: 33%;
		padding: 10px;
		font-size: 1rem;
		bottom: 10%;
		margin: 0;
		left: 80%;
	}
	.fa-file-pdf {
		font-size: 1.2rem;
	}
	.port_pdf_btn {
		width: 45%;
		padding: 10px;
		font-size: 1rem;
		bottom: 6%;
		left: 26%;
		margin: 0;
	}
}

/* =========================================
客室プラン Room Section
========================================= */
.room-section {
	position: relative;
	padding: 20px 0;
	overflow: hidden;
}
.room-content-wrapper {
	max-width: 986px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.room-header {
	text-align: center;
	margin-bottom: 40px;
}
.room-slider-wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
.room-track-container {
	overflow: hidden;
	position: relative;
	width: 100%;
}
.room-track {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.room-slide {
	flex: 0 0 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.room-slide.active {
	opacity: 1;
}
.room-col-image {
	width: 100%;
	position: relative;
}
.room-img-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	cursor: pointer;
}
.room-img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	display: block;
}
.room-img-wrapper .room-img {
	transition: transform 0.7s ease;
}
.room-img-wrapper:hover .room-img {
	transform: scale(1.05);
}
.room-detail-btn {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: #0d0d0d;
	color: #fff;
	border: none;
	padding: 12px 24px;
	font-size: 0.9rem;
	letter-spacing: 2px;
	cursor: pointer;
	transition: background-color 0.3s;
}
.room-detail-btn:hover {
	background-color: #333;
}
.room-col-text {
	width: 100%;
	padding: 25px 5px 50px 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.room-name {
	font-family: "Cinzel", serif;
	font-size: 20px;
	color: #333;
	margin-bottom: 15px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
}
.room-specs {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
}
.spec-icon {
	font-size: 0.85rem;
	color: #666;
	background: #eee;
	padding: 5px 7px;
	border-radius: 4px;
}
.room-desc {
	font-size: 0.95rem;
	line-height: 1.8;
	color: #555;
}

/* Room Slider Arrows - Modern High-End */
.room-slider-btn {
	position: absolute;
	bottom: -20px;
	transform: none;
	background-color: #0d0d0d;
	color: #fff;
	width: 50px;
	height: 50px;
	border: none;
	font-size: 1.2rem;
	font-weight: 300;
	cursor: pointer;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	transition:
		background-color 0.3s,
		text-shadow 0.3s;
}

.room-slider-btn:hover {
	background-color: #3b2f28;
}
.room-slider-btn.next-btn {
	right: 0;
}
.room-slider-btn.prev-btn {
	right: 50px;
	left: auto;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* Thumbnails */
.room-thumbnails {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-top: 30px;
	background-color: #8d752e26;
	width: 100%;
}
.room-thumbnails .thumb {
	width: 80px;
	height: 50px;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.3s;
	overflow: hidden;
	border: 2px solid transparent;
}
.room-thumbnails .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.room-thumbnails .thumb.active,
.room-thumbnails .thumb:hover {
	opacity: 1;
	border-color: #333;
}
.room-comparison__btn-wrap {
	background: #0d1225;
	margin-top: 8px;
	border-radius: 100vh;
	overflow: hidden;
	width: 100%;
}
.room-comparison__btn {
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.8rem;
	padding: 8px 0;
}
.modal_room-detail {
	padding-top: 1rem;
}

.roomComparisonTable__amenitiesListImg {
	margin: 0 auto;
	width: 80%;
}
.roomComparisonTableWrap--note.amenitiesListImg {
	margin: 0 auto;
	width: 80%;
}
.roomComparisonTableWrap--note {
	margin: 0 auto;
	font-size: 0.7em;
	padding: 1em;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* =========================================
	Room Section 客室プラン
	========================================= */
	.room-img-wrapper:hover .exclusive-area-hover-overlay {
		opacity: 1;
	}
	.room-section {
		padding: 50px 0;
	}
	.room-slide {
		flex-direction: row;
		gap: 50px;
		align-items: flex-start;
	}
	.room-col-image {
		width: 60%;
	}
	.room-col-text {
		width: 40%;
		padding: 0;
	}
	.room-img {
		height: 450px;
	}
	.room-slider-btn {
		bottom: 0;
		top: auto;
		width: 50px;
		height: 50px;
		transform: none;
	}
	.room-slider-btn.next-btn {
		right: 0px;
	}
	.room-slider-btn.prev-btn {
		right: 50px;
		left: auto;
	}
	.room-thumbnails .thumb {
		width: 120px;
		height: 75px;
	}
}

/* --------------------------
資料請求モーダル 
--------------------------*/
.modal-brochure-body {
	background: #fdfaf5;
	padding: 20px 15px;
	width: 100%;
	max-width: 850px;
	/*
	max-height: 90vh;
	overflow-y: auto;
	height: 100%;
	background-color: #F00;
	*/
	box-sizing: border-box;
}
.modal-brochure-body h2 {
	font-family: "Cinzel", serif;
	text-align: center;
	color: #3b2f28;
	margin-bottom: 12px;
	font-size: 1.1rem;
	letter-spacing: 2px;
}
.modal-brochure-body img {
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.modal-brochure-body {
		padding: 30px 80px;
	}
	.modal-brochure-body h2 {
		font-size: 1.5rem;
	}
}
/* ▲資料請求モーダル▲  */

/* --------------------------
あんしんパックモーダル 
--------------------------*/
.modal-anshinpack-body {
	background: #fdfaf5;
	padding: 20px 15px;
	width: 100%;
	max-width: 390px;
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	height: 100%;
}
.modal-anshinpack-body img {
	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.modal-anshinpack-body {
		padding: 30px;
	}
}
/* ▲あんしんパックモーダル▲  */

/* 入出港スケジュール */
.schedule-table {
	width: 100%;
	border-collapse: collapse;
	font-family: inherit;
	border: 2px solid #0d1b2a;
	background-color: #fff;
}
.schedule-table th,
.schedule-table td {
	border: 1px solid #0d1b2a;
	padding: 4px 2px;
	text-align: center;
	font-size: 0.75rem;
	color: #222;
	font-weight: 700;
}
.schedule-table .table-title {
	background-color: #0d1b2a;
	color: #fff;
	font-size: 0.9rem;
	padding: 6px;
	border-bottom: 1px solid #0d1b2a;
}
.schedule-table .cell-day {
	background-color: #eef1f6;
	width: 22%;
}
.schedule-table .empty-top {
	border-bottom: none;
	background-color: #eef1f6;
}
.schedule-table .empty-bottom {
	border-top: none;
	background-color: #eef1f6;
}
.schedule-table thead th:not(.table-title) {
	font-size: 0.8rem;
}
.schedule-table tbody td {
	font-weight: 600;
}
.schedule-note {
	font-size: 0.65rem;
	color: #000;
	line-height: 1.3;
	text-align: left;
	margin-top: 8px;
	margin-bottom: 40px;
}

.schedule-popup-image {
	flex: 1;
	border-radius: 8px;
	aspect-ratio: 652 / 508;
}
.schedule-popup-image img {
	width: 100%;
	object-fit: contain;
	display: block;
}
.schedule-list {
	display: flex;
	flex: 1;
	height: 100%;
}

/* =========================================
こだわり
========================================= */
.jc-point-title {
	text-align: center;
	padding: 20px;
}
.jc-point-title h3 {
	font-size: 1.6rem;
	padding-bottom: 20px;
}
.jc-tour-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
.jc-container {
	margin: 0 auto;
	padding: 0 10px;
}
/* ユーティリティ */
.jc-pc-only {
	display: none;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.jc-container {
		padding: 0;
	}

	.jc-pc-only {
		display: inline;
	}
}

/* 	セクション1: 循環バス
----------------------------------- */
.jc-bus-section {
	margin-bottom: 60px;
}
.jc-bus-title {
	font-size: 1.1rem;
	font-weight: 400;
	margin: 20px 0;
	background-color: #f7f5f1;
	padding: 15px;
}
.jc-bus-intro {
	display: flex;
	flex-direction: column; /* スマホは縦積み */
	gap: 20px;
	margin-bottom: 40px;
}
.jc-bus-visual {
	width: 100%;
	aspect-ratio: 16 / 9;
}
.jc-bus-visual img {
	object-fit: cover;
}
.jc-bus-text {
	flex: 1;
}
.jc-label-box {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}
.jc-label-box .jc-label {
    background-color: none;
    color: #4d1a0a;
    padding: 4px 0px;
    font-size: 1.5rem;
    width: 100%;
    border-bottom: 1px solid;
}
.jc-label-box .jc-label small {
	font-size: 0.7em;
	font-weight: 400;
	margin-left: 2px;
}
.jc-label-box .jc-line {
	flex-grow: 1;
	height: 1px;
	background-color: #441900;
}
.jc-bus-text p {
	margin: 0;
	font-size: 0.95rem;
}

/* ポイントカード群（セクション1） */
.jc-bus-points {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
	gap: 35px 15px; /* 上部ラベルがはみ出すため縦の余白を多めに */
}
.jc-point-card {
	background-color: #e9e4de;
	padding: 25px 10px 20px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.jc-point-badge {
	background-color: #441900;
	color: #fff;
	font-size: 0.8rem;
	padding: 3px 15px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}
.jc-point-card h3 {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 15px 0;
	flex-grow: 1;
	display: flex;
	align-items: center;
}
.jc-point-icon {
	font-size: 2.5rem;
	color: var(--jc-text-color);
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* アイコンの複合配置（PCとスマホの重なり） */
.jc-icon-devices {
	position: relative;
	width: 50px;
	height: 40px;
}
.jc-icon-devices .fa-laptop {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 2.2rem;
}
.jc-icon-devices .fa-mobile-screen {
	position: absolute;
	bottom: -5px;
	right: 0;
	font-size: 1.5rem;
	background-color: var(--jc-bg-card); /* 背面の線を隠す */
	padding: 0 2px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* セクション1 */
	.jc-bus-title {
		font-size: 1.3rem;
	}
	.jc-bus-intro {
		flex-direction: row;
		align-items: stretch;
		gap: 30px;
	}
	.jc-bus-visual {
		flex: 0 0 32%; /* 左側の黄色いボックスの幅 */
		aspect-ratio: auto; /* 高さは右側のコンテンツに合わせる */
	}
	.jc-bus-text {
		padding-top: 10px;
	}
	.jc-bus-points {
		grid-template-columns: repeat(4, 1fr); /* PCは4列 */
		gap: 20px;
	}
}

/* -----------------------------------
	セクション2: オプショナルツアー
----------------------------------- */
.jc-tour-section {
	margin-bottom: 40px;
}
.jc-tour-header {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--jc-border-color);
	padding: 10px;
	margin-bottom: 20px;
	background-color: #f7f5f1;
}
.jc-tour-title {
	font-size: 1.05rem;
	font-weight: 400;
	margin: 0;
}
.jc-badge-paid {
	font-size: 0.85rem;
	color: var(--jc-text-color);
	border: 1px solid var(--jc-border-color);
	background-color: #fff;
	padding: 6px 10px;
	white-space: nowrap;
	width: 65px;
	margin-top: 5px;
}
.jc-tour-intro {
	display: flex;
	flex-direction: column; /* スマホは縦積み */
	gap: 20px;
	margin-bottom: 40px;
}
.jc-tour-images-wrap {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.jc-tour-images {
	display: flex;
	gap: 10px;
}
.jc-img-box {
	flex: 1;
	position: relative;
}
.jc-img-box-1 {
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/sirawakago_kikouchi.jpg);
}
.jc-img-box-2 {
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/kagoshima_kikouchi.jpg);
}
.jc-img-label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(10, 20, 20, 0.5);
    color: #fff;
    font-size: 0.65rem;
    padding: 4px 8px;
    z-index: 2;
}
.jc-placeholder-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 0.7rem;
	text-align: center;
}
.jc-placeholder-img.jc-shirakawa {
	background-color: #5c87a6;
} /* 青系 */
.jc-placeholder-img.jc-kirishima {
	background-color: #6a8c62;
} /* 緑系 */
.jc-img-copy {
	position: absolute;
	bottom: 5px;
	right: 5px;
	color: #fff;
	font-size: 0.6rem;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	text-align: right;
}
.jc-tour-images-wrap .jc-note {
	font-size: 0.75rem;
	margin: 0;
}
.jc-tour-text p {
	margin: 0;
	font-size: 0.95rem;
}
/* ポイントカード群（セクション2） */
.jc-tour-points {
	display: grid;
	grid-template-columns: 1fr; /* スマホは1列 */
	gap: 30px;
}
.jc-point-card-lg {
	background-color: #ece7e1;
	padding: 30px 20px 20px;
	position: relative;
	text-align: center;
}
.jc-point-card-lg h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 15px 0;
	line-height: 1.5;
}
.jc-point-card-lg p {
	font-size: 0.9rem;
	margin: 0;
	text-align: left; /* 本文は左揃え */
}
.limited_optional_tour {
	padding-top: 30px;
}
.limited_optional_tour p {
	padding: 15px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* セクション2 */
	.jc-tour-header .jc-tour-title {
		font-size: 1.25rem;
	}
	.jc-tour-intro {
		flex-direction: row;
		gap: 30px;
	}
	.jc-tour-images-wrap {
		flex: 0 0 45%;
	}
	.jc-tour-points {
		grid-template-columns: repeat(3, 1fr); /* PCは3列 */
		gap: 20px;
	}

	.limited_optional_tour {
		padding-top: 60px;
	}
	.limited_optional_tour p {
		text-align: center;
		padding: 40px 0 0 0;
		line-height: 1.6;
	}
}

/* =========================================
満足度など
========================================= */
.closing-area {
	text-align: center;
}
.closing-area h2 {
	font-size: 20px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.closing-area {
		padding-top: 60px;
	}
}
.spec_logo_box {
	display: flex;
	gap: 20px;
	align-items: stretch;
	width: 100%;
	padding: 30px 0;
}

.spec_logo_box img {
	flex: 1;
	width: 0;
	object-fit: contain;
}
.document-request-section {
	position: relative;
	width: 100%;
	background-image: url("/shopping/img/special/cruising/yachtclub_hub/Request_book_bg_sp.jpg");
	background-size: cover;
	background-position: left;
	color: #fff;
	text-align: center;
	padding: 50px 20px;
	box-sizing: border-box;
	background-blend-mode: overlay;
	background-color: rgba(0, 0, 0, 0.3);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.spec_logo_box {
		width: 70%;
		margin: 0 auto;
	}
	.document-request-section {
		height: auto;
		padding: 30px 20px !important;
		background-image: url(/shopping/img/special/cruising/yachtclub_hub/Request_book_bg.jpg);
	}
}
/* 共通のドロップシャドウ（背景が写真でも文字を読みやすくするため） */
.text-shadow {
	text-shadow:
		2px 2px 4px var(--shadow-color),
		0 0 10px rgba(0, 0, 0, 0.8);
}
/* --- 見出しエリア --- */
.dr-header {
	margin-bottom: 30px;
}
.dr-header-sub {
	font-size: 1.2rem;
	margin-bottom: 5px;
	display: block;
	letter-spacing: 0.1em;
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif !important;
}
.dr-header-main {
	font-size: 2.2rem !important;
	margin: 0;
	font-weight: normal;
	display: inline-flex;
	align-items: center;
	gap: 15px;
	letter-spacing: 0.1em;
}

/* 「資料請求」の左右の装飾線 */
.dr-header-main::before,
.dr-header-main::after {
	content: "";
	display: block;
	width: 1px;
	height: 1.2em;
	background-color: #fff;
	box-shadow: 1px 1px 2px var(--shadow-color);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.dr-header {
		margin-bottom: 0;
	}
}
/* --- パンフレット画像エリア --- */
.dr-images {
	max-width: 80vw;
	margin: 0 auto 30px;
	height: 200px;
}
.dr-images img {
	max-width: 100%;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.dr-images {
		height: auto;
		margin: 0 auto 25px auto;
	}
	.dr-images img {
		width: 320px;
		position: absolute;
		right: 0;
		bottom: -45px;
	}
}

/* --- 説明テキスト --- */
.dr-description {
	font-size: 1rem;
	line-height: 1.8;
	margin-bottom: 30px;
	letter-spacing: 0.1em;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.dr-description {
		margin-bottom: 10px;
	}
}
/* --- 電話番号エリア --- */
.dr-phone-wrapper {
	margin: 0 0 20px;
}
.dr-phone-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	font-weight: normal;
	letter-spacing: 0.1em;
	color: inherit; /* リンクの色を文字色（白）に合わせる */
	text-decoration: none; /* リンクの下線を消す */
	gap: 10px; /* アイコンと番号の隙間 */
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.dr-phone-link {
		font-size: 2rem;
	}
}

/* --- WEBボタンエリア --- */
.dr-btn-container {
	display: flex;
	justify-content: center;
}
.dr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.2); /* 半透明の白背景 */
	border: 1px solid rgba(255, 255, 255, 0.8);
	color: #fff;
	text-decoration: none;
	padding: 15px 40px;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	transition: all 0.3s ease;
	backdrop-filter: blur(4px); /* 背景を少しぼかす（対応ブラウザのみ） */
	width: 100%;
	max-width: 300px;
	border-radius: 99px;
}
.dr-btn:hover {
	background-color: rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}
.dr-btn-arrow {
	margin-left: 15px;
	font-size: 0.8rem;
}
/* 電話ボタンのコンテナ */
.call-btn-container {
	text-align: center;
}

/* 電話番号ボタン */
.call-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #ffffff;
	color: #e11d48; /* モダンな赤色 */
	text-decoration: none;
	padding: 16px 32px;
	border-radius: 100px;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: 1px;
	box-shadow:
		0 8px 25px rgba(225, 29, 72, 0.15),
		inset 0 0 0 1px #ffe4e6;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	max-width: 340px;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.call-btn:hover {
	transform: translateY(-3px);
	box-shadow:
		0 12px 30px rgba(225, 29, 72, 0.2),
		inset 0 0 0 1px #fecdd3;
	background: #fffcfd;
}
.call-btn:active {
	transform: translateY(1px);
	box-shadow: 0 4px 15px rgba(225, 29, 72, 0.15);
}

/* 受話器アイコンとアニメーション */
.call-icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
	animation: ring 2.5s infinite ease-in-out;
	transform-origin: center;
}

@keyframes ring {
	0%,
	100% {
		transform: rotate(0deg);
	}
	10%,
	30%,
	50% {
		transform: rotate(-10deg);
	}
	20%,
	40% {
		transform: rotate(10deg);
	}
	60% {
		transform: rotate(0deg);
	}
}


/* =========================================
価格表タブボタン
========================================= */
.modal_price_table .reservation-tabs-container {
	padding: 50px 10px 0;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.modal_price_table .reservation-tabs-container {
		padding: 0;
	}	
}
.modal_price_table .tab-buttons {
	margin-bottom: 20px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.modal_price_table .tab-buttons {
		margin-bottom: 40px;
	}
}
/* 
探し方トグル（切り替え）ボタンエリア
-------------------------------------- */
.search-toggle-container {
	position: relative;
	display: flex;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 50px;
	padding: 6px;
	margin-bottom: 35px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* 背景の金色のスライダー */
.toggle-slider {
	position: absolute;
	top: 6px;
	left: 6px;
	height: calc(100% - 12px);
	width: calc(50% - 6px);
	background: linear-gradient(135deg, #c6a25c, #e0bd75);
	border-radius: 40px;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	z-index: 1;
	box-shadow: 0 4px 15px rgba(198, 162, 92, 0.3);
}

/* 出港日モードの時はスライダーを右へ移動 */
.search-toggle-container.mode-date .toggle-slider {
	transform: translateX(100%);
}

.search-toggle-btn {
	position: relative;
	z-index: 2;
	flex: 1;
	padding: 12px 5px;
	text-align: center;
	border: none;
	background: transparent;
	color: #a0aec0;
	font-size: 14px;
	font-family: inherit;
	border-radius: 40px;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 2px;
}

.search-toggle-btn:hover {
	color: #f8f9fa;
}

.search-toggle-btn.active {
	color: #111111;
	pointer-events: none;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}
/* アクセシビリティ用 */
.search-toggle-btn:focus-visible,
.course-tab:focus-visible,
.tab-btn:focus-visible {
    border: 3px solid #a67c52;
	z-index: 1;
}
.tab-btn.active:focus-visible {
	background: #a67c52;
}

/* 
表示モード切替コンテナ & タブ
-------------------------------------- */
.view-mode-container {
	display: none; 
	animation: fadeIn 0.4s ease forwards;
	width: 100%;
	max-width: 986px;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}
.view-mode-container.active-view {
	display: block; 
}


/* タブを囲む外枠エリア */
.course-tabs-wrapper {
	width: 100%;
	margin-bottom: 30px;
	box-sizing: border-box;
	overflow-x: scroll;
	max-width: 986px;
	touch-action: pan-x;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);

	-webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
	mask-image: linear-gradient(to right, black 70%, transparent 100%);
}
.course-tabs-wrapper::-webkit-scrollbar{
	display: none;
}
/* ::-webkit-scrollbar-thumb {
	background: #fff;
}
.course-tabs-wrapper::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
.course-tabs-wrapper::-webkit-scrollbar-track {
	background: #000033;
} */


.course-tabs {
	display: flex;
	flex-wrap: nowrap;
	-webkit-overflow-scrolling: touch;
	gap: 10px;
	padding-bottom: 15px;
	margin-right: 120px;
	padding-right: 100px;
	box-sizing: border-box;
	width: 100%;
}

.course-tabs::-webkit-scrollbar {
	display: none;
}
.course-tab {
	background: none;
	border: none;
	color: rgb(225, 225, 225, 0.6);
	font-size: 18px;
	padding: 10px 15px;
	cursor: pointer;
	font-family: inherit;
	position: relative;
	transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	white-space: nowrap;
	flex-shrink: 0;
}
.course-tab:hover {
	color: #f8f9fa;
}
.course-tab.active {
	color: #f8f9fa;
	font-weight: bold;
}
.course-tab::after {
	content: '';
	position: absolute;
	bottom: -16px;
	left: 50%;
	transform: translateX(-50%);
	width: 0; 
	height: 3px;
	background-color: #c6a25c;
	border-radius: 3px 3px 0 0;
	transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.course-tab.active::after {
	width: 100%; 
}

/* 
選択ボタンエリア
-------------------------------------- */
.course-selector {
	display: none; 
	animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.course-selector.active {
	display: block;
}
@keyframes slideUpFade {
	from { opacity: 0; transform: translateY(15px); }
	to { opacity: 1; transform: translateY(0); }
}
.tab-buttons {
	display: flex;
	flex-wrap: wrap; 
	gap: 15px;
	margin-bottom: 40px;
}
.tab-btn {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #f8f9fa;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.tab-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent);
	transform: skewX(-25deg);
	transition: left 0.7s ease;
}
.tab-btn:hover::before {
	left: 150%; 
}
.tab-btn:hover {
	background-color: rgba(255, 255, 255, 0.1);
	transform: translateY(-3px); 
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
	border-color: rgba(255, 255, 255, 0.4);
}
.tab-btn.active {
	background-color: #7c2d42;
	border-color: #7c2d42;
	color: #ffffff;
}
.dummy-text {
	color: #a0aec0;
	margin: 10px 0;
}

@media (min-width: 480.1px) and (min-height: 480.1px) {
	.tab-buttons {
		gap: 20px;
	}
	.tab-btn {
		font-size: 18px;
		padding: 15px 40px;
	}
}


/* =========================================
価格表の寄港地紹介
========================================= */
.port-tokyo {
	width: 47% !important;
	left: -51px !important;
}
.port-hakodate {
	top: -48% !important;
	left: -48px !important;
}
.port-sakata {
	top: -73% !important;
}
.port-cheju {
	top: -27% !important;
}
.port-kagoshima {
	top: 263% !important;
	right: -54px !important;
	width: 46% !important;
}
.port-kanazawa {
	top: 175% !important;
	left: -44px !important;
	width: 36% !important;
}
.port-naha {
	top: -9% !important;
}
.port-keelung {
	top: 156% !important;
}
.port-sasebo {
	top: 24% !important;
}

.port-content-wrapper {
	max-width: 986px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 20px;
}
.reservation-section {
	position: relative;
	width: 100%;
	color: #fff;
	padding: 60px 0 20px 0;
	box-sizing: border-box;
	background-color: #012b26; /* デフォルトのダークグリーン */
	background-size: cover;
	background-position: bottom;
	overflow: hidden;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.port-tokyo {
		width: 45% !important;
		left: -58% !important;
	}
	.port-hakodate {
		left: -63% !important;
	}
	.port-sakata {
		top: -73% !important;
	}
	.port-cheju {
		top: -19% !important;
		width: 32% !important;
		right: -37% !important;
	}
	.port-kagoshima {
		top: 305% !important;
		right: -51% !important;
		width: 42% !important;
	}
	.port-kanazawa {
		left: -44% !important;
	}
	.port-naha {
		top: -66% !important;
		left: -58% !important;
	}
	.port-keelung {
		top: 226% !important;
		left: -46% !important;
		width: 38% !important;
	}
	.port-sasebo {
		top: 51% !important;
		left: 111% !important;
		width: 38% !important;
	}
	.port-nichinan {
		top: -17% !important;
		left: 116% !important;
	}
	.reservation-section {
		padding: 80px 40px 30px;
		box-shadow:
			inset 0 10px 10px -10px rgba(0, 0, 0, 0.5),
			inset 0 -10px 10px -10px rgba(0, 0, 0, 0.5);
	}
	.port-content-wrapper {
		padding-bottom: 50px;
	}
}

.bg-floating-img {
	position: absolute;
	top: 65vw;
	left: -55px;
	width: 60vw;
	pointer-events: none; /* スマホでタップやスクロールの邪魔にならないようにする */
	opacity: 0.8;
}
/* スケジュールの文字や内容が画像の下に潜らないようにする */
#scheduleContainer {
	position: relative;
	z-index: 2; /* 装飾画像(1)より上にする */
}
/* --- ヘッダー（タイトル）エリア --- */
.res-header {
	text-align: left;
	margin-bottom: 30px;
	padding-left: 10px;
}
.res-sub-title {
	font-size: 0.9rem;
	margin: 0 0 5px;
	letter-spacing: 0.1em;
}
.res-main-title {
	font-size: 2.8rem;
	margin: 0 0 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
}
.res-badge {
	display: inline-block;
	background-color: #386b7c; /* 水色背景 */
	padding: 5px 15px;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.res-header {
		text-align: center;
		margin-bottom: 50px;
	}
}


/* --- スケジュール表示エリア（JSで中身を生成） --- */
.schedule-container {
	max-width: 400px;
	margin: 0 auto;
	width: 85%;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.schedule-container {
		max-width: 500px; /* 600pxから少し狭くして凝縮感を出す */
		width: 80%;
	}
}

/* 切り替え時のフェードインアニメーション */
.fade-in {
	animation: fadeIn 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* コースのタイトル */
.course-header {
	text-align: center;
	margin-bottom: 40px;
}
.course-title-sub {
	font-size: 1.4rem;
	margin-bottom: 15px;
	letter-spacing: 0.1em;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
.course-title-main {
	display: inline-block;
	font-size: 1.6rem;
	padding: 0 5px; /* マーカー用にパディング調整 */
	letter-spacing: 0.1em;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.course-title-sub {
		font-size: 1.8rem;
	}
	.course-title-main {
		font-size: 2rem;
		padding: 0 10px;
	}
}
/* --- タイムライン（各日の行） --- */
.timeline-row {
	position: relative;
	width: 100%;
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
}
/* 画像の設定（テキストの裏に配置し、両サイドに寄せる） */
.tl-img {
	position: absolute;
	top: -50%;
	transform: translateY(-50%);
	width: 150px; /* 固定幅 */
	height: auto;
	object-fit: cover;
	z-index: 0;
	opacity: 0.9;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
}
/* 画面外にはみ出すようにマイナス値を大きく設定 */
.tl-img.left {
	left: -90px;
}
.tl-img.right {
	right: -47px;
}
/* コンテンツ（テキストエリア） */
.tl-content {
	position: relative;
	z-index: 1; /* 画像より手前に表示 */
	width: 100%;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}
/* 寄港地の行 */
.type-port {
	display: flex;
	align-items: baseline;
	border-bottom: 1px solid #fff;
	padding-bottom: 5px;
}
.tl-day {
	font-family: var(--font-en);
	font-size: 1.2rem;
	width: 60px; /* 少し縮める */
	flex-shrink: 0;
}
.tl-place-wrap {
	flex: 1;
	/* 中央寄せを解除し、左に一定の余白を設けることで開始位置を揃える */
	padding-left: 40px; /* 30pxから増やし、地名をさらに中央へ移動 */
}
.tl-place {
	font-size: 1.5rem;
	letter-spacing: 0.1em;
}
.tl-sub {
	font-size: 0.8rem;
	margin-left: 10px;
}
/* 終日クルーズの行（縦線を表現） */
.type-cruise {
	display: flex;
	align-items: center;
	/* Dayの文字(60px)の中央付近から下りるように左マージンを調整 */
	margin-left: 22px;
	padding-left: 15px;
	border-left: 1px solid rgba(255, 255, 255, 0.7);
	height: 45px;
}
.tl-cruise-day {
	font-size: 0.9rem;
	margin-right: 15px;
	color: rgba(255, 255, 255, 0.8);
}
.tl-cruise-text {
	font-size: 0.9rem;
	letter-spacing: 0.1em;
}
.js-floating-img {
	position: absolute;
	width: 70vw;
	right: -6vw;
	top: 132vw;
	z-index: -1;
	opacity: 0.3;
	mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.tl-img {
		width: 220px;
	}
	.tl-img.left {
		left: -66%;
	}
	.tl-img.right {
		right: -66%;
	}

	.tl-place-wrap {
		padding-left: 30%;
	}
	.tl-place {
		font-size: 1.8rem;
	}
}

/* =========================================
寄港地オプモーダル
========================================= */

:root {
	--opttour-color-primary: #1e3a8a;
	--opttour-color-primary-light: #eff6ff;
	--opttour-color-accent: #b45309;
	--opttour-color-bg: #f8fafc;
	--opttour-color-card: #ffffff;
	--opttour-color-text-main: #0f172a;
	--opttour-color-text-sub: #334155;
	--opttour-color-border: #cbd5e1;
	--opttour-radius-sm: 8px;
	--opttour-radius-md: 12px;
	--opttour-radius-lg: 16px;
}

.opttour-wrapper * {
	box-sizing: border-box;
}
.opttour-wrapper {
	text-align: center;
	margin: 50px 0 20px 0;
}
.opttour-open-btn {
	background-color: #3881ac;
	color: white;
	border: none;
	padding: 15px 30px;
	font-size: 18px;
	font-weight: bold;
	border-radius: 50px;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3);
	transition: all 0.3s ease;
}
.opttour-open-btn:hover {
	background-color: #172554;
	transform: translateY(-2px);
}
/* モーダルの初期状態を強制的に非表示＆最前面にする */
#opttour-modal {
	display: none !important;
	z-index: 99999 !important; /* ヘッダーやフッターより上に持ってくる */
}

/* JSで開いた時の状態 */
#opttour-modal.opttour-is-open {
	display: block !important;
}
/* --- モーダル オーバーレイ --- */
.opttour-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 999999;
	display: flex; /* ←これ超重要です */
	flex-direction: column;
	justify-content: flex-end;

	/* ここから下が隠すための設定 */
	opacity: 0;
	visibility: hidden;
	pointer-events: none; /* 見えない時はクリックを完全に無効化 */
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
	touch-action: none;
}
/* JSで .opttour-is-open クラスが付いた時だけ表示する */
.opttour-modal-overlay.opttour-is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto; /* クリック可能に戻す */
}

/* --- モーダル コンテンツ --- */
/* ==========================================
モーダル展開時の背景スクロールロック
========================================== */
html.opttour-no-scroll,
body.opttour-no-scroll {
	overflow: hidden !important;
	touch-action: none; /* スマホで背景が引きずられて動くのを防ぐ */
}
.opttour-modal-content {
	background-color: var(--opttour-color-bg);
	margin: 2rem auto;
	width: 95vw;
	height: 90vh; /* スマホでは画面の95%を占有 */
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	position: relative;
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.2);
}

.opttour-modal-overlay.opttour-is-open .opttour-modal-content {
	transform: translateY(0);
}

/* --- ヘッダー --- */
.opttour-modal-header {
	background-color: var(--opttour-color-card);
	padding: 20px 10px 10px 10px;
	border-bottom: 2px solid var(--opttour-color-border);
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 10;
	touch-action: pan-x pan-y;
}

.opttour-close-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	background: #f1f5f9;
	border: 1px solid var(--opttour-color-border);
	width: 35px; /* タップ領域確保 */
	height: 35px;
	border-radius: 50%;
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--opttour-color-text-sub);
	cursor: pointer;
}

.opttour-header-title {
	font-family: var(--opttour-font-serif);
	font-size: 20px;
	font-weight: bold;
	color: var(--opttour-color-primary);
	margin-bottom: 20px;
	margin-top: 8px;
	text-align: center;
	padding-right: 30px;
	padding-left: 30px;
}

/* --- タブナビゲーション --- */
.opttour-tabs-container {
	display: flex;
	overflow-x: auto;
	gap: 5px;
	padding-bottom: 8px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.opttour-tabs-container::-webkit-scrollbar {
	display: none;
}

.opttour-tab-btn {
	background-color: var(--opttour-color-bg);
	border: 1px solid var(--opttour-color-border);
	color: var(--opttour-color-text-sub);
	padding: 12px 8vw;
	border-radius: 30px;
	font-size: 16px;
	font-weight: bold;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}
.opttour-tab-btn:hover {
	background-color: #1e3a8a;
	color: #fff;
}

.opttour-tab-btn.opttour-active {
	background-color: var(--opttour-color-primary);
	color: white;
	border-color: var(--opttour-color-primary);
}

/* --- ボディ (ツアー一覧) --- */
.opttour-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 5px;
	background-color: var(--opttour-color-bg);
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
	border-radius: 12px;
}

.opttour-list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 5px 0 10px 5px;
}

.opttour-list-title {
	font-size: 18px;
	font-weight: bold;
	color: var(--opttour-color-text-main);
}

.opttour-list-count {
	font-size: 14px;
	color: var(--opttour-color-text-sub);
	background: white;
	padding: 6px 14px;
	border: 1px solid var(--opttour-color-border);
}

/* --- ツアーカード --- */
.opttour-card {
	background-color: var(--opttour-color-card);
	overflow: hidden;
	margin-bottom: 30px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--opttour-color-border);
}

/* --- 画像スライダー --- */
.opttour-slider-wrap {
	position: relative;
	height: 260px; /* スマホ時の高さ */
	overflow: hidden;
	touch-action: pan-y;
}

.opttour-slider-track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.4s ease-in-out;
}

.opttour-slider-slide {
	min-width: 100%;
	height: 100%;
	position: relative;
}

.opttour-slider-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.opttour-slider-dots {
	position: absolute;
	bottom: 12px;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 2;
}

.opttour-slider-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	transition:
		background-color 0.3s,
		transform 0.3s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.opttour-slider-dot.opttour-active {
	background-color: rgba(255, 255, 255, 1);
	transform: scale(1.3);
}

/* バッジ */
.opttour-badge-container {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	gap: 8px;
	z-index: 2;
	pointer-events: none;
}

.opttour-badge-area {
	background-color: rgba(255, 255, 255, 0.95);
	color: var(--opttour-color-text-main);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.opttour-badge-code {
	background-color: rgba(30, 58, 138, 0.95);
	color: white;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- カード詳細 --- */
.opttour-card-content {
	padding: 24px;
}

.opttour-card-catchphrase {
	color: var(--opttour-color-accent);
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 8px;
	font-family: var(--opttour-font-serif);
}

.opttour-card-title {
	font-size: 24px;
	line-height: 1.4;
	margin-bottom: 20px;
	color: var(--opttour-color-text-main);
	font-weight: bold;
}

.opttour-info-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.opttour-info-tag {
	background-color: var(--opttour-color-bg);
	border: 1px solid var(--opttour-color-border);
	padding: 8px 14px;
	font-size: 15px;
	font-weight: bold;
	color: var(--opttour-color-text-sub);
	display: flex;
	align-items: center;
	gap: 6px;
}

.opttour-price-wrap {
	display: flex;
	align-items: baseline;
	padding-bottom: 24px;
	border-bottom: 1px dashed var(--opttour-color-border);
	margin-bottom: 24px;
}

.opttour-price-amount {
	font-size: 34px;
	font-weight: bold;
	color: var(--opttour-color-text-main);
}

.opttour-price-unit {
	font-size: 16px;
	margin-left: 4px;
}

.opttour-price-note {
	font-size: 14px;
	color: var(--opttour-color-text-sub);
	margin-left: 10px;
}

/* --- ハイライト --- */
.opttour-highlights-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
	padding: 0 10px;
}

.opttour-highlight-item {
	background-color: var(--opttour-color-primary-light);
	padding: 16px;
	border: 1px solid #bfdbfe;
}

.opttour-highlight-title {
	font-size: 16px;
	font-weight: bold;
	color: var(--opttour-color-primary);
	margin-bottom: 8px;
	display: flex;
	align-items: flex-start;
	line-height: 1.5;
}

.opttour-highlight-num {
	background-color: var(--opttour-color-primary);
	color: white;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 13px;
	margin-right: 8px;
	margin-top: 2px;
	flex-shrink: 0;
}

.opttour-highlight-desc {
	font-size: 15px;
	color: var(--opttour-color-text-main);
	padding-left: 30px;
}

/* --- アコーディオン (行程) --- */
.opttour-accordion-btn {
	width: 100%;
	background: var(--opttour-color-bg);
	border: 1px solid var(--opttour-color-border);
	border-radius: 999px;
	color: var(--opttour-color-primary);
	font-size: 16px;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s;
	margin: 0 auto 10px auto;
}

.opttour-accordion-btn:hover {
	background: #e2e8f0;
}

.opttour-accordion-icon {
	transition: transform 0.3s;
}

.opttour-accordion-icon.opttour-open {
	transform: rotate(180deg);
}

.opttour-accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	width: 100%;
	margin: 0 auto 10px auto;
}

.opttour-accordion-content.opttour-open {
	max-height: 800px;
}

.opttour-itinerary-box {
	margin-top: 12px;
	padding: 16px;
	font-size: 15px;
	line-height: 2;
	color: var(--opttour-color-text-main);
}

.opttour-itinerary-arrow {
	color: #64748b;
	margin: 0 6px;
	font-weight: bold;
}

.opttour-itinerary-port {
	font-weight: bold;
	color: var(--opttour-color-primary);
	background-color: #e0e7ff;
	padding: 2px 6px;
	border-radius: 4px;
}

.opttour-icon-svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* --- 注意書き --- */
.opttour-notes {
	text-align: left;
	padding: 24px;
	font-size: 14px;
	color: var(--opttour-color-text-sub);
	line-height: 1.8;
	margin-top: 10px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* =========================================
		価格表のオプモーダル
	========================================= */

	/* モーダルオーバーレイの配置変更 */
	.opttour-modal-overlay {
		justify-content: center; /* 画面中央に配置 */
		align-items: center;
		padding: 40px;
	}

	/* モーダルコンテンツのサイズとアニメーション変更 */
	.opttour-modal-content {
		max-width: 800px;
		height: 90vh;
		border-radius: var(--opttour-radius-lg);
		transform: scale(0.95); /* 下からではなくスケールで表示 */
		opacity: 0;
		margin: 0 auto;
	}

	.opttour-modal-overlay.opttour-is-open .opttour-modal-content {
		transform: scale(1);
		opacity: 1;
	}

	/* スライダー画像の高さ変更 */
	.opttour-slider-wrap {
		height: 300px;
		width: 400px;
		flex-shrink: 0;
	}
	.opttour-tab-btn {
		padding: 12px 30px;
	}

	.opttour-wrapper {
		margin: 50px 0;
	}
	.opttour-slider-slide img {
		object-fit: cover;
		pointer-events: none;
		height: 270px;
	}
	.opttour-price-wrap {
		display: flex;
		align-items: baseline;
		padding-bottom: 5px;
		margin-bottom: 0px;
	}
	/* --- ツアーカード --- */
	/* 親要素をFlexboxにして縦並びに設定 */
	.opttour-card-content {
		display: flex;
		flex-direction: column;
		flex-grow: 1; /* 念のため、親枠の中で横幅をいっぱいに広げる設定 */
	}

	/* 一番下にある要素に margin-top: auto を追加 */
	.opttour-price-wrap {
		display: flex;
		align-items: baseline;
		padding-bottom: 5px;
		margin-bottom: 0px;
		margin-top: auto; /* ★ここを追加！上の余白をすべて吸収して下に押し付ける */
	}
	.opttour-card-head {
		display: flex;
		padding: 10px;
	}
	.opttour-card-catchphrase {
		font-size: 14px;
	}
	.opttour-highlights-container {
		margin: 0 auto;
	}

	.opttour-itinerary-box {
		width: 100%;
		margin: 0 auto 20px auto;
	}
	.opttour-accordion-btn {
		width: 100%;
	}
	.opttour-accordion-content {
		width: 100%;
	}
	.opttour-slider-dot {
		width: 5px;
		height: 5px;
		background-color: #bfdbfe;
	}
	.opttour-tabs-container {
		gap: 12px;
	}
}

/* =========================================
価格表
========================================= */
.pricing-section {
	position: relative;
	z-index: 20;
	width: 100%;
	/*
	padding: 80px 20px;
	*/
	color: #0d0d0d;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
}

.pricing-content {
	/*text-align: center;*/
	padding: 0;
	margin: 0 auto;
	width: 100%;
}

/* Vertical Pagination Component */
.vertical-pagination {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: 20px;
	top: auto;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	z-index: 2000;
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: auto;
}
.vertical-pagination .pag-btn {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
	transition:
		opacity 0.3s,
		transform 0.3s;
}
.vertical-pagination .pag-btn:hover {
	opacity: 1;
	transform: scale(1.1);
}
.vertical-pagination .pag-btn svg {
	width: 20px;
	height: 20px;
}
.vertical-pagination .pag-status {
	font-family: "Cinzel", serif;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 4px;
	letter-spacing: 1px;
}
.vertical-pagination .current-page {
	font-size: 1rem;
	font-weight: 700;
}
.vertical-pagination .separator {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 300;
	margin: 0 1px;
}
.vertical-pagination .total-pages {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* Vertical Pagination */
	.vertical-pagination {
		right: 40px;
		gap: 15px;
	}
	.vertical-pagination .pag-btn svg {
		width: 32px;
		height: 32px;
	}
	.vertical-pagination .pag-status {
		font-size: 1.2rem;
	}
	.vertical-pagination .current-page {
		font-size: 1.3rem;
	}
	.vertical-pagination .total-pages {
		font-size: 1.1rem;
	}
}

#introduction_area {
	/*部屋紹介　非表示*/
	display: none;
}

/*===============================
部屋比較表
===============================*/
.roomComparisonModal {
	background-color: #e9e9e5;
	padding: 5vw 2vw;
}
.roomComparisonBody {
	transition: all 0.5s;
}
.roomComparisonBody:not(.active) {
	opacity: 0;
	height: 0;
	overflow: hidden;
}
.roomComparisonBody.active {
	opacity: 1;
	height: 100%;
}
.roomComparisonModal h4 {
	text-align: center;
	margin: 0.5em auto 1em;
	font-size: 5vw;
	font-weight: normal;
}
.roomComparisonModal h4::after {
	content: "";
	display: block;
	height: 1px;
	background-color: #466993;
	width: 5em;
	margin: 0.25em auto 0;
}
.roomComparisonTableWrap {
	margin-bottom: 4vw;
}
.roomComparisonTableWrap--note {
	font-size: 0.7em;
	padding: 1em;
}
.roomComparisonTableOutside {
	padding-bottom: 3vw;
}
.roomComparisonTable {
	box-sizing: border-box;
	font-size: 3vw;
	color: #636363;
	border-collapse: separate;
}
.roomComparisonTable__row__item {
	font-size: 1em;
	background: #fff;
	white-space: nowrap;
	padding: 0.5em;
	border: solid 1px #636363;
	border-top: none;
	border-left: none;
	text-align: center;
	line-height: 1em;
	vertical-align: middle;
}
.roomComparisonTable__row__item.stickyRow {
	position: sticky;
	left: 0;
	top: 0;
	z-index: 100;
	border-left: solid 1px #636363;
	font-size: 1.1em;
}
.roomComparisonTable__row__item.tLeft,
.roomComparisonTable__row__item.stickyRow {
	text-align: left;
	justify-content: flex-start;
}
.roomComparisonTable__row__item sub {
	font-size: 0.6em;
	margin-bottom: -0.4em;
}
th.roomComparisonTable__row__item {
	border-top: solid 1px #636363;
	background-color: #d6d6ce;
	font-size: 1.1em;
	font-weight: normal;
}
th.roomComparisonTable__row__item.stickyRow {
	text-align: center;
}
th.roomComparisonTable__row__item.tLeft,
th.roomComparisonTable__row__item.tLeft,
th.roomComparisonTable__row__item.bBn {
	border-bottom: none;
}
.roomComparisonTable__row__item.image {
	padding: 0;
}
.roomComparisonTable__row__item--link {
	position: relative;
	width: 20vw;
	display: flex;
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	padding: 0.5em;
	align-items: center;
}
.roomComparisonTable__row__item--link b {
	position: absolute;
	width: 3em;
	height: 3em;
	background-color: #ed8047;
	right: -1.5em;
	bottom: -1.5em;
	transform: rotate(45deg);
}
.roomComparisonTable__row__item--link b::before {
	content: "";
	position: absolute;
	background-image: url(/shopping/img/special/cruising/common/svg/ico_lens.svg);
	transform: rotate(-45deg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 1em;
	width: 1em;
	top: 1em;
	left: 0.2em;
}
/*
.highClass .roomComparisonTable__row__item--link b {
	background-color: #3c555e;
}
*/
.room_comparison_facility__term {
	background-color: #898989;
	color: #fff;
	width: 25%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	text-align: center;
	padding: 1vw;
	line-height: 1.2;
}
.room_comparison_facility__desc {
	width: 75%;
	padding: 2vw;
	margin: 0;
	box-sizing: border-box;
	line-height: 1.4;
	text-align: left;
}
.room_comparison_facility__desc sup {
	font-size: 0.8em;
	vertical-align: top;
	position: relative;
	top: -0.2em;
}
.highClass .roomComparisonTable__row__item {
	background-color: #dfe5e8;
	border-color: #3c555e;
	color: #3c555e;
}
.roomComparisonTable__box {
	margin: 0 auto;
}
.roomComparisonTable__contentsImg {
	margin-bottom: 12vw;
}
.accordion__contents {
	width: 80vw;
	margin: 15vw auto 5vw;
}
.accordion__img {
	margin-top: 10vw;
}
.room_comparison_facility {
	width: 100%;
	margin-top: 3vw;
	margin-bottom: 2vw;
	border: solid 1px #636363;
	background-color: #fff;
	box-sizing: border-box;
	font-size: 3vw;
}
.room_comparison_facility__list {
	display: flex;
	align-items: stretch;
	margin: 0;
}
.room_comparison_facility__term {
	background-color: #898989;
	color: #fff;
	width: 25%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	text-align: center;
	padding: 1vw;
	line-height: 1.2;
}
.room_comparison_facility__desc {
	width: 75%;
	padding: 2vw;
	margin: 0;
	box-sizing: border-box;
	line-height: 1.4;
	text-align: left;
}
.room_comparison_facility__desc sup {
	font-size: 0.8em;
	vertical-align: top;
	position: relative;
	top: -0.2em;
}
.roomComparisonModal .pos_relative {
	margin-bottom: 10vw;
}
.roomComparisonModal .cruisingschedule_btn {
	text-align: center;
	background: linear-gradient(175deg, #393837 0%, #3d3b3a 43%, #2e2c2b 90%);
	border: 1px #393837 solid;
	border-radius: 5px;
	box-shadow: 4px 4px 4px #00000070;
	margin: 0 auto;
	padding: 0.5em 1em 0.5em 1em;
	font-size: 3.8vw;
	color: #fff;
	text-shadow: none;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.roomComparisonModal .cruisingschedule_btn::after {
	width: 2vw;
	height: 2vw;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	right: 4vw;
	top: 25%;
	transform: rotate(135deg);
	border-radius: 0px;
}
.roomComparisonModal .cruisingschedule_btn.active {
	display: flex;
}
.roomComparisonModal .cruisingschedule_btn.active::after {
	transform: rotate(315deg);
	top: 45%;
}
.roomComparisonTable_contentsTitle {
	text-align: center;
	background: linear-gradient(175deg, #393837 0%, #3d3b3a 43%, #2e2c2b 90%);
	border: 1px #393837 solid;
	border-radius: 5px;
	margin: 4vw auto;
	padding: 0.5em 1em 0.5em 1em;
	font-size: 3.8vw;
	color: #fff;
	text-shadow: none;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}
.amenities_txt ul {
	font-size: 2.7vw;
	box-sizing: border-box;
	box-shadow: 1px 1px 5px #00000052;
	background-color: #fff;
	margin: 0.5em auto 0;
	display: grid;
	grid-template-columns: 53% 47%;
	grid-auto-flow: column;
	grid-template-rows: repeat(9, auto);
}
.amenities_txt li {
	font-size: 1em;
	padding: 0.7em;
	white-space: nowrap;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.amenities_txt li:nth-child(-n + 9) {
	border-right: solid 1px #dfe5e8;
}
.amenities_txt li:nth-child(2),
.amenities_txt li:nth-child(4),
.amenities_txt li:nth-child(6),
.amenities_txt li:nth-child(8),
.amenities_txt li:nth-child(11),
.amenities_txt li:nth-child(13),
.amenities_txt li:nth-child(15),
.amenities_txt li:nth-child(17) {
	background-color: #edf1f2;
	border-right-color: #fff;
}
.amenities_txt li sup {
	font-size: 0.6em;
	position: absolute;
	top: 0.5em;
	left: 7.5em;
}
.amenities_txt_note {
	margin-top: 1em;
	font-size: 2vw;
	text-indent: -1em;
	padding-left: 1em;
}
.roomComparisonMap {
	text-align: center;
}
.roomComparisonMap--top {
	margin: 0 auto 2em;
	width: 86%;
}
.roomComparisonBody__item {
	width: 95%;
	margin: 0 auto;
}
.roomComparisonBody__item__img {
	text-align: center;
	width: 95%;
	margin: 0 auto;
}
.roomComparisonBody__item__spec {
	margin: 1.5em 0;
	font-size: 3.5vw;
	box-sizing: border-box;
}
.roomComparisonBody__item__spec ul {
	display: flex;
	flex-wrap: wrap;
}
.roomComparisonBody__item__spec li {
	white-space: nowrap;
	margin: 0 0.5em 0.5em 0;
}
.roomComparisonBody__item__spec li::before {
	content: "■";
}
.roomComparisonBody__item__spec li sub {
	font-size: 0.9em;
}
.roomComparisonBody__item__spec p {
	font-size: 0.8em;
	text-indent: -1em;
	padding-left: 1em;
}
.roomComparisonBody__item__back a {
	width: fit-content;
	display: block;
	margin: 0 auto;
	background-color: #acacac;
	color: #fff;
	padding: 0.25em 2em;
	border-radius: 5px;
	position: relative;
}
.roomComparisonBody__item__back a::after {
	position: absolute;
	display: block;
	content: "";
	width: 0.25em;
	height: 0.25em;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(225deg);
	left: 0.75em;
	top: calc(50% - 0.125em);
}
.roomIntroduction__roomList {
	margin: 0vw 2vw;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* ================================
	================================= */
	.roomComparisonModal {
		box-sizing: border-box;
		width: 750px;
		padding: 15px;
	}
	.roomComparisonModal h4 {
		font-size: 24px;
	}
	.roomComparisonTableWrap {
		margin-bottom: 20px;
	}
	.roomComparisonTableOutside {
		padding-bottom: 11px;
	}
	.roomComparisonTable {
		font-size: 14px;
		padding-right: 5px;
	}
	.roomComparisonTable__row__item--link {
		width: 100px;
	}
	.roomComparisonBody__item {
		width: 408px;
	}
	.roomComparisonBody__item__spec {
		font-size: 16px;
	}
	.roomComparisonModal .pos_relative {
		margin-bottom: 50px;
	}
	.roomComparisonModal .cruisingschedule_btn {
		font-size: 16px;
		width: fit-content;
		padding: 0.5em 2em;
	}
	.roomComparisonModal .cruisingschedule_btn::after {
		width: 10px;
		height: 10px;
		right: 10px;
	}
	.roomComparisonTable_contentsTitle {
		font-size: 16px;
		width: fit-content;
		padding: 0.5em 2em;
		margin: 20px auto;
	}
	.roomComparisonMap--top {
		margin-bottom: 4em;
	}
	/* -------------- */
	.roomComparisonModal {
		box-sizing: border-box;
		width: 750px;
		padding: 15px;
	}
	.roomComparisonModal h4 {
		font-size: 24px;
	}
	.roomComparisonTableWrap {
		margin-bottom: 20px;
	}
	.roomComparisonTableOutside {
		padding-bottom: 11px;
	}
	.roomComparisonTable {
		font-size: 14px;
		padding-right: 5px;
	}
	.roomComparisonTable__row__item--link {
		width: 100px;
	}
	.roomComparisonBody__item {
		width: 408px;
	}
	.roomComparisonBody__item__spec {
		font-size: 16px;
	}
	.roomComparisonModal .pos_relative {
		margin-bottom: 50px;
	}
	.roomComparisonTable_contentsTitle {
		font-size: 16px;
		width: fit-content;
		padding: 0.5em 2em;
		margin: 20px auto;
	}
	.roomComparisonMap--top {
		margin-bottom: 4em;
	}
}

/*======明朝一括破棄=======*/
.yachtclubLp #deluxe_only,
.yachtclubLp #price_table_title,
.yachtclubLp #room_details_title,
.yachtclubLp .RoomType_select,
.yachtclubLp .img_price_table span.Price,
.yachtclubLp .img_price_table .name_txt,
.yachtclubLp .img_price_table .cen_box .dis1_price .old_price,
.yachtclubLp .MSC_none_supplement,
.yachtclubLp .RoomType_title p {
	font-family: unset;
}
.yachtclubLp i.order_num_txt,
.yachtclubLp .order_num b,
.RoomType_select {
	font-family: "Zen Kaku Gothic New", sans-serif !important;
	font-style: normal;
}
.img_price_table span.Price {
	font-size: 7.3vw !important;
}
.order_num_txt {
	font-weight: 600;
}
.yachtclubLp .RoomType .RoomType_note,
.yachtclubLp span.recommendation,
.yachtclubLp .great_label_wrap {
	display: none !important;
}
.yachtclubLp .img_price_table .r_BN .name_box {
	background-color: #fff;
}
.yachtclubLp .yachtclubLp .price_table_wrap {
	background-color: #0e2341;
}
.tab_price_table:not(.active) {
	display: none !important;
}
.content-title.priceTable__content-title {
	padding: 0 10px;
	color: #4d1a0a;
	margin-top: 10vw;
}
.priceTable__content-title .content-title_main {
	gap: 0;
}
.priceTable__content-title .content-title_main h2 {
	font-size: 1.8rem;
}
.priceTable__content-title .note {
	padding-left: 1em;
	text-indent: -1em;
	font-size: 0.8rem;
	letter-spacing: -0.01em;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.content-title.priceTable__content-title {
		padding: 70px 0px 20px;
		margin-top: 0;
	}
	.priceTable__content-title .content-title_main h2 {
		font-size: 2.2rem;
	}
	.priceTable__content-title .note {
		font-size: 1rem;
		letter-spacing: 0;
	}
	.priceTable__content-title .content-title_main {
		justify-content: space-between;
		width: 100%;
	}
	.priceTable__content-title .h2_line {
		width: 130px;
	}
}
.yachtclubLp .img_price_table .r_BN .name_box .name_txt .ship_name {
	margin-top: 0;
}
.yachtclubLp .yachtclubLp .price_table_wrap.onryMSC .img_price_table .name_box {
	min-height: auto;
}
.yachtclubLp .yachtclubLp .price_table_wrap.onryMSC .img_price_table .name_box .name_txt a {
	position: static;
}
.yachtclubLp .yachtclubLp .price_table_wrap.onryMSC .name_box .detailsmodal {
	position: absolute;
	left: 2vw;
	top: 2vw;
}
.yachtclubLp .RoomType_title {
	background-color: #0e2341;
	padding-bottom: 40px;
}
.yachtclubLp .RoomType_title p.cruising_title {
	font-size: 16px !important;
}
.yachtclubLp .RoomType_title p {
	font-size: 32px !important;
}
.yachtclubLp .RoomType_title::before {
	content: "";
	background-image: url(/shopping/img/special/cruising/common/svg/ico_msc_yacht_club.svg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	width: 3em;
	height: 3em;
	display: block;
	margin: 10px auto 10px auto;
}
.yachtclubLp_normalroom_title::before {
	display: none !important;
}
.yachtclubLp_normalroom_title {
	background-color: #8da0b6 !important;
	padding: 10px 0 10px 0 !important;
}
.yachtclubLp_normalroom_title p.cruising_title {
	display: none !important;
}
.yachtclubLp .RoomType_title.yachtclubLp_normalroom_title p {
	font-size: 28px !important;
}
.yachtclubLp .RoomType_title .order_num {
	bottom: 10px;
}
.yachtclubLp .RoomType_daylable ul {
	font-weight: bold;
}
.yachtclubLp .RoomType_daylable ul li {
	font-size: 0.9em;
}
.yachtclubLp .img_price_table_MSC .name_box {
	background-color: #f0eadf;
}
.yachtclubLp .img_price_table_MSC .name_box .name_txt,
.yachtclubLp .img_price_table_MSC span.ship_name {
	color: #4d1a0a;
	font-size: 5vw;
}
.yachtclubLp .img_price_table_MSC .name_box .name_txt,
.yachtclubLp .img_price_table_MSC span.Price {
	color: #4d1a0a;
	font-size: 30px;
}
.yachtclubLp .img_price_table_MSC .name_box .name_txt {
	padding-top: 0;
	padding-bottom: 10vw;
}
.yachtclubLp .img_price_table .name_box .name_txt .ico_txt_msc {
	display: flex;
	margin-left: -2vw;
	background: #0e2341;
	padding: 0.5em;
	color: #fff;
	width: fit-content;
	font-size: 3.3vw;
	margin-bottom: -1em;
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif !important;
	font-weight: 500;
}
.yachtclubLp .img_price_table .name_box .name_txt .ico_txt_msc::before {
	content: "";
	background-image: url(/shopping/img/special/cruising/common/svg/ico_msc_yacht_club.svg);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center;
	width: 1.5em;
	height: 1.2em;
	display: block;
}
.yachtclubLp .RoomType_supplement_txt {
	margin-left: 0;
	margin-right: 0;
}
.yachtclubLp .main_pack_img {
	margin-top: 1.5em;
	font-size: 0.6rem;
	padding: 0.75em 0 1em;
	position: relative;
	border: 1px solid #000;
	border-width: 1px 0 1px 0;
}
.yachtclubLp .main_pack_img p {
	width: fit-content;
	margin: 0 auto;
}
.yachtclubLp .main_pack_img ul {
	margin-top: 0.25em;
}
.yachtclubLp .bnr_msclp_only {
	font-size: 1rem;
	margin-top: 1em;
}
.yachtclubLp .bnr_msclp_link {
	margin: 0 4vw;
}
.yachtclubLp .bnr_msclp_link a {
	display: block;
}
.yachtclubLp .bnr_tit {
	text-align: center;
	margin-bottom: 0.5em;
}
.yachtclubLp .bnr_tit span {
	position: relative;
	display: inline-block;
	padding: 0 0.75em;
	line-height: 1.25em;
}
.yachtclubLp .bnr_tit span::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	content: "";
	height: 100%;
	background: #000;
	border-radius: 3px;
	transform: rotate(-25deg);
}
.yachtclubLp .bnr_tit span::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	content: "";
	height: 100%;
	background: #000;
	border-radius: 3px;
	transform: rotate(25deg);
}
.yachtclubLp #cart_modal {
	font-family:
		"Noto Sans JP",
		MS PGothic,
		MS UI Gothic,
		"Helvetica",
		sans-serif;
}
/*
body.yachtclubLp .img_price_table .name_box .detailsmodal{
	display: block!important;
}
*/
.normalPriceTableAccordion__btn {
	margin: 1em auto 0.25em;
	width: 18em;
	display: flex;
	color: #4d1a0a;
	padding: 0.25em 1em;
	font-size: 5vw;
	border: solid #4d1a0a 1px;
	font-weight: bold;
	border-radius: 5px;
	justify-content: center;
	background-color: #f8ebd9;
}
.normalPriceTableAccordion__btn--txt {
	display: flex;
	align-items: center;
}
.normalPriceTableAccordion__btn--txt .txt {
	line-height: 1em;
	text-align: center;
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif !important;
	font-weight: 500;
}
.normalPriceTableAccordion__btn--txt sub {
	font-size: 0.6em;
	display: inline-block;
	margin-bottom: -0.4em;
	padding: 0 1em;
}
.normalPriceTableAccordion__btn b {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.4em 0.3em 0;
	border-color: #4d1a0a transparent transparent transparent;
	display: block;
	margin-top: 0.25em;
	margin-left: 0.5em;
}
.normalPriceTableAccordion__btn.active {
	display: none;
}
.outsideRoomTypeNote {
	padding: 0 1.5vw 1em;
}
/* ==================価格表周りYCLP専用======================= */
.cancel-91days {
	width: 100%;
	background-color: #f2fdff;
	color: #333333;
	padding: 10px 0 20px 0;
	text-align: center;
	position: relative;
}
.cancel-91days-note {
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	font-size: 0.6em;
}
.yachtclubLp .bnr_msclp_link img {
	border-radius: 7px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .bnr_msclp_only {
		font-size: 1.5rem;
	}
	.yachtclubLp .bnr_msclp_link {
		margin: 0 auto;
		width: fit-content;
		text-align: center;
	}
	.yachtclubLp .bnr_msclp_link img {
		width: 70%;
	}
}

/* =========================================
乗船までの流れ　step
========================================= */
.step-section {
	margin-top: 20px;
}
.cruise-step-wrapper {
	margin-bottom: 60px;
}
.cruise-step-item {
	display: flex;
	position: relative;
}
/* ステップをつなぐ縦線 */
.cruise-step-item::after {
	content: "";
	position: absolute;
	top: 50px; /* 丸の下端あたりから */
	bottom: 0;
	left: 25px; /* 丸の中心 (50px / 2) */
	width: 1px;
	background-color: #d1c7b1; /* 薄い茶色の線 */
	z-index: 0;
}
/* 最後のステップは縦線を消す */
.cruise-step-item:last-child::after {
	display: none;
}
.cruise-step-indicator {
	position: relative;
	z-index: 1; /* 線の上に丸を表示 */
	width: 45px;
	height: 45px;
	border: 1px solid #d1c7b1;
	border-radius: 50%;
	background-color: #fcfbf6; /* 背景と同じ色で線を隠す */
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 15px;
	flex-shrink: 0;
	color: #8c7345;
	font-size: 20px;
}
/* 丸の右下の縁を少し切る（隠す）ための記述 */
.cruise-step-indicator::before {
	content: "";
	position: absolute;
	bottom: -6px;
	right: -6px;
	width: 36px;
	height: 36px;
	background-color: #fcfbf6; /* 背景と同色にして線を隠す */
	border-radius: 50%; /* 切り口を滑らかにする */
	z-index: 1; /* 重なり順を指定 */
}

/* 数字が隠れないように最前面に出す */
.cruise-step-indicator span {
	position: relative;
	z-index: 2;
}

.cruise-step-content {
	flex: 1;
	padding-bottom: 40px; /* 次のステップまでの間隔 */
	padding-top: 10px; /* 数字の位置と見出しの高さを合わせる */
}
.cruise-step-item:last-child .cruise-step-content {
	padding-bottom: 0;
}

.cruise-step-title {
	margin: 0 0 10px;
	color: #6d542b; /* 茶色系のテキスト */
	font-size: 1.25rem;
	font-weight: normal;
}
.cruise-step-desc {
	margin: 0;
	font-size: 0.9rem;
	color: #444;
}
.cruise-step-text-red {
	color: #c92a4e;
	font-size: 0.85rem;
	display: block;
	margin-top: 8px;
	font-weight: bold;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* お申込みのながれ*/
	.step-section {
		padding-top: 50px;
	}
	.cruise-step-wrapper-center {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.cruise-step-wrapper {
		margin-bottom: 60px;
		display: flex;
		flex-direction: column;
	}
	.maruosan {
		width: 116px !important;
	}
}

/* =========================================
	Banners
========================================= */
.banners-section {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* 1. Passport Banner */
.passport-banner {
	display: flex;
	flex-direction: column;
	border: 1px solid #ccc;
	background-color: #fff;
}
.passport-text {
	padding: 20px;
}
.passport-text h3 {
	margin: 0 0 10px;
	font-size: 1.3rem;
	color: #000;
	font-weight: normal;
}
.passport-text p {
	margin: 0 0 10px;
	font-size: 0.9rem;
	color: #333;
}
.passport-text small {
	display: block;
	font-size: 0.75rem;
	color: #555;
}
.passport-img-placeholder {
	width: 100%;
	height: 160px;
	background-color: #e9e9e9;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #888;
	border-top: 1px solid #ccc;
	font-size: 0.9rem;
	overflow: hidden;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.passport-banner {
		flex-direction: row;
		align-items: stretch;
	}
	.passport-text {
		flex: 1;
		padding: 30px;
	}
	.passport-img-placeholder {
		width: 250px;
		height: auto;
		border-top: none;
		border-left: 1px solid #ccc;
	}
}

/* 2. MSC Banner */
.msc-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #0b2b4d; /* 濃紺 */
	color: #fff;
	padding: 25px 20px;
	position: relative;
	overflow: hidden;
	background-image: url(/shopping/img/special/cruising/yachtclub_hub/seo-Bellissima.png);
	background-position: right;
	background-size: cover;
	border-radius: 7px;
}
.msc-banner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* 黒色（0,0,0）を40%の濃さで透かす */
	background-color: rgba(0, 0, 0, 0.4);
}
.msc-text {
	position: relative;
	z-index: 1;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	gap: 10px;
}
.msc-arrow {
	font-size: 0.8rem;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* MSCバナーの文字サイズ調整 */
	.msc-banner {
		padding: 30px 20px;
		justify-content: flex-start;
		padding-left: 50px;
	}
	.msc-text {
		font-size: 1.3rem;
	}
}

/* 3. Bottom Card Banners */
.cards-row {
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.card {
	position: relative;
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 8px;
	padding: 25px 20px 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.card-blue {
	border: 2px solid #a4bde0;
}
.card-red {
	border: 2px solid #e8a0a9;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* 下部のカードを横並びに */
	.cards-row {
		flex-direction: row;
		padding-top: 40px;
	}
	.card {
		flex: 1;
	}
	.card-person-placeholder img {
		position: absolute;
		width: 25%;
		top: -37%;
		right: 2%;
	}
}

/* 吹き出しバッジ */
.card-badge {
	position: absolute;
	top: -15px;
	left: 20px;
	padding: 6px 16px;
	border-radius: 20px;
	color: #fff;
	font-weight: bold;
	font-size: 0.8rem;
}
/* 吹き出しのしっぽ部分 */
.card-badge::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px 6px 0 6px;
	border-style: solid;
}
.badge-blue {
	background-color: #4b7bb5;
}
.badge-blue::after {
	border-color: #4b7bb5 transparent transparent transparent;
}

.badge-red {
	background-color: #d15063;
}
.badge-red::after {
	border-color: #d15063 transparent transparent transparent;
}

.card-content {
	flex: 1;
}
.card-content strong {
	display: block;
	font-size: 1.05rem;
	margin-bottom: 5px;
	color: #111;
}
.card-content span {
	font-size: 0.85rem;
	color: #555;
}
.card-person-placeholder {
	width: 70px;
	height: 70px;
	background-color: #eee;
	border-radius: 50%;
	margin-left: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.7rem;
	color: #aaa;
	flex-shrink: 0;
	text-align: center;
}

/* ====================================
よくあるご質問
========================================= */

#cruisingfaq {
	margin-bottom: 0;
	padding: 0.1px;
	padding-bottom: 4rem;
}
#cruisingfaq .yc-cruisingfaq-title {
	padding: 0;
}
#cruisingfaq h1,
#cruisingfaq h4,
#cruisingfaq h5,
#cruisingfaq h6 {
	font-family: "Zen Kaku Gothic New", sans-serif !important;
}
#cruisingfaq.content-title_main {
	background-color: #0e2341;
}
#cruisingfaq h2 {
	background: none;
	color: #4d1a0a;
	margin-bottom: 0;
	padding-left: 15px;
	height: 4rem !important;
	font-size: 2rem;
}
#cruisingfaq .yc-cruisingfaq-title {
	padding: 0;
}
#cruisingfaq .toptxt {
	text-align: left;
	font-size: 1rem;
	margin: 0 0 1em 0;
	padding-left: 15px;
}
#cruisingfaq .topfaq {
	font-size: 1rem;
	padding: 0 0.5em !important;
}
#cruisingfaq .topfaq h5 {
	font-size: 1rem;
	background-color: #dbf1ff;
	margin: 0.8em 0 0.5em;
	padding: 0.25em 0.5em;
}
#cruisingfaq .topfaq p {
	font-size: 0.8rem;
}
#cruisingfaq .topmovie {
	display: flex;
	justify-content: center;
	margin: 3vw;
}
#cruisingfaq .topfaq .minitxt {
	font-size: 0.6rem;
	line-height: 1.5em;
}
#cruisingfaq h3 {
	text-align: left;
	font-size: 1.2rem;
	margin: 1em 0 0.5em;
	padding-left: 15px;
}
#cruisingfaq .faq_accordion h5 {
	font-size: 0.9rem;
	margin: 0.5em 0;
	padding: 0.5em 1.75em 0.5em 0.5em;
}
#cruisingfaq .category_item_g {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	align-self: stretch;
	margin: 0 auto;
	border: solid 1px #0053a1;
	border-right: none;
	border-bottom: none;
}
#cruisingfaq .category_item_g li {
	width: 50%;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	border: solid 1px #0053a1;
	border-top: none;
	border-left: none;
	position: relative;
}
#cruisingfaq .category_item_g li a {
	height: 3em;
	padding-left: 3em;
	display: flex;
	align-items: center;
	color: #0053a1;
	width: 100%;
	background-color: #fff;
}
#cruisingfaq .category_item_g li a::before,
#cruisingfaq .category_item_g li a::after {
	content: "";
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	top: 0;
	height: 100%;
}
#cruisingfaq .category_item_g li a::before {
	left: 0.7em;
	width: 1.7em;
}
#cruisingfaq .category_item_g li a.payment::before {
	background-image: url(/shopping/img/special/cruising/2023fall/faq/ico_link_payment.svg);
}
#cruisingfaq .category_item_g li a.pass::before {
	background-image: url(/shopping/img/special/cruising/2023fall/faq/ico_link_pass.svg);
}
#cruisingfaq .category_item_g li a.room::before {
	background-image: url(/shopping/img/special/cruising/2023fall/faq/ico_link_room.svg);
}
#cruisingfaq .category_item_g li a.service::before {
	background-image: url(/shopping/img/special/cruising/2023fall/faq/ico_link_service.svg);
}

#cruisingfaq .category_item_g li a::after {
	background-image: url(/shopping/img/special/cruising/2023fall/common/ico_arrow.svg);
	right: 0.25em;
	width: 1em;
}
#cruisingfaq .category {
	font-size: 1rem;
	padding: 0 0.5em;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	/* よくある質問 */
	#cruisingfaq {
		margin: 0 !important;
	}
	#cruisingfaq .yc-cruisingfaq-title {
		padding: 0 0 40px 0;
	}
	#cruisingfaq h3 {
		margin: 3em 0 0.5em 0 !important;
	}
	#cruisingfaq .category h4::before {
		left: 10px;
	}
	#cruisingfaq .category h4 {
		padding-left: 55px;
	}
	#cruisingfaq .topfaq,
	#cruisingfaq .category {
		padding: 0;
	}
	#cruisingfaq .category_item_g {
		margin: 0 0.5em;
	}
	#cruisingfaq .category_item_g li {
		width: 25%;
	}
}

/*===================================
▼▼問い合わせ▼▼
===================================-*/
.c-contact {
	background-color: var(--yc-white);
	border-radius: 4px;
	position: relative;
	padding: 50px 30px 40px;
	transform: scale(0.98);
	transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	text-align: center;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.c-contact {
		padding: 60px 50px 50px;
	}
}
.c-contact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--yc-champagne), transparent);
}
.c-contact-subtitle {
	color: var(--yc-champagne);
	font-size: 0.9rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 15px;
	display: block;
	font-family: var(--font-serif);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.c-contact-subtitle {
		font-size: 1rem;
		margin-bottom: 20px;
	}
}
.c-contact-title {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.05em;
	margin-bottom: 25px;
	color: var(--yc-charcoal);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.c-contact-title {
		font-size: 1.5rem;
		margin-bottom: 30px;
	}
}
.c-contact-text {
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--yc-gray-text);
	margin-bottom: 35px;
	font-weight: 300;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.c-contact-text {
		font-size: 0.8rem;
		margin-bottom: 40px;
	}
}
.c-contact-tel-btn {
	display: block;
	text-decoration: none;
	padding: 20px;
	border: 1px solid rgba(197, 168, 128, 0.4);
	background-color: var(--yc-white);
	border-radius: 2px;
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.c-contact-tel-btn {
		padding: 25px 20px;
	}
}
.c-contact-tel-btn:hover {
	border-color: var(--yc-champagne);
	background-color: #fafaf8;
	box-shadow: 0 10px 20px rgba(197, 168, 128, 0.1);
	transform: translateY(-2px);
}
.c-contact-tel-label {
	font-size: 0.8rem;
	color: var(--yc-gray-text);
	display: block;
	margin-bottom: 8px;
	letter-spacing: 0.05em;
}
.c-contact-tel-number-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
/* SVGアイコン */
.c-contact-tel-number-wrapper i,
.c-contact-tel-number-wrapper svg {
	color: var(--yc-champagne);
	width: 22px;
	height: 22px;
}
.c-contact-tel-number {
	font-family: var(--font-sans-en);
	font-weight: 300;
	font-size: 1.8rem;
	color: var(--yc-charcoal);
	letter-spacing: 0.1em;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.c-contact-tel-number {
		font-size: 2.2rem;
	}
}
.c-contact-hours {
	margin-top: 15px;
	font-size: 0.75rem;
	color: #666;
	letter-spacing: 0.05em;
	line-height: 1.6;
}
.c-contact-hours-highlight {
	color: var(--yc-champagne);
	font-weight: 500;
	font-size: 0.85rem;
	font-family: var(--font-serif);
	display: block;
	margin-bottom: 4px;
	letter-spacing: 0.08em;
}
/*追従問い合わせ
----------------------------*/
/* 追従位置 */
.fix-contact {
	display: none;
	position: fixed;
	bottom: 16vmin;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin: 0 auto;
	width: 90vmin;
	z-index: 999;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact {
		bottom: 115px;
		left: inherit;
		right: -162px;
		width: 340px;
		margin: 0;
	}
}
.fix-contact-close {
	position: absolute;
	/* top: -12px;
	right: -10px; */
	top: 5px;
	right: 5px;
	z-index: 99999;
	cursor: pointer;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact-close {
		top: 6px;
		right: 8px;
	}
}
/* 追従の中の問い合わせスタイル */
.fix-contact .c-contact {
	padding: 10px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact .c-contact {
		padding: 40px 10px;
	}
}
.fix-contact .c-contact-subtitle {
	margin-bottom: 5px;
	font-size: 0.7em;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact .c-contact-subtitle {
		margin-bottom: 20px;
		font-size: 1rem;
	}
}
.fix-contact .c-contact-title {
	line-height: 1;
	margin-bottom: 5px;
	font-size: 1.1rem;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact .c-contact-title {
		margin-bottom: 20px;
		font-size: 1.3rem;
	}
}
.fix-contact .c-contact-text {
	font-size: 0.75rem;
	margin-bottom: 5px;
	line-height: 1.2;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact .c-contact-text {
		margin-bottom: 20px;
		line-height: 1.5;
		font-size: 0.8rem;
	}
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact .c-contact-tel-label {
		font-size: 0.9rem;
	}
}
.fix-contact .c-contact-tel-btn {
	padding: 4px;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact .c-contact-tel-btn {
		padding: 1rem;
		font-size: 1rem;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
}
.fix-contact .c-contact-tel-number {
	font-size: 1.4rem;
	padding-bottom: 0.1rem;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact .c-contact-tel-number {
		font-size: 1.7rem;
		padding-bottom: 0.1rem;
	}
}
.fix-contact .c-contact-hours {
	margin-top: 5px;
	line-height: 1.2;
	font-size: 0.65rem;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.fix-contact .c-contact-hours {
		margin-top: 20px;
		font-size: 0.8rem;
	}
}

/*▲▲問い合わせ▲▲*/

/*====================================
クルーズオブザイヤー受賞
====================================*/
#anc_award h3 {
	font-family: "Noto Sans JP" !important;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	#anc_award {
		width: 100%;
		margin-top: 0;
		padding-top: 1px;
		background-position: center top;
	}
	#anc_award section {
		background: none;
		padding-bottom: 80px;
	}
	#anc_award h3 {
		margin-top: 0;
		padding-top: 60px;
	}
	#anc_award {
		width: 100%;
	}
	#anc_award section {
		width: 850px !important;
	}
}
/*====================================
▼旅行約款・WEBパンフレット▼
====================================*/
.notice_wrap .notice {
	display: flex;
	justify-content: center;
	padding: 4vw 0 2vw;
}
.notice_wrap .notice_box {
	background-color: #014984;
	border-radius: 1.2vw;
	width: 40vw;
	padding: 3vw;
	margin: 0 2vw 0 3vw;
	text-align: center;
	position: relative;
}
.notice_wrap .notice_box a {
	color: #fff;
	font-size: 3vw;
}
.notice_wrap .notice_box span {
	position: absolute;
	right: 2vw;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.notice_wrap .notice {
		padding-top: 60px;
		padding-bottom: 30px;
	}
	.notice_wrap .notice_box {
		border-radius: 5px;
		margin: 0 20px 0;
		padding: 15px 50px;
		width: 200px;
	}
	.notice_wrap .notice_box a {
		font-size: 15px;
	}
	.notice_wrap .notice_box span {
		position: absolute;
		right: 10px;
	}
	.notice_wrap .notice_img {
		width: 987px;
		margin: 0 auto;
	}
}
/*▲旅行約款・WEBパンフレット▲*/

/* ===================================

==================================== */
.roomIntroduction__roomList__item__flex {
	width: 49vw;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}
.room--UC .roomIntroduction__roomList__item__flex {
	min-height: 8em;
}
.roomIntroduction .roomIntroduction__roomList__item__flex--title {
	color: #333;
	font-size: 4vw;
	font-weight: normal;
	margin-bottom: 0.25em;
	white-space: nowrap;
}
.msc .roomIntroduction__roomList__item__flex {
	width: 45vw;
}
.msc .roomIntroduction__roomList__item__flex--title {
	color: #7e6027;
}
.roomWindowLabel {
	background-color: #747474;
	color: #fff;
	font-size: 3vw;
	padding: 0.5vw 1.3vw;
	margin: 0 1vw;
	border-radius: 5px;
}
.roomWindowNote {
	color: #6c6c6c;
	font-size: 2.5vw;
}
.roomDetailsModal__wrap .roomWindowLabel {
	font-size: 4vw;
	padding: 0.8vw 1.5vw;
	margin: 0 4vw;
}
.roomDetailsModal__wrap .roomWindowNote {
	color: #000000;
	font-size: 2.5vw;
}
.roomIntroduction__roomList__item__flex--spec,
.roomDetailsModal--spec {
	display: flex;
	flex-wrap: wrap;
	margin-right: -1em;
}
.roomIntroduction__roomList__item__flex--spec li,
.roomDetailsModal--spec li {
	border: 1px solid #6c6c6c;
	display: flex;
	color: #6c6c6c;
	padding: 0.25em;
	margin-right: 0.25em;
	margin-bottom: 0.25em;
	font-size: 2.8vw;
	line-height: 1em;
	align-items: center;
	letter-spacing: -0.05em;
}
.yachtclub__container .roomIntroduction__roomList__item__flex--spec li {
	color: #00133d;
	border: 1px solid #00133d;
}
.yachtclub__modal .roomDetailsModal--spec li {
	color: #fff;
	border: 1px solid #fff;
}
.roomIntroduction__roomList__item__flex--spec li sub,
.roomDetailsModal--spec li sub,
.roomDetailsModal__text sub {
	font-size: 0.8em;
	margin-bottom: -0.2em;
}
.roomIntroduction__roomList__item__flex--spec li sup,
.roomDetailsModal--spec li sup,
.roomDetailsModal__text sup {
	font-size: 0.6em;
	margin-top: -0.4em;
}
.yachtclub__flex i,
.yachtclub__title i,
.roomDetailsModal h4 i {
	display: block;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-image: url(/shopping/img/special/cruising/common/svg/ico_msc_yacht_club.svg);
	width: 1.7em;
	height: 1.3em;
}
.roomIntroduction__roomList__item__flex--spec li i,
.roomDetailsModal--spec li i {
	display: block;
	background-repeat: no-repeat;
	background-size: auto 100%;
	width: 1em;
	height: 1em;
	margin: -0.3em 0.25em -0.3em 0;
}
.roomIntroduction__roomList__item__flex--spec .area i,
.roomDetailsModal--spec .area i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_area_g.svg);
}
.yachtclub__container .roomIntroduction__roomList__item__flex--spec .area i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_area_blue.svg);
}
.yachtclub__modal .roomDetailsModal--spec .area i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_area.svg);
}
.roomIntroduction__roomList__item__flex--spec .balcony i,
.roomDetailsModal--spec .balcony i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_balcony_g.svg);
}
.yachtclub__container .roomIntroduction__roomList__item__flex--spec .balcony i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_balcony_blue.svg);
}
.yachtclub__modal .roomDetailsModal--spec .balcony i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_balcony.svg);
}
.roomIntroduction__roomList__item__flex--spec li.ship {
	margin-right: 0;
}
.roomIntroduction__roomList__item__flex--spec .ship i,
.roomDetailsModal--spec .ship i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_ship_g.svg);
	width: 1.25em;
}
.yachtclub__container .roomIntroduction__roomList__item__flex--spec .ship i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_ship_blue.svg);
}
.yachtclub__modal .roomDetailsModal--spec .ship i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_ship_wh.svg);
}
.roomIntroduction__roomList__item__flex--spec .sofa i,
.roomDetailsModal--spec .sofa i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_sofa_g.svg);
	margin: -0.5em 0.1em -0.5em -0.12em;
	width: 1.5em;
	height: 1.5em;
}
.yachtclub__container .roomIntroduction__roomList__item__flex--spec .sofa i,
.yachtclub__modal .roomDetailsModal--spec .sofa i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_sofa.svg);
}
.roomIntroduction__roomList__item__flex--spec .bed i,
.roomDetailsModal--spec .bed i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_bed_g.svg);
	margin: -0.5em 0.1em -0.5em -0.12em;
	width: 1.25em;
	height: 1.25em;
}
.yachtclub__container .roomIntroduction__roomList__item__flex--spec .bed i,
.yachtclub__modal .roomDetailsModal--spec .bed i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_bed.svg);
}
.roomIntroduction__roomList__item__flex--spec li.bath {
	margin-right: 0;
}
.roomIntroduction__roomList__item__flex--spec .bath i,
.roomDetailsModal--spec .bath i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_bath_g.svg);
}
.yachtclub__container .roomIntroduction__roomList__item__flex--spec .bath i,
.yachtclub__modal .roomDetailsModal--spec .bath i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_bath.svg);
}
.roomIntroduction__roomList__item__flex--spec .jetbath i,
.roomDetailsModal--spec .jetbath i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_jetbath_g.svg);
}
.yachtclub__container .roomIntroduction__roomList__item__flex--spec .jetbath i,
.yachtclub__modal .roomDetailsModal--spec .jetbath i {
	background-image: url(/shopping/img/special/cruising/common/svg/ico_jetbath.svg);
}
.roomIntroduction__roomList__item__flex__Btn {
	position: absolute;
	bottom: 0;
	width: 100%;
}
.roomIntroduction__roomList__item__flex--movieBtn {
	margin-bottom: 0.25em;
}
.roomIntroduction__roomList__item__flex--movieBtn a,
.roomIntroduction__roomList__item__flex--detail a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background-color: #0c265c;
	padding: 0.4em 0.5em;
	font-size: 4vw;
	border-radius: 5px;
	width: 100%;
	box-sizing: border-box;
}
.roomIntroduction__roomList__item__flex--movieBtn a {
	background-color: #4e8d54;
}
.roomIntroduction__roomList__item__flex--movieBtn a b,
.roomIntroduction__roomList__item__flex--detail a b {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 1.5em;
	height: 1.5em;
	left: 1.25em;
	background-color: #fff;
	border-radius: 50%;
}
.roomIntroduction__roomList__item__flex--movieBtn a b::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 0.6em solid #4e8d54;
	border-top: 0.45em solid transparent;
	border-bottom: 0.45em solid transparent;
	transform: translateX(0.1em);
}
.roomIntroduction__roomList__item__flex--detail a b::before,
.roomIntroduction__roomList__item__flex--detail a b::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 60%;
	height: 2px;
	background-color: #000;
}
.roomIntroduction__roomList__item__flex--detail a b::after {
	transform: rotate(90deg);
}
.roomIntroduction__BtnBlock {
	white-space: nowrap;
	width: 15em;
}
.roomIntroduction__wakeariAncBtn {
	display: flex;
	align-items: center;
	font-size: 3vw;
	color: #ed751c;
	text-decoration: underline;
}
.roomIntroduction__wakeariAncText {
	white-space: nowrap;
}
.roomIntroduction__wakeariAncBtn b {
	display: block;
	width: 1.25em;
	height: 1.25em;
	background-color: #ed751c;
	border-radius: 50%;
	position: relative;
}
.roomIntroduction__wakeariAncBtn b::after {
	position: absolute;
	top: 15%;
	left: 25%;
	display: block;
	content: "";
	width: 35%;
	height: 35%;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(135deg);
}
.roomIntroduction_Label {
	display: inline-block;
	background-color: #fff;
	color: #000;
	font-size: 3.5vw;
	line-height: 1.3;
	padding: 0.5vw 2vw;
	margin-right: 1.5vw;
	vertical-align: middle;
}
.roomDetailsModal {
	background-color: #fff;
	background-repeat: no-repeat, no-repeat;
	background-size:
		100% auto,
		100% auto;
	background-position:
		top left,
		bottom right;
	font-size: 3.5vw;
	padding: 3vw;
}
#yachtclub__modal .roomDetailsModal {
	background-color: #00133d;
}
.roomDetailsModal__wrap {
	padding: 6vw;
}
.yachtclub__modal .roomDetailsModal__wrap {
	border: solid 0.5vw #e1b151;
}
.yachtclub__modal .roomDetailsModal__wrap {
	background-color: transparent;
}
.roomDetailsModal.yachtclub__modal {
	background-color: #00133d;
	color: #e1b151;
}
.roomDetailsModal h4 {
	display: flex;
	font-size: 1.75em;
	margin-bottom: 0.5em;
	border-bottom: solid 1px #9e9e9e;
	font-family: var(--font-jp-gothic);
	font-weight: 700;
	padding-bottom: 0.25em;
	white-space: nowrap;
	letter-spacing: -0.05em;
	align-items: center;
}
.roomDetailsModal--spec {
	margin-bottom: 0.5em;
}
.roomDetailsModal--spec li {
	font-size: 1em;
}
.roomDetailsModal--spec .scaleX {
	width: auto;
	white-space: nowrap;
	transform: none;
	transform-origin: center left;
}
.roomDetailsModal--slick {
	margin: 0 auto;
}
.roomDetailsModal--slick,
.roomDetailsModal--slick .thumbnailSlick .slick-slide img,
#cruising_popup .wrap .inwrap .roomDetailsModal--slick .movie_player {
	width: 78vw;
}
.roomDetailsModal--slick .thumbnailSlick .slick-slide img,
#cruising_popup .wrap .inwrap .roomDetailsModal--slick .movie_player {
	height: 44vw;
}
.roomDetailsModal--slick .thumbnailSlick .slick-slide img {
	object-fit: cover;
}
.roomDetailsModal--slick .thumbnailSlick {
	margin-bottom: 1em;
	overflow: hidden;
}
.roomDetailsModal--slick button {
	font-size: 1em;
}
.roomDetailsModal--slick .slick-prev,
.roomDetailsModal--slick .slick-next {
	width: 1.5em;
	height: 3em;
	font-size: 1em;
	z-index: 1000;
	background: #ffffffb5;
	overflow: hidden;
	margin: 0;
	top: calc(50% - 1.5em);
}
.roomDetailsModal--slick .slick-prev {
	left: 0;
}
.roomDetailsModal--slick .slick-next {
	right: 0;
}
.roomDetailsModal--slick .slick-prev:before,
.roomDetailsModal--slick .slick-next:before {
	position: relative;
	display: block;
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	border-radius: 0;
	opacity: 1;
}
.roomDetailsModal--slick .slick-prev:before {
	transform: rotate(225deg);
	left: 0.35em;
}
.roomDetailsModal--slick .slick-next:before {
	transform: rotate(45deg);
	right: -0.15em;
}
.roomDetailsModal--slick .slick-arrow.slick-disabled {
	display: none !important;
}
.roomDetailsModal--slick .js-Slider-thumbnail {
	margin-bottom: 0;
}
.roomDetailsModal--slick .js-Slider-thumbnail .slick-track {
	transform: unset !important;
	width: 100% !important;
	display: flex;
	justify-content: center;
}
.roomDetailsModal--slick .js-Slider-thumbnail .slick-track:before,
.roomDetailsModal--slick .js-Slider-thumbnail .slick-track:after {
	display: none;
}
.roomDetailsModal--slick .js-Slider-thumbnail li {
	width: 15%;
	margin: 0 2vw;
}
.roomDetailsModal--slick .js-Slider-thumbnail li .playBtn {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #00000075;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	display: block;
	margin: auto;
}
.roomDetailsModal--slick .js-Slider-thumbnail li .playBtn:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 0.5em solid #ffffff;
	border-top: 0.35em solid transparent;
	border-bottom: 0.35em solid transparent;
	transform: translateX(0.1em);
}
.roomDetailsModal--slick .js-Slider-thumbnail .slick-slide img {
	opacity: 0.5;
}
.roomDetailsModal--slick .js-Slider-thumbnail .slick-slide.slick-active img {
	opacity: 1;
}
.roomDetailsModal__text {
	margin-top: 2em;
}
.roomDetailsModal__text--catch {
	font-weight: bold;
	white-space: nowrap;
	margin-bottom: 0.5em;
	font-size: 1.2em;
	text-align: center;
}
.roomDetailsModal__text--txt sub {
	font-size: 0.8em;
}
.roomDetailsModal__text--txt {
	margin-bottom: 2em;
}
.yachtclub__modal .roomDetailsModal__text--txt {
	color: #fff;
	margin: 0 -2vw 2em;
}
.roomDetailsModal__text--txt p {
	margin-bottom: 0.5em;
	font-size: 0.7rem;
}
.roomDetailsModal__text--lead {
	text-align: center;
	font-size: 1em;
	margin-top: 1.25em;
	line-height: 1.5;
}
.roomDetailsModal__text--note {
	margin-top: 0.25em;
	font-size: 0.8em;
}
.roomDetailsModal__border {
	border: none;
	border-top: 1px solid #9e9e9e;
	margin: 1.25em auto;
	width: 100%;
	opacity: 0.3;
}
.yachtclub__modal .roomDetailsModal__border {
	border-top: 1px solid #fff;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.roomIntroduction__roomList {
		margin: 10px 40px 0;
		justify-content: space-between;
		display: flex;
		flex-wrap: wrap;
	}
	.roomIntroduction h4,
	.roomIntroduction__roomList {
		margin-left: 12px;
		margin-right: 12px;
	}
	.roomIntroduction__roomList__item {
		padding: 10px 15px 15px;
		box-sizing: border-box;
		width: 400px;
		margin-bottom: 20px;
	}
	.dy_AB_B .roomIntroduction__BtnBlock {
		margin: 15px 0 0;
	}
	.roomIntroduction__wakeariAncBtn {
		width: 100%;
		max-width: 325px;
	}
	.roomIntroduction__roomList--slick {
		width: 176px;
	}
	.roomIntroduction__roomList--slick,
	.roomIntroduction__roomList--slick li,
	.roomIntroduction__roomList--slick button {
		font-size: 14px;
	}
	.roomIntroduction__roomList__item__flex {
		width: 175px;
		padding-bottom: 25px;
	}
	.roomIntroduction__roomList__item__flex--title {
		font-size: 18px;
	}
	.roomWindowLabel {
		font-size: 14px;
		padding: 2px 5px;
		margin: 0 4px;
	}
	.roomWindowNote {
		font-size: 12px;
	}
	.roomDetailsModal__wrap .roomWindowLabel {
		font-size: 16px;
		padding: 5px 8px;
		margin: 0 10px;
	}
	.roomDetailsModal__wrap .roomWindowNote {
		font-size: 14px;
	}
	.roomIntroduction__roomList__item__flex--spec li {
		font-size: 12px;
	}
	.roomIntroduction__roomList__item__flex--movieBtn {
		right: 6.5em;
	}
	.roomIntroduction__roomList__item__flex--detail {
		right: -0.25em;
		/*top: 7.5em;*/
	}
	.roomIntroduction__roomList__item__flex--movieBtn a,
	.roomIntroduction__roomList__item__flex--detail a {
		font-size: 13px;
	}
	.roomIntroduction__roomList__item__flex--movieBtn a b::before {
		transform: unset;
	}
	.roomIntroduction__wakeariAncBtn {
		width: 325px;
		padding: 0.25em 1em;
	}
	.dy_AB_B .roomIntroduction__wakeariAncBtn {
		width: 225px;
		font-size: 14px;
	}
	.roomIntroduction_Label {
		font-size: 16px;
		padding: 3px 12px;
		margin-right: 15px;
		vertical-align: 2px;
	}
	.roomDetailsModal {
		width: 750px;
		padding: 20px;
		font-size: 14px;
		box-sizing: border-box;
		background-size:
			45% auto,
			45% auto;
	}
	.roomIntroduction__warp {
		width: 850px;
		margin: 20px auto 0;
	}
	.roomIntroduction h3 {
		font-size: 38px;
		background-size: 1.3em auto;
		background-position:
			left + 6.2em top + 1.5em,
			right + 6.2em top + 1.5em;
	}
	.roomIntroduction h3 span {
		font-size: 0.5em;
		line-height: 1.5em;
		margin-top: 1.5em;
	}
	.roomIntroduction__comparisonLink a {
		font-size: 16px;
	}
	.roomIntroduction__comparisonLink a b {
		top: calc(50% - 6px);
	}
	#room.miryoku_back .roomIntroduction h4 {
		margin: 0 30px;
	}
	.roomIntroduction h4 {
		font-size: 20px;
		padding: 0.3em 0.5em 0.4em;
		border: none;
		margin: 20px 40px 10px;
	}
	.roomIntroduction h4::after {
		background-image: linear-gradient(to right, #b8c5d6, #fff 100%);
	}
	.roomIntroduction h4.roomIntroduction--titleB {
		background-image: linear-gradient(to right, #ed751c, #f5b361 70%, #fff0 100%);
	}
	.roomIntroduction h4.roomIntroduction--titleB::after,
	.roomIntroduction h4.roomIntroduction--titleC::after {
		background-image: linear-gradient(to right, #081566 70%, #fff0 90%);
	}
	.roomIntroduction h4.roomIntroduction--titleC {
		background-image: url(/shopping/img/special/cruising/2026viking/sweet_tit_bg.svg), linear-gradient(to right, #476a93, #8199b5 70%, #fff0 90%);
		background-repeat: no-repeat, repeat;
		background-position:
			left + 0.25em bottom + 0.25em,
			center center;
		background-size:
			5em auto,
			100% auto;
		line-height: 1.25em;
	}

	.roomIntroduction__roomList {
		margin: 10px 40px 0;
		justify-content: space-between;
		display: flex;
		flex-wrap: wrap;
	}
	.roomIntroduction h4,
	.roomIntroduction__roomList {
		margin-left: 0px;
		margin-right: 0px;
	}
	.roomIntroduction__roomList__item {
		padding: 10px 15px 15px;
		box-sizing: border-box;
		width: 415px;
		margin-bottom: 20px;
	}
	.roomIntroduction__BtnBlock {
		margin: 15px 0 0;
	}
	.roomIntroduction__wakeariAncBtn {
		font-size: 14px;
	}
	.roomIntroduction__roomList--slick {
		/*width: 176px;*/
		width: 200px;
	}
	.roomIntroduction__roomList--slick,
	.roomIntroduction__roomList--slick li,
	.roomIntroduction__roomList--slick button {
		font-size: 14px;
	}
	.roomIntroduction__roomList__item__flex {
		width: 175px;
		padding-bottom: 25px;
	}
	.msc .roomIntroduction__roomList__item__flex {
		width: 175px;
	}
	.roomIntroduction .roomIntroduction__roomList__item__flex--title {
		font-size: 18px;
	}
	.roomWindowLabel {
		font-size: 14px;
		padding: 2px 5px;
		margin: 0 4px;
	}
	.roomWindowNote {
		font-size: 12px;
	}
	.roomDetailsModal__wrap .roomWindowLabel {
		font-size: 16px;
		padding: 5px 8px;
		margin: 0 10px;
	}
	.roomDetailsModal__wrap .roomWindowNote {
		font-size: 14px;
	}
	.roomIntroduction__roomList__item__flex--spec li {
		font-size: 12px;
	}
	.roomIntroduction__roomList__item__flex--movieBtn {
		right: 6.5em;
	}
	.roomIntroduction__roomList__item__flex--detail {
		right: -0.25em;
		/*top: 7.5em;*/
	}
	.roomIntroduction__roomList__item__flex--movieBtn a,
	.roomIntroduction__roomList__item__flex--detail a {
		font-size: 16px;
	}
	.roomIntroduction_Label {
		font-size: 16px;
		padding: 3px 12px;
		margin-right: 15px;
		vertical-align: 2px;
	}
	.roomDetailsModal {
		width: 750px;
		font-size: 14px;
		box-sizing: border-box;
		background-size:
			45% auto,
			45% auto;
		padding: 10px;
	}
	.yachtclub__modal .roomDetailsModal__wrap {
		padding: 37px;
		border: solid 2px #e1b151;
	}
	.roomDetailsModal__wrap {
		padding: 25px;
	}
	.roomDetailsModal--slick,
	.roomDetailsModal--slick .thumbnailSlick .slick-slide img,
	#cruising_popup .wrap .inwrap .roomDetailsModal--slick .movie_player {
		width: 508px;
	}
	.roomDetailsModal--slick .thumbnailSlick .slick-slide img,
	#cruising_popup .wrap .inwrap .roomDetailsModal--slick .movie_player {
		height: 286px;
	}
	.roomDetailsModal--spec li {
		font-size: 16px;
	}
	.roomDetailsModal--slick .js-Slider-thumbnail li {
		margin: 0 10px;
	}
	.roomDetailsModal--slick .js-Slider-thumbnail li .playBtn {
		width: 2em;
		height: 2em;
	}
	.roomDetailsModal--slick .js-Slider-thumbnail li .playBtn:before {
		border-left: 0.5em solid #ffffff;
		border-top: 0.35em solid transparent;
		border-bottom: 0.35em solid transparent;
		transform: translateX(0.1em);
	}
	.yachtclubLp main p.roomDetailsModal__text--lead {
		font-size: 1em;
	}
	.yachtclubLp main .roomDetailsModal__text--txt p {
		font-size: 0.7rem;
	}
	.roomComparisonTable__box {
		margin: 0 auto;
	}
	.roomComparisonTable__contentsImg {
		margin: 0 auto 70px;
		width: 80%;
	}
	.roomComparisonTable__amenitiesListImg {
		margin: 0 auto;
		width: 80%;
	}
	.roomComparisonTableWrap--note.amenitiesListImg {
		margin: 0 auto;
		width: 80%;
	}
	.yachtclub__modal .roomDetailsModal__text--txt {
		margin: 10px -20px 2em;
	}

	#include_RoomIntroduction .row .details .btn {
		bottom: 25px;
		left: 0px;
		width: 100%;
		flex-wrap: nowrap;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 8%;
	}
	#include_RoomIntroduction .row .btn a {
		font-size: 24px;
		width: 326px;
		margin-top: 0;
		padding: 10px 0 12px;
	}
	#include_RoomIntroduction .wakeari .row .btn {
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	#include_RoomIntroduction .row .details .note {
		font-size: 10px;
		line-height: 115%;
		margin-top: 5px;
	}
	.introduction_img {
		position: absolute;
		right: 14px;
		top: 0px;
	}
}

.msc_service_accordion_btn {
	width: 70vw;
	background: linear-gradient(180deg, #2b6ca3 0%, #0d3d6b 100%);
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 2vw;
	font-size: 4vw;
	position: relative;
	margin: 4vw auto;
	cursor: pointer;
}
.msc_service_accordion_btn::after {
	content: "+";
	position: absolute;
	right: 2vw;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1em;
	font-weight: normal;
	line-height: 1em;
}
.msc_service_accordion_btn.active::after {
	content: "－";
}
.msc_service_accordion_box {
	display: none;
	background-color: #00133d;
}
.msc_service_accordion_box .yachtclubDetail__container {
	border: none;
	margin: 0 -6vw;
	padding-bottom: 1em;
}
.msc_service_accordion_box .yachtclubDetail__title,
.msc_service_accordion_box .yachtclubDetail__contents img {
	width: 100%;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.msc_service_accordion_btn {
		width: 330px;
		padding: 10px 5px;
		font-size: 16px;
		margin: 20px auto;
	}
	.msc_service_accordion_btn::after {
		right: 10px;
	}
	.msc_service_accordion_box {
		padding: 0 0 0 10px;
	}
}

@media (max-width: 480px) {
	/*▼----------------SP縦向きのみ読み込み(横幅480以下)----------------▼*/
	/*パンくず非表示*/
	#pankuzu {
		display: none;
	}
	/*▲----------------SP縦向きのみ読み込み(横幅480以下)----------------▲*/
}
@media (min-width: 480.1px) and (max-height: 480px) {
	/*▼----------------SP横向きのみ読み込み(横幅480以上＆縦幅480以下※縦はSP横幅)----------------▼*/
	/*パンくず非表示*/
	#pankuzu {
		display: none;
	}
	/*▲----------------SP横向きのみ読み込み(横幅480以上＆縦幅480以下※縦はSP横幅)----------------▲*/
}

/*▼---------------- 768px幅（旧iPad, Airなど）の縦向きに限定----------------▼*/
/* 9.7~11インチクラスの縦向き用スタイル */

/* @media only screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
	
} */
/* =========================================================================
Tablet & Desktop Rules 
========================================================================= */
@media (min-width: 480.1px) and (min-height: 480.1px) {




	/* =========================================
	gallery-slider ギャラリー
	========================================= */

	.slider-container {
		max-width: 1400px;
		padding: 0 40px;
		/* Room for arrows */
	}
	.slider-track-container {
		max-width: 810px;
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	.slider-track {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 50px;
		padding: 0;
	}
	.slide {
		display: block;
		flex-shrink: 0;
	}

	/* Reset mobile alignment overrides */
	.slide:nth-child(3n + 1),
	.slide:nth-child(3n + 2),
	.slide:nth-child(3n) {
		justify-content: center;
	}
	.slide.shape-landscape {
		width: 260px;
		height: 180px;
	}
	.slide.shape-portrait {
		width: 190px;
		height: 280px;
	}
	.slide-image {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	/* Slider PC Buttons */
	.slider-btn {
		height: 200px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}
	.slider-btn.prev-btn {
		top: 50%;
		transform: translateY(-50%);
	}
	.slider-btn.next-btn {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	/*▼▼▼価格表▼▼▼*/
	/* simplebar共通スタイル */
	.simplebar-content {
		padding-bottom: 16px !important;
	}
	.simplebar-track.simplebar-horizontal {
		height: 16px;
	}
	.simplebar-track.simplebar-vertical {
		width: 16px;
	}

	.room_comparison_facility {
		margin-top: 10px;
		margin-bottom: 15px;
		font-size: 14px;
	}
	.room_comparison_facility__term {
		width: 160px;
		padding: 10px;
	}
	.room_comparison_facility__desc {
		width: calc(100% - 160px);
		padding: 10px 15px;
	}
	.inline_movie .title {
		color: #fff;
		background: #0d1c4a;
		font-size: 24px;
		font-weight: bold;
		margin: 0;
		border-radius: 10px 10px 0 0;
		padding: 5px 8px 5px;
		line-height: 2em;
		text-align: center;
		font-family: "Noto Serif JP", serif;
	}
	.inline_movie .box {
		padding: 20px;
	}
	.inline_movie iframe {
		width: 800px;
		height: 450px;
	}
	.roomComparisonTable__box {
		margin: 0 auto;
	}
	.roomComparisonTable__contentsImg {
		margin: 0 auto 70px;
		width: 80%;
	}

	.yachtclubLp .RoomType_title {
		padding-bottom: 20px !important;
	}
	.yachtclubLp .all_cancel_dis_checkbox,
	.yachtclubLp .RoomType_title,
	.yachtclubLp .RoomType {
		width: 100%;
		margin: 0 auto;
	}
	.yachtclubLp .RoomType_title::before {
		width: 1.5em;
		height: 1.2em;
		display: block;
		margin: 20px auto 10px auto;
	}
	.yachtclubLp .img_price_table_MSC .name_box .name_txt,
	.yachtclubLp .img_price_table_MSC span.ship_name {
		font-size: 26px !important;
	}
	.yachtclubLp .img_price_table_MSC .name_box .name_txt,
	.yachtclubLp .img_price_table_MSC span.Price {
		font-size: 40px !important;
	}
	.yachtclubLp .RoomType_title p.cruising_title {
		font-size: 20px !important;
	}
	.yachtclubLp_normalroom_title {
		padding: 20px 0 10px 0 !important;
	}
	.yachtclubLp .RoomType_title.yachtclubLp_normalroom_title p {
		font-size: 32px !important;
	}
	.yachtclubLp .img_price_table .name_box .name_txt .ico_txt_msc {
		margin-left: -10px;
		font-size: 16px;
	}
	.yachtclubLp .img_price_table .name_box .name_txt .ico_txt_msc::before {
		left: auto;
		top: auto;
		position: static;
	}
	.yachtclubLp .msc2026autumn #date_area ul {
		width: 133%;
		justify-content: flex-start;
	}
	.yachtclubLp .msc2026autumn .RoomType_daylable ul li {
		font-size: 1em;
	}
	.yachtclubLp .img_price_table .days .day {
		justify-content: center;
	}
	.yachtclubLp .img_price_table .name_box,
	.yachtclubLp .yachtclubLp .price_table_wrap.onryMSC .img_price_table .name_box {
		min-height: 90px;
	}
	.yachtclubLp .img_price_table_MSC .name_box .name_txt .ship_name {
		margin-top: 0;
	}
	.yachtclubLp .img_price_table .name_box .name_txt {
		font-size: 30px;
	}
	.yachtclubLp .msc2026autumn .img_price_table .name_box .name_txt .great_label_wrap {
		transform: scaleX(1);
		letter-spacing: 0em;
	}
	.yachtclubLp .msc2026autumn .img_price_table .r_UMB .name_box .name_txt .ship_name .scale_x {
		transform: scaleX(1);
	}
	.yachtclubLp .img_price_table span.Price {
		font-style: normal;
	}
	.img_price_table span.Price {
		font-size: 40px !important;
	}
	.yachtclubLp .normalPriceTableAccordion__btn {
		width: 98%;
		font-size: 1.5rem;
		padding: 0.5em 1em;
		cursor: pointer;
		transition: opacity 0.5s;
	}
	.yachtclubLp .normalPriceTableAccordion__btn:hover {
		opacity: 0.6;
	}
	.yachtclubLp .outsideRoomTypeNote {
		padding: 0 0 20px;
	}
	.yachtclubLp .anc_tuizyu_endstert.note {
		text-align: left;
	}

	.yachtclubLp .confirmation_txt_box {
		box-sizing: unset;
	}

	/*▲▲▲価格表▲▲▲*/

	.msc-img-placeholder img {
		height: 100%;
		float: right;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1199px) and (orientation: portrait) {
	/* iPadが縦向きのみの記述 */
	.menu-wrapper {
		padding: 0 20px 0 0 !important;
		box-sizing: border-box;
	}

	.nav-btn {
		padding-left: 20px;
	}
	.nav-logo {
		margin-left: auto;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.nav-logo img {
		width: auto !important;
		max-width: 260px;
		height: auto !important;
	}
	/* スマホの横スクロールを解除し、PC同様に画面中央に固定 */
	.msc-map-scroll-area {
		overflow-x: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* タブレットではスワイプ案内は不要なので非表示 */
	.msc-map-swipe-indicator {
		display: none;
	}

	/* * マップ全体をそのまま縮小してiPadの画面に収める
	* ※スマホ用の1000px幅を維持したまま縮小するので、ピンの位置がズレません
	*/
	.msc-map-container {
		width: 1000px;
		max-width: none;
		/* iPadの画面幅に合わせて0.75〜0.9の間で微調整してください */
		transform: scale(0.85);
		transform-origin: center 10%; /* 上部中央を基準に縮小 */
	}
	.msc-map-text-yacht-club {
		top: 155px;
	}
	.msc-map-box-filter {
		height: 600px;
	}
	.msc-map-app-container {
		height: 690px;
	}

	.msc-map-bg-ocean,
	.msc-map-bg-gradient {
		/* 親の1000pxに依存しないよう 100vw を指定し、scale(0.85)の縮小分を相殺する */
		width: calc(100vw / 0.85);
		left: 50%;
		transform: translateX(-50%);
		height: 600px;
	}
}

/*======================================================
▼ 価格表の調整 ▼
※ヨットのレイアウトが特殊なため、こちらに記述
======================================================*/

/*書体再び明朝一括指定*/
.yachtclubLp .RoomType_title,
.yachtclubLp .table_title,
.yachtclubLp .img_price_table {
	font-family: "Yu Mincho", "游明朝", "YuMincho", "Hiragino Mincho ProN", serif !important;
}
.modal_price_table .res-tabs {
	padding: 3em;
	padding-bottom: 0;
	margin-bottom: 0;
}
.yachtclubLp .img_price_table .name_box .name_txt .ship_name {
	white-space: normal;
}
.yachtclubLp .img_price_table .name_box .name_txt .ship_name .scale_w {
	width: 100%;
}
.yachtclubLp .anc_tuizyu_endstert {
	font-size: 0.7rem;
	margin-top: 1em;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp main p.RoomType_select {
		font-size: 28px;
	}
	.yachtclubLp .RoomType_supplement_txt {
		font-size: 0.6rem;
	}
	.yachtclubLp .img_price_table_MSC .name_box .name_txt {
		padding-bottom: 0;
	}
	.yachtclubLp .modal_price_table {
		width: 976px;
	}
}

/*▼▼▼▼▼(出港２コース)春・春南国コースの設定▼▼▼▼▼*/
.yachtclubLp .price_table_wrap.msc2027spring .RoomType_select,
.yachtclubLp .price_table_wrap.msc2027spring .img_price_table .name_box,
.yachtclubLp .price_table_wrap.msc2027spr_south .RoomType_select,
.yachtclubLp .price_table_wrap.msc2027spr_south .img_price_table .name_box {
	width: calc(100% - 30vw);
	box-sizing: border-box;
	flex-shrink: 0;
}
.yachtclubLp .price_table_wrap.msc2027spring .img_price_table .days,
.yachtclubLp .price_table_wrap.msc2027spring .RoomType_daylable_days,
.yachtclubLp .price_table_wrap.msc2027spring .RoomType_daylable,
.yachtclubLp .price_table_wrap.msc2027spr_south .img_price_table .days,
.yachtclubLp .price_table_wrap.msc2027spr_south .RoomType_daylable_days,
.yachtclubLp .price_table_wrap.msc2027spr_south .RoomType_daylable {
	width: 30vw;
	box-sizing: border-box;
	flex-shrink: 0;
}
.yachtclubLp .price_table_wrap.msc2027spring .RoomType_daylable_days li,
.yachtclubLp .price_table_wrap.msc2027spring .img_price_table .days .day,
.yachtclubLp .price_table_wrap.msc2027spr_south .RoomType_daylable_days li,
.yachtclubLp .price_table_wrap.msc2027spr_south .img_price_table .days .day {
	width: calc(30vw / 2);
	box-sizing: border-box;
	flex-shrink: 0;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .price_table_wrap.msc2027spring .RoomType_select,
	.yachtclubLp .price_table_wrap.msc2027spring .img_price_table .name_box,
	.yachtclubLp .price_table_wrap.msc2027spr_south .RoomType_select,
	.yachtclubLp .price_table_wrap.msc2027spr_south .img_price_table .name_box {
		width: calc(100% - 160px);
	}
	.yachtclubLp .price_table_wrap.msc2027spring .img_price_table .days,
	.yachtclubLp .price_table_wrap.msc2027spring .RoomType_daylable_days,
	.yachtclubLp .price_table_wrap.msc2027spring .RoomType_daylable,
	.yachtclubLp .price_table_wrap.msc2027spr_south .img_price_table .days,
	.yachtclubLp .price_table_wrap.msc2027spr_south .RoomType_daylable_days,
	.yachtclubLp .price_table_wrap.msc2027spr_south .RoomType_daylable {
		width: 160px;
	}
	.yachtclubLp .price_table_wrap.msc2027spring .RoomType_daylable_days li,
	.yachtclubLp .price_table_wrap.msc2027spring .img_price_table .days .day,
	.yachtclubLp .price_table_wrap.msc2027spr_south .RoomType_daylable_days li,
	.yachtclubLp .price_table_wrap.msc2027spr_south .img_price_table .days .day {
		width: calc(160px / 2);
	}
}
/*▲▲▲▲▲(出港２コース)春・春南国コースの設定▲▲▲▲▲*/

/*▼▼▼▼▼(出港４コース)秋日本一周コースの設定▼▼▼▼▼*/
.yachtclubLp .price_table_wrap.msc2027autumn .RoomType_select,
.yachtclubLp .price_table_wrap.msc2027autumn .img_price_table .name_box {
	width: calc(100% - 40vw);
	box-sizing: border-box;
	flex-shrink: 0;
}
.yachtclubLp .price_table_wrap.msc2027autumn .img_price_table .days,
.yachtclubLp .price_table_wrap.msc2027autumn .RoomType_daylable {
	width: 40vw;
	box-sizing: border-box;
	flex-shrink: 0;
}
.yachtclubLp .price_table_wrap.msc2027autumn .RoomType_daylable_days li,
.yachtclubLp .price_table_wrap.msc2027autumn .img_price_table .days .day {
	width: calc(40vw / 4);
	box-sizing: border-box;
	flex-shrink: 0;
}
.yachtclubLp .price_table_wrap.msc2027autumn .RoomType_daylable_days li span {
	transform: scale(0.7);
	box-sizing: border-box;
	flex-shrink: 0;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .price_table_wrap.msc2027autumn .RoomType_select,
	.yachtclubLp .price_table_wrap.msc2027autumn .img_price_table .name_box {
		width: calc(100% - 320px);
	}
	.yachtclubLp .price_table_wrap.msc2027autumn .img_price_table .days,
	.yachtclubLp .price_table_wrap.msc2027autumn .RoomType_daylable {
		width: 320px;
	}
	.yachtclubLp .price_table_wrap.msc2027autumn .RoomType_daylable_days li,
	.yachtclubLp .price_table_wrap.msc2027autumn .img_price_table .days .day {
		width: calc(320px / 4);
	}
	.yachtclubLp .price_table_wrap.msc2027autumn .RoomType_daylable_days li span {
		transform: scale(1);
	}
}
/*▲▲▲▲▲(出港４コース)秋日本一周コースの設定▲▲▲▲▲*/

/*▼▼▼▼▼(出港１コース)秋南国コースのみの設定▼▼▼▼▼*/
.yachtclubLp .price_table_wrap.msc2027aut_south .RoomType_select,
.yachtclubLp .price_table_wrap.msc2027aut_south .img_price_table .name_box {
	width: calc(100% - 15vw);
	box-sizing: border-box;
	flex-shrink: 0;
}
.yachtclubLp .price_table_wrap.msc2027aut_south .img_price_table .days,
.yachtclubLp .price_table_wrap.msc2027aut_south .RoomType_daylable_days,
.yachtclubLp .price_table_wrap.msc2027aut_south .RoomType_daylable {
	width: 15vw;
	box-sizing: border-box;
	flex-shrink: 0;
}
.yachtclubLp .price_table_wrap.msc2027aut_south .RoomType_daylable_days li,
.yachtclubLp .price_table_wrap.msc2027aut_south .img_price_table .days .day {
	width: calc(15vw / 1);
	box-sizing: border-box;
	flex-shrink: 0;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .price_table_wrap.msc2027aut_south .RoomType_select,
	.yachtclubLp .price_table_wrap.msc2027aut_south .img_price_table .name_box {
		width: calc(100% - 80px);
	}
	.yachtclubLp .price_table_wrap.msc2027aut_south .img_price_table .days,
	.yachtclubLp .price_table_wrap.msc2027aut_south .RoomType_daylable_days,
	.yachtclubLp .price_table_wrap.msc2027aut_south .RoomType_daylable {
		width: 80px;
		flex-shrink: 0;
		overflow: hidden;
	}
	.yachtclubLp .price_table_wrap.msc2027aut_south .RoomType_daylable_days li,
	.yachtclubLp .price_table_wrap.msc2027aut_south .img_price_table .days .day {
		width: calc(80px / 1);
	}
}
/*▲▲▲▲▲(出港１コース)秋南国コースの設定▲▲▲▲▲*/

/*===============▲価格表の調整▲===============*/

/*==========================================================
▼▼相互リンクバナー▼▼
==========================================================*/
/* 相互リンクバナー 
-------------------*/
.moreTours {
	margin-top: 2vw;
	width: 100%;
	overflow: hidden;
	padding: 0;
	box-sizing: border-box;
}
.moreTours_link {
	margin: 0;
}
.moreTours_link a {
	display: flex;
	justify-content: center;
	align-items: center;
}
.moreTours__bannerTitle {
	width: 95vw;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: center;
}
.moreTours__bannerTitleText {
	font-size: 5vw;
	text-align: center;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.moreTours {
		margin-top: 0;
		padding: 0 80px;
	}
	.moreTours__bannerTitle {
		width: 70%;
	}
	.moreTours__bannerTitleText {
		font-size: 28px;
		line-height: 60px;
	}
}

/* 
相互リンクスライダー設定 
----------------------*/
.yachtclubLp .moreTours__bannerSlider .slick-slide {
	margin-left: auto;
	margin-right: auto;
	width: 70vw;
	transform: scale(0.85);
	transition: transform 0.3s;
	opacity: 0.5;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .moreTours__bannerSlider .slick-slide {
		width: 460px;
	}
}
.yachtclubLp .moreTours__bannerSlider .slick-slide.slick-center {
	transform: scale(1);
	opacity: 1;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .moreTours__bannerSlider .slick-slide.slick-center {
		width: 430px;
	}
}
.yachtclubLp .moreTours__bannerSlider .slick-slide a {
	pointer-events: none;
	cursor: default;
}
.yachtclubLp .moreTours__bannerSlider .slick-slide.slick-center a {
	pointer-events: auto;
	cursor: pointer;
}
/* ページネーション */
.yachtclubLp .moreTours__bannerSlider .slide-dots {
	display: flex;
	justify-content: center;
	margin-top: 3vw;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .moreTours__bannerSlider .slide-dots {
		margin-top: 0;
	}
}
.yachtclubLp .moreTours__bannerSlider .slide-dots li {
	width: 10px;
	height: 10px;
	margin: 10px 5px;
	/* background: #cccccc; */
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid #0e2341;
}
.yachtclubLp .moreTours__bannerSlider .slide-dots li:hover,
.yachtclubLp .moreTours__bannerSlider .slide-dots li.slick-active {
	background: #0e2341;
}
.yachtclubLp .moreTours__bannerSlider .slide-dots li button {
	display: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	padding: 0;
	border: none;
	background-color: transparent;
}
/* 前へ・次への矢印ボタン */
.yachtclubLp .moreTours__bannerSlider .slide-arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 10vw;
	height: 10vw;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 100vh;
	transition: all 0.3s ease;
	cursor: pointer;
	position: absolute;
	top: 45%;
	z-index: 1;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .moreTours__bannerSlider .slide-arrow {
		top: 50%;
		width: 50px;
		height: 50px;
	}
}
.yachtclubLp .moreTours__bannerSlider .prev-arrow {
	left: 7vw;
	transform: translateY(-50%) rotate(180deg);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .moreTours__bannerSlider .prev-arrow {
		left: 155px;
	}
}
.yachtclubLp .moreTours__bannerSlider .next-arrow {
	right: 7vw;
	transform: translateY(-50%);
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .moreTours__bannerSlider .next-arrow {
		right: 155px;
	}
}
.yachtclubLp .moreTours__bannerSlider .prev-arrow span,
.yachtclubLp .moreTours__bannerSlider .next-arrow span {
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-top: 2px solid #fff;
	transform: rotate(45deg);
	margin-right: 1vw;
}
@media (min-width: 480.1px) and (min-height: 480.1px) {
	.yachtclubLp .moreTours__bannerSlider .prev-arrow span,
	.yachtclubLp .moreTours__bannerSlider .next-arrow span {
		width: 15px;
		height: 15px;
		border-right: 3px solid #fff;
		border-top: 3px solid #fff;
		margin-right: 6px;
	}
}
/*===============▲相互リンクバナー▲▲===============*/




/*==========================================================
▼▼ 価格表 タブボタン ▼▼
==========================================================*/


/*===============▲▲ 価格表 タブボタン ▲▲===============*/