@charset "UTF-8";

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}
body {
	overflow-y: auto;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}
.anchor-offset {
	scroll-margin-top: 50px;
}
.button-pagetop {
	background-color: rgba(135, 221, 245, 1);
	right: 15px;
	bottom: 15px;
}
.text-link, a.text-link, .modal-btn {
	text-decoration: underline;
	font-weight: bold;
}
.cassette-list{
	.modal-btn{
		width: fit-content;
		color: #ff8a00;
		font-size: 1.6rem;
		text-align: left;
	}
}
.splide__arrows {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	margin: auto;
}
.splide__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	aspect-ratio: 1 / 1;
	border: none;
	border-radius: 50%;
	svg{
		fill: #0089dc;
		stroke: #0089dc;
		stroke-width: 2;
	}
}
.splide__arrow--prev{
	svg{
		transform: scaleX(-1);
	}
}
.splide__arrow:disabled {
	filter: grayscale(1) opacity(.4);
}
@media (min-width: 769px) {
	p {
		a:hover {
			text-decoration: underline;
		}
	}
	.w-1236 {
		max-width: 1236px;
		width: calc((1236 / 1440) * 100%);
		min-width: 886px;
		margin-inline: auto;
	}
	.button-pagetop {
		&:hover {
			bottom: 18px;
		}
	}
	.text-link{
		&:hover{
			color: #0089dc;
		}
	}
	.cassette-list{
		.modal-btn{
			&:hover{
				color: #0089dc;
			}
		}
	}
}
@media (max-width: 768px) {
	body {
		padding-bottom: 60px;
	}
	.button-pagetop {
		bottom: 70px;
	}
	.cassette-list{
		.text-link{
			font-size: 0.9em;
		}
		.modal-btn{
			font-size: 1.15em;
		}
	}
}


.page-container {
	position: relative;
	background: url(../images/bg-image.png) repeat left top / auto;
	font-size: 1.8rem;
	font-family: "IBM Plex Sans JP", sans-serif;
	button {
		font-family: "IBM Plex Sans JP", sans-serif;
	}
	img {
		vertical-align: top;
	}
	small {
		display: block;
	}
}
@media (max-width: 768px) {
	.page-container {
		font-size: 1.6rem;
	}
}

/* ---------------------------------------
	layout
  body 1920px
  main 1620 + 20px (wave)
  aside 280px + 20px (wave) fixed
  wave 40px
--------------------------------------- */
main {
	width: calc(100% - 240px);
}
.msc-nav {
	width: 265px;
}
main>section {
	padding: 0 0 100px;
}
.section-inner {
	position: relative;
	left: -30px;
	max-width: 1440px;
	width: calc((1440 / 1620) * 100%);
}
@media (min-width: 769px) and (max-width: 1536px) {
	main {
		width: calc(100% - 210px);
	}
	.msc-nav {
		width: 235px;
		padding-inline: 10px !important;
	}
}
@media (max-width: 1236px) {
	main {
		width: 986px; /* 1236 - 290 */
	}
	.section-inner {
		width: 900px;
		left: -15px;
	}
}
@media (max-width: 768px) {
	main {
		width: 100%;
	}
	.sideber {
		display: none;
	}
	main>section {
		width: 100%;
		padding: 0 20px 70px;
	}
	.section-inner {
		width: 100%;
		left: 0;
	}
}

/* ---------------------------------------
	mv
--------------------------------------- */
.mv-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.mv {
	width: 100%;
	height: 100%;
	transform: scale(1);
}
.mv-splide__track, .mv-splide__slide {
	width: 100%;
	height: 100%;
}
.splide__track--fade>.splide__list>.splide__slide {
	display: block;
}
.mv-splide__slide {
	background-size: auto 100%;
	background-position: top right;
	background-repeat: no-repeat;
}
.mv-slide1 {
	background-image: url('../images/mv1.webp');
}
.mv-slide2 {
	background-image: url('../images/mv2.webp');
}
.mv-slide3 {
	background-image: url('../images/mv3.webp');
}
.mv-slide4 {
	background-image: url('../images/mv4.webp');
}
.mv.bg-zoom-in {
	animation: bgZoomIn 1.2s ease-out;
	transform: scale(1.05);
}
.mv-inner {
	position: absolute;
	top: 0;
	width: calc(100% - 300px);
	height: 100%;
	padding-top: 45px;
	padding-left: 90px;
}
.main-title-wrap {
	position: relative;
	width: fit-content;
	margin: auto;
	padding: 35px 125px;
	background-color: rgba(255, 255, 255, .5);
	border-radius: 9999px;
}
h1 {
	color: #0089dc;
	font-weight: bold;
	font-size: 2.4rem;
	text-align: center;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
@media (min-width: 1237px) and (max-width: 1600px) {
	h1 {
		font-size: calc(24 / 1700 * 100vw);
	}
	.main-title-wrap {
		width: calc(1085 / 1700 * 100vw);
		padding: calc(35 / 1700 * 100vw) calc(125 / 1700 * 100vw);
	}
}
@media (min-width: 769px) and (max-width: 1536px) {
	.mv-inner {
		width: calc(100% - 255px);
	}
}
@media (min-width: 769px) and (max-width: 1236px) {
	h1 {
		font-size: 17px;
	}
	.main-title-wrap {
		width: 799px;
		padding: 25px 92px;
	}
}
@media (min-width: 769px) {
	.logo {
		width: 130px;
	}
	.mv-container {
		aspect-ratio: 1920 / 900;
		min-width: 1236px;
		min-height: 579px;
	}
}
@media (max-width: 768px) {
	.mv-container {
		aspect-ratio: 75 / 58;
	}
	.mv-slide1 {
		background-image: url('../images/mv1-sp.webp');
	}
	.mv-slide2 {
		background-image: url('../images/mv2-sp.webp');
	}
	.mv-slide3 {
		background-image: url('../images/mv3-sp.webp');
	}
	.mv-slide4 {
		background-image: url('../images/mv4-sp.webp');
	}
	.mv-inner {
		width: 100%;
		padding-top: calc(40 / 750 * 100vw);
		padding-left: calc(69 / 750 * 100vw);
	}
	.main-title-wrap {
		padding: calc(20 / 750 * 100vw) calc(65 / 750 * 100vw);
	}
	h1 {
		font-size: calc(22 / 750 * 100vw);
		line-height: 1.4;
	}
	.main-title {
		width: calc(450 / 750 * 100vw);
	}
}

@keyframes bgZoomIn {
	0% {
		transform: scale(1);
		/* opacity: 0; */
	}
	100% {
		transform: scale(1.05);
		/* opacity: 1; */
	}
}
.loop-text-content {
	display: flex;
	flex-direction: column;
	gap: calc(10 / 1920 * 100vw);
	align-items: center;
}
.loop-text-container {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: #ff5394;
	padding-top: 30px;
	width: calc(90 / 1920 * 100vw);
	height: 100%;
	color: #ffffff;
	overflow: hidden;
	/* テキストがはみ出さないように */
}
.loop-text-content {
	display: flex;
	flex-direction: column;
	/* animation: scrollDownLoop 10s linear infinite; */
}
.loop-text {
	width: fit-content;
	/* 1行分の高さと一致させる */
	height: calc(665 / 1920 * 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(34 / 1920 * 100vw);
	letter-spacing: 0.15em;
	writing-mode: vertical-rl;
	white-space: nowrap;
}
/* 最初の1回だけ高さを伸ばす */
.loop-text-content.initial-show {
	overflow: hidden;
	height: 0;
	animation: expandText 3s ease-out forwards;
}
/* 2つ目のテキストは最初は隠す */
.initial-show .loop-text.clone1 {
	display: none;
}
/* initial-showが外れたら表示 */
.loop-text-content .loop-text.clone1 {
	display: block;
}
.loop-text-content .loop-text.clone2 {
	opacity: 0;
	animation: showCloneText 0.1s linear 12s forwards;
}

@keyframes showCloneText {
	to {
		opacity: 1;
	}
}

@media (max-width: 768px) {
	.loop-text-container {
		width: calc(70 / 750 * 100vw);
		padding-top: calc(20 / 750 * 100vw);
	}
	.loop-text-content {
		gap: calc(10 / 750 * 100vw);
	}
	.loop-text {
		height: calc(550 / 750 * 100vw);
		font-size: calc(28 / 750 * 100vw);
	}
}
@keyframes expandText {
	from {
		height: 0;
	}
	to {
		height: calc(675 / 1920 * 100vw);
	}
}
/* ループアニメーション */
.scroll-loop {
	animation: scrollDownLoop 10s linear infinite;
}
@keyframes scrollDownLoop {
	0% {
		transform: translateY(calc(-675 / 1920 * 100vw));
	}
	100% {
		transform: translateY(0);
	}
}
@media (max-width: 768px) {
	@keyframes expandText {
		from {
			height: 0;
		}
		to {
			height: calc(560 / 750 * 100vw);
		}
	}
	@keyframes scrollDownLoop {
		0% {
			transform: translateY(calc(-560 / 750 * 100vw));
		}
		100% {
			transform: translateY(0);
		}
	}
}

/* ---------------------------------------
	sideber
--------------------------------------- */
.sideber {
	overflow: hidden;
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	height: 100%;
	transition: .2s ease-in-out;
}
.msc-nav-base {
	display: flex;
	height: 100vh;
	position: relative;
	z-index: 1;
}
.msc-nav-container {
	padding: 40px 15px 0 0;
	background: url(../images/bg-sideber.jpg) repeat-y center top / 100%;
}
.msc-nav {
	display: flex;
	flex-direction: column;
	padding: 0 20px 10px;
	max-height: 90vh;
	overflow-y: auto;
	scrollbar-width: thin;
	/* Firefox用（細く） */
	scrollbar-color: rgba(135, 221, 245, 1) transparent;
}
/* Chrome / Edge / Safari などWebkit系 */
.msc-nav::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
.msc-nav::-webkit-scrollbar-track {
	background: transparent;
}
.msc-nav::-webkit-scrollbar-thumb {
	background-color: rgba(135, 221, 245, 0.3);
	border-radius: 4px;
	transition: background-color 0.3s;
}
.msc-nav::-webkit-scrollbar-thumb:hover {
	background-color: rgba(135, 221, 245, 1);
}
.msc-nav-list {
	gap: 13px;
}
a.msc-nav-link {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 27px;
	color: #ffffff;
	font-weight: 500;
	line-height: 1;
	&::before {
		content: "";
		display: inline-block;
		width: 25px;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto;
	}
}
.msc-nav-link[href="#pickup"] {
	&::before {
		background-image: url(../images/bg-nav-pickup.png);
	}
}
.msc-nav-link[href="#movie"] {
	&::before {
		background-image: url(../images/bg-nav-movie.png);
	}
}
.msc-nav-link[href="#about"] {
	&::before {
		background-image: url(../images/bg-nav-about.png);
	}
}
.msc-nav-link[href="#features"] {
	&::before {
		background-image: url(../images/bg-nav-features.png);
	}
}
.msc-nav-link[href="#cabins"] {
	&::before {
		background-image: url(../images/bg-nav-cabins.png);
	}
}
.msc-nav-link[href="#yacht-club"] {
	&::before {
		background-image: url(../images/bg-nav-yacht-club.png);
	}
}
.msc-nav-link[href="#pricing"] {
	&::before {
		background-image: url(../images/bg-nav-pricing.png);
	}
}
.msc-nav-link[href="#spots"] {
	&::before {
		background-image: url(../images/bg-nav-spots.png);
	}
}
.msc-nav-link[href="#ships"] {
	&::before {
		background-image: url(../images/bg-nav-ships.png);
	}
}
.msc-nav-link[href="#tours"] {
	&::before {
		background-image: url(../images/bg-nav-tour.png);
	}
}
.msc-nav-link[href="#faq"] {
	&::before {
		background-image: url(../images/bg-nav-faq.png);
	}
}
.msc-nav-link-container {
	height: 100%;
}
.msc-nav-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100px;
	border-radius: 15px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	span {
		position: relative;
		top: 1px
	}
}
.msc-nav-button:focus {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	border-radius: 12px;
}
a.msc-reservation-link {
	background-color: #ff8a00;
	outline: 2px solid #ffffff;
	outline-offset: -7px;
	color: #ffffff;
}
a.msc-tour-link {
	background-color: #ffffff;
	outline: 2px solid #ff8a00;
	outline-offset: -7px;
	font-size: 1.8rem;
	color: #ff8a00;
	border: none;
}
@media (min-width: 769px) {
	.sideber {
		position: absolute;
		top: 0;
		right: 0;
	}
}
@media (min-width: 769px) and (max-width: 1236px) {
	.sideber {
		right: auto !important;
		left: 935px;
	}
}
@media (min-width: 769px) {
	#sideber.is-hidden {
		transform: translateX(310px);
	}
	a.msc-nav-link {
		&:hover {
      color: #fae561;
      text-shadow: 2px 2px 0 #0376d1, -2px -2px 0 #0376d1, -2px 2px 0 #0376d1, 2px -2px 0 #0376d1, 0px 2px 0 #0376d1, 0 -2px 0 #0376d1, -2px 0 0 #0376d1, 2px 0 0 #0376d1;
			&::before {
				animation: pico-tilt2 0.3s ease;
			}
		}
	}
	.msc-nav .msc-nav-button {
		&:hover {
			animation: pico-tilt 0.3s ease;
		}
	}
	.sp-bottom-nav {
		display: none;
	}
	.msc-nav-close-btn {
		display: none;
	}
}
@media (max-width: 768px) {
	.sideber {
		position: fixed;
		top: 0px;
		right: 0px;
		z-index: 100000;
		align-items: center;
		width: 100%;
		padding-bottom: 70px;
		background-color: rgba(193, 231, 255, .5);
	}
	.msc-nav-base {
		width: 80%;
		max-width: 300px;
		height: fit-content;
		max-height: 80vh;
		margin-inline: auto;
		padding-block: 0px;
		border-radius: 20px;
	}
	.msc-nav {
		width: 100%;
		height: 100%;
	}
	.msc-nav-container {
		width: 100%;
		padding: 40px 10px;
		border-radius: 20px;
		background: url(../images/bg-sideber-sp.jpg) no-repeat center / cover;
	}
	.msc-nav-button {
		height: 70px;
		font-weight: normal;
		line-height: 1.2;
		font-size: 1.6rem;
		span {
			position: relative;
		}
	}

	.msc-nav-close-btn {
		position: absolute;
		right: -20px;
		top: -20px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 60px;
		background-color: #ffffff;
		border-radius: 9999px;
		border: none;
		overflow: hidden;
	}
	.msc-nav-close-btn-bar {
		&::before, &::after {
			content: '';
			display: block;
			height: 5px;
			width: 30px;
			background-color: #0083da;
			border-radius: 9999px;
			transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease-in-out;
		}
		&::before {
			transform: translateY(35px);
		}
		&::after {
			transform: translateY(35px)
		}
	}
	.sideber.is-open .msc-nav-close-btn-bar {
		&::before {
			transform: translateY(2px) rotate(-45deg);
			transition-delay: 0.1s;
		}
		&::after {
			transform: translateY(-2.5px) rotate(-135deg);
			transition-delay: 0.2s;
		}
	}

	.sp-bottom-nav {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 100001;
	}
	.sp-bottom-nav-list {
		display: flex;
		li {
			flex: 1;
		}
	}
	a.sp-bottom-nav-link {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 7px;
		height: 60px;
		background-color: #ffffff;
		color: #0083da;
		font-size: 1.2rem;
		font-weight: 700;
		line-height: 1;
		border-left: 2px dotted #c8eafe;
		&::before {
			content: "";
			width: 100%;
			height: 18px;
			background-repeat: no-repeat;
			background-position: center;
		}
	}
	.sp-bottom-nav-link[href="#pickup"] {
		border: none;
		&::before {
			background-image: url(../images/bg-nav-pickup-sp.png);
			background-size: 17px;
		}
	}
	.sp-bottom-nav-link[href="#about"] {
		&::before {
			background-image: url(../images/bg-nav-about-sp.png);
			background-size: 18px;
		}
	}
	.sp-bottom-nav-link[href="#features"] {
		&::before {
			background-image: url(../images/bg-nav-features-sp.png);
			background-size: 18px;
		}
	}
	.sp-bottom-nav-link[href="#cabins"] {
		&::before {
			background-image: url(../images/bg-nav-cabins-sp.png);
			background-size: 18px;
		}
	}
	.msc-nav-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: #c8eafe;
		border: none;
		overflow: hidden;
	}
	.msc-nav-btn-bar.-open {
		background: #0083da;
		height: 5px;
		width: 27px;
		border-radius: 9999px;
		transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease-in-out;
		transform: translateY(5px);
		&::before,
		&::after {
			content: '';
			display: block;
			height: 5px;
			width: 27px;
			background-color: #0083da;
			border-radius: 9999px;
			transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease-in-out;
		}
		&::before {
			transform: translateY(-10px);
		}
		&::after {
			transform: translateY(5px);
		}
	}

	.msc-nav-btn.is-hidden .msc-nav-btn-bar.-open::before {
		transform: translateY(-20px);
	}
	.msc-nav-btn.is-hidden .msc-nav-btn-bar.-open {
		transform: translateY(-40px);
		transition-delay: 0.1s;
	}
	.msc-nav-btn.is-hidden .msc-nav-btn-bar.-open::after {
		transform: translateY(-20px);
		transition-delay: 0.2s;
	}

	.msc-nav-btn-bar.-close {
		background-color: transparent;
		transform: translateY(70px);
		&::before, &::after {
			content: '';
			display: block;
			height: 5px;
			width: 27px;
			background-color: #0083da;
			border-radius: 9999px;
			transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s ease-in-out;
		}
		&::before {
			transform: translateY(0);
		}
		&::after {
			transform: translateY(-5px);
		}
	}
	.msc-nav-btn.is-hidden .msc-nav-btn-bar.-close {
		&::before {
			transform: translateY(-70px) rotate(-45deg);
		}
		&::after {
			transform: translateY(-75px) rotate(-135deg);
			transition-delay: 0.1s;
		}
	}

	a.sp-bottom-nav-link.-reserve {
		background-color: #ff7f00;
		color: #ffffff;
		border: none;
		&::before {
			background-image: url(../images/bg-nav-reserve.png);
			background-size: 18px;
		}
	}
}

@media (max-width: 768px) {
	#sideber {
		opacity: 0;
		visibility: hidden;
	}
	#navContent {
		max-height: 80vh;
		transition: max-height 0.5s ease-in-out;
	}

	#sideber.is-open {
		opacity: 1;
		visibility: visible;
		.nav-toggle-before {
			transform: rotate(180deg);
			animation: none;
		}
		.nav-toggle-before:after {
			transform: translate(-50%, -50%) rotate(90deg);
		}
		#navContent {
			animation: pico3 0.32s cubic-bezier(.34,1.56,.64,1);
		}
	}
}
@media (min-width: 769px) {
	#waveCanvas {
		position: relative;
		left: 1px;
		display: block;
		width: 40px;
		height: 100%;
	}
}
@media (max-width: 768px) {
	#waveCanvas {
		display: none;
	}
}




/* ---------------------------------------
	section common
--------------------------------------- */
main>section {
	position: relative;
	text-align: center;
	&::before {
		content: "";
		position: absolute;
		top: -44px;
		left: 0;
		right: 0;
		margin-inline: auto;
		width: 120px;
		height: 120px;
		background-color: #faf6e8;
		border-radius: 9999px;
	}
	&::aftrer {
		content: '';
		display: block;
		height: 50px;
		margin-top: -50px;
		visibility: hidden;
	}
}
.section-inner {
	margin-inline: auto;
}

section h2 {
	position: relative;
	width: fit-content;
	margin: auto;
	margin-bottom: 60px;
	color: #0089dc;
	font-family: "IBM Plex Sans JP", sans-serif;
	font-size: 4.8rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	&::before {
		content: "";
		position: relative;
		top: -20px;
		display: block;
		text-align: center;
	}
	>span {
		display: block;
	}
}
.h2-jp {
	span {
		font-size: 0.85em;
	}
}
.h2-jp.-sm {
	font-size: 0.58em;
}
.h2-en {
	margin-top: 15px;
	font-size: 1.6rem;
}
h2.is-visible, .ships-block-title.is-visible {
	&::before {
		animation: pico-tilt2 0.3s ease 0.2s;
	}
}
@media (min-width: 769px) {
	main>section {
		&::before {
			left: -60px;
		}
	}
	section h2 {
		position: relative;
		left: -30px;
	}
}


h3 {
	font-weight: bold;
}
h3.border-bottom-dotted {
	background-image: linear-gradient(to right, #004f96 3px, transparent 3px);
	background-size: 6px 3px;
	background-repeat: repeat-x;
	background-position: bottom;
	text-align: left;
	color: #004f96;
}
[class$="headline"] {
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.4;
}
.btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 95%;
	margin-inline: auto;
	font-size: 2.4rem;
	font-weight: bold;
	border-radius: 9999px;
	line-height: 1.4;
	&::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 40px;
		width: 11px;
		height: 11px;
		transform: rotate(45deg) translateY(-60%);
	}
	span {
		position: relative;
		top: 3px;
	}
}
.btn.-orange {
	max-width: 600px;
	background-color: #ff7f00;
	&::after {
		border-top: solid 3px #ffffff;
		border-right: solid 3px #ffffff;
	}
}
a.btn.-orange {
	color: #ffffff;
}
[class$="-image-wrap"] {
	position: relative;
}
[class$="-caption"] {
	position: absolute;
	text-align: right;
}
[class*="-pict"] {
	position: absolute;
}
@media (min-width: 769px) {
	.btn.-orange {
		height: 100px;
	}
	.btn:hover {
		animation: pico-tilt 0.2s ease;
	}
}
.lazy_image-wrap {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	&::before {
		content: "";
		display: block;
	}
	img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.bg-default {
  background-color: #faf6e8;
}
@media
 (max-width: 768px) {
	section h2 {
		margin-bottom: 40px;
		font-size: 2.6rem;
		line-height: 1.4;
		&::before{
			top: -10px;
		}
	}
	.h2-en {
		margin-top: 0;
	}
	[class$="headline"] {
		font-size: 2.0rem;
	}
	.btn {
		height: 80px;
		font-size: 1.8rem;
		line-height: 1.2;
		&::after {
			right: 25px;
		}
		span {
			top: 1px;
		}
	}
}

/* ---------------------------------------
	pickup
--------------------------------------- */
.pickup {
	padding-top: 100px;
	background: url(../images/bg-image.png) repeat left top / auto;
	h2 {
		position: relative;
		width: fit-content;
		margin-bottom: 80px;
		color: #ffdd09;
		font-size: 3.2rem;
	}
	&::before {
		display: none;
	}
}


.pickup-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: 30px;
	>li {
		display: flex;
		flex-direction: column;
		position: relative;
		max-width: 480px;
		width: 100%;
		/* margin-inline: auto; */
	}
}
.pickup-item-title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	background-color: #ff8a00;
	border-radius: 20px 20px 0 0;
	color: #ffffff;
	font-size: 2.6rem;
	line-height: 1.2;
	br.tab {
		display: none;
	}
	span {
		position: relative;
		top: 3px;
	}
}
.pickup-item-inner {
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex: 1;
	position: relative;
	padding: 20px 30px 55px;
	background-color: #ffffff;
	border-radius: 0 0 20px 20px;
	background: #ffffff url(../images/bg-pickup-item.png) no-repeat bottom center / 100%;
	small{
		line-height: 1.2;
	}
}
.pickup-image-wrap {
	&::before {
		aspect-ratio: 400 / 267;
	}
}
.pickup-info-image {
	border-radius: 20px;
}
.pickup-image-caption {
	right: 13px;
	bottom: 6px;
	color: #ffffff;
	font-size: 1.3rem;
	font-weight: 500;
	text-shadow: 1px 1px 0 #333333, -1px -1px 0 #333333, -1px 1px 0 #333333, 1px -1px 0 #333333, 0px 1px 0 #333333, 0 -1px 0 #333333, -1px 0 0 #333333, 1px 0 0 #333333;
	letter-spacing: 0.05em;
}
.pickup-list ._price {
	height: 125px;
	margin-top: 10px;
}
a.pickup-item-btn{
	color: #ff8a00;
}
.pickup-item-btn{
  display: block;
	width: 100%;
  margin-inline: auto;
	padding: 8px 0 5px;
	border-radius: 9999px;
	background-color: #ffecd7;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.2;
	border: 2px solid #ff8a00;
}
.bottom-item{
	margin-top: auto;
}
@media (min-width: 1367px) and (max-width: 1536px) {
	.pickup-item-title {
		font-size: calc(30 / 1920 * 100vw);
	}
}
@media (max-width: 1366px) {
	.pickup-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 769px){
	.pickup-list {
		>li:nth-child(odd) {
			justify-self: end;
		}
	}
	.pickup-item-btn:hover{
		animation: pico-tilt 0.2s ease;
	}
}
@media (max-width: 768px) {
	.pickup {
		padding-top: 55px;
		h2 {
			margin-bottom: 40px;
			font-size: 2.2rem;
		}
	}
	.pickup-list {
		width: fit-content;
		margin-inline: auto;
	}
	.pickup-item-inner {
		gap: 10px;
		padding-inline: 20px;
	}
	.pickup-item-title {
		height: calc(100 / 750 * 100vw);
		max-height: 70px;
		background-size: auto 100%, auto 100%;
		font-size: 2.0rem;
		line-height: 1;
		&::before {
			top: 20px;
			right: 52px;
		}
	}
}
@media (max-width: 743px) {
	.pickup-list {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------
	update
--------------------------------------- */
.update {
	padding-top: 100px;
	background: url(../images/bg-image.png) repeat left top / auto;
	color: #ffffff;
	h2 {
		position: relative;
		width: fit-content;
		margin-inline: auto;
		color: #ffdd09;
		font-size: 5.6rem;
	}
	&::before {
		display: none;
	}
}
@media (max-width: 768px) {
	.update {
		padding-top: 100px;
		h2 {
			color: #ffdd09;
			font-size: 2.8rem;
		}
	}
}

/* ---------------------------------------
	movie
--------------------------------------- */
.movie {
	h2 {
		&::before {
			content: url(../images/bg-movie-title-top.png);
		}
	}
}
.movie-block {
	position: relative;
	padding-block: 70px 60px;
	background: url(../images/bg-movie.png) repeat top center / auto;
	border-radius: 30px;
}
.movie-wrap {
	width: fit-content;
	margin-inline: auto;
}

@media (min-width: 1237px) and (max-width: 1536px) {
	.movie-block {
		width: 100%;
	}
}
@media (min-width: 769px) and (max-width: 1236px) {
	.movie-block {
		width: 100%;
	}
}
@media (max-width: 768px) {
	.movie-block {
		width: calc(600 / 750 * 100vw);
		padding-block: 40px;
		margin-inline: auto;
	}
}
@media (max-width: 600px) {
	.movie-block {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		border-radius: 0;
	}
}

/* ---------------------------------------
	about
--------------------------------------- */
.about {
	padding-bottom: 0;
	background: url(../images/bg-about.png) repeat left top / auto;
	&::before {
		background: linear-gradient(to bottom, rgba(0, 123, 198, 1) 0%, rgba(0, 123, 198, 1) 37%, rgba(0, 123, 198, 0) 37%, rgba(0, 123, 198, 0) 100%);
	}
	h2 {
		color: #ffffff;
		&::before {
			content: url(../images/bg-about-title-top.png);
		}
	}
	.section-inner {
		padding-bottom: 110px;
	}
}
.features {
	h2 {
		color: #ffffff;
		&::before {
			content: url(../images/bg-features-title-top.png);
		}
	}
}

/* ship-map-block
----------------------------------------*/
.ship-map-block {
	padding: 45px 0 0;
	background-color: #ffffff;
	background-image: url(../images/bg-ship-map-block.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: auto;
	border-radius: 30px;
}
.ship-map-block-inner {
	position: relative;
}
.ship-map {
	position: relative;
	width: 100%;
	height: calc(560 / 1920 * 100vw);
	max-height: 553px;
	min-height: 397px;
	background: url(../images/image-ship-map.png) no-repeat left top / 100%;
}
.ship-map-item {
	position: absolute;
	display: inline-block;
	padding: 4px 10px 1px;
	background-color: #0a3388;
	border: 1px solid #ffffff;
	border-radius: 9999px;
	color: #ffffff;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
}
.map-detail-wrap {
	margin-top: -100px;
}
.map-detail {
	position: relative;
	min-height: 240px;
	background-color: #ffffff;
	border-radius: 30px;
	padding: 40px 61px;
}
.map-icon {
	position: absolute;
	top: -15px;
	right: 5px;
}
.map-image-wrap{
	aspect-ratio: 500 / 333;
}
.map-image {
	border-radius: 20px;
	border: 6px solid #ffdc00;
}
.map-desc {
	position: relative;
	width: 100%;
	text-align: left;
}
.map-title {
	padding-bottom: 10px;
	margin-bottom: 25px;
	font-size: 2.4rem;
}
.ship-map-item.is-active {
	background-color: #ffdc00;
	color: #0a3388;
	border-width: 3px;
}
@media (min-width: 769px) {
  .ship-map{
    overflow-x: hidden;
  }
	.map-image-wrap {
		position: absolute;
		width: 400px;
		top: -75px;
		left: 61px;
	}
	.map-desc {
		padding-left: 430px;
	}
	.splide__pagination__page:hover {
		background-color: #ffdc00;
		color: #0a3388;
		border-width: 3px;
		animation: pico-tilt 0.3s ease;
	}
}
@media (min-width: 769px) and (max-width: 1919px) {
	.map-image-wrap {
		width: calc(400 / 1920 * 100vw);
		top: calc(-75 / 1920 * 100vw);
	}
	.map-desc {
		padding-left: calc(430 / 1920 * 100vw);
	}
}
@media (min-width: 1237px) and (max-width: 1536px) {
	.map-detail {
		padding: 40px calc(61 / 1920 * 100vw);
	}
	.map-image-wrap {
		left: calc(61 / 1920 * 100vw);
	}
}
@media (min-width: 769px) and (max-width: 1236px) {
	.map-detail {
		padding: 40px;
	}
	.map-image-wrap {
		width: 260px;
		top: -50px;
		left: 40px;
	}
	.map-desc {
		padding-left: 280px;
	}
}
@media (max-width: 768px) {
	.about {
		h2 {
			margin-bottom: 50px;
		}
		.section-inner {
			padding-bottom: 15px;
		}
	}
	.features h2 {
		margin-bottom: 30px;
	}
	.ship-map-block {
		padding-top: 0;
	}
	.ship-map-block-inner {
		position: relative;
		top: -30px;
	}
	.ship-map-wrap {
		position: relative;
		z-index: 1;
		overflow-y: auto;
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		padding-left: 10px;
	}
	.ship-map {
		max-height: initial;
		min-height: initial;
		width: 1010px;
		height: 450px;
		background-size: 1000px;
	}
	.map-detail-wrap {
		padding-inline: 20px;
		margin-top: -60px;
		z-index: 1;
	}
	.map-icon {
		top: 10px;
		right: 27px;
		width: calc(100 / 750 * 100vw);
	}
	.map-image-wrap {
		width: calc(510 / 750 * 100vw);
		margin-inline: auto;
		border-width: 3px;
		margin-top: calc(-100 / 750 * 100vw);
	}
	.map-image {
		border-width: calc(6 / 750 * 100vw);
	}
	.map-detail {
		gap: 0;
		flex-direction: column;
		min-height: initial;
		border-radius: 20px;
		padding: 0;
	}
	.map-desc {
		height: auto;
		padding: 20px 25px;
	}
	.map-title {
		padding-bottom: 4px;
		font-size: 2.0rem;
	}
}

/* map button
----------------------------------------*/
[data-map-name="受付"] { top: 286px; left: 490px; }
[data-map-name="ウォーキングトラック"] { top: 123px; left: 554px; }
[data-map-name="屋内プール"] { top: 221px; left: 800px; }
[data-map-name="カジノ"] { top: 166px; left: 255px; }
[data-map-name="カルーセルラウンジ"] { top: 135px; left: 5px; }
[data-map-name="プロムナード"] { top: 325px; left: 740px; }
[data-map-name="キッズエリア"] { top: 108px; left: 223px; }
[data-map-name="キッズクラブ"] { top: 62px; left: 80px; }
[data-map-name="ロンドンシアター"] { top: 413px; left: 922px; }
[data-map-name="ショッピング"] { top: 333px; left: 510px; }
[data-map-name="ショコラトリー"] { top: 367px; left: 702px; }
[data-map-name="スカイラウンジ"] { top: 151px; left: 405px; }
[data-map-name="ステーキハウス"] { top: 153px; left: 676px; }
[data-map-name="寿司バー/鉄板焼き"] { top: 224px; left: 548px; }
[data-map-name="バー"] { top: 244px; left: 478px; }
[data-map-name="プール"] { top: 24px; left: 50px; }
[data-map-name="プールエリア"] { top: 188px; left: 715px; }
[data-map-name="ボーリング"] { top: 90px; left: 115px; }
[data-map-name="メインダイニング"] { top: 230px; left: 130px; }
[data-map-name="レストラン"] { top: 178px; left: 22px; }
[data-map-name="MSC ジム"] { top: 90px; left: 460px; }
[data-map-name="MSCヨットクラブ"] { top: 261px; left: 980px; }
[data-map-name="ビュッフェ"] { top: 87px; left: 0px; }
[data-map-name="アクアパーク"] { top: 17px; left: 220px; }
[data-map-name="MSCアウレアスパ"] { top: 320px; right: 0; }
@media (max-width: 1919px) {
	[data-map-name="受付"] { top: 51.72%; left: 39.64%; }
	[data-map-name="ウォーキングトラック"] { top: 21.5%; left: 45%; }
	[data-map-name="屋内プール"] { top: 43.39%; left: 64.72%; }
	[data-map-name="カジノ"] { top: 30.02%; left: 20.63%; }
	[data-map-name="カルーセルラウンジ"] { top: 24.41%; left: 1%; }
	[data-map-name="プロムナード"] { top: 58.77%; left: 59.87%; }
	[data-map-name="キッズエリア"] { top: 22.53%; left: 19.04%; }
	[data-map-name="キッズクラブ"] { top: 10%; left: 6.47%; }
	[data-map-name="ロンドンシアター"] { top: 74.68%; left: 74.60%; }
	[data-map-name="ショッピング"] { top: 60.47%; left: 41.26%; }
	[data-map-name="ショコラトリー"] { top: 66.36%; left: 56.80%; }
	[data-map-name="スカイラウンジ"] { top: 27.31%; left: 32.77%; }
	[data-map-name="ステーキハウス"] { top: 27.67%; left: 54.69%; }
	[data-map-name="寿司バー/鉄板焼き"] { top: 41%; left: 44.34%; }
	[data-map-name="バー"] { top: 44.12%; left: 38.67%; }
	[data-map-name="プール"] { top: 4%; left: 4.05%; }
	[data-map-name="プールエリア"] { top: 34.00%; left: 57.85%; }
	[data-map-name="ボーリング"] { top: 17%; left: 11%; }
	[data-map-name="メインダイニング"] { top: 41.59%; left: 10.52%; }
	[data-map-name="レストラン"] { top: 32.19%; left: 1.78%; }
	[data-map-name="MSC ジム"] { top: 15%; left: 37.22%; }
	[data-map-name="MSCヨットクラブ"] { top: 47.19%; left: 79.29%; }
	[data-map-name="ビュッフェ"] { top: 16%; }
	[data-map-name="アクアパーク"] { top: 3.07%; left: 17.80%; }
	[data-map-name="MSCアウレアスパ"] { top: 57.50%; }
}
@media (max-width: 1536px) {
  .ship-map-item { font-size: 1.5rem; }
}
@media (max-width: 1366px) {
  .ship-map-item { font-size: 1.4rem; }
  [data-map-name="キッズエリア"] { top: 22.53%; left: 20%; }
  [data-map-name="バー"] { top: 44.12%; left: 38%; }
}
@media (max-width: 768px) {
  [data-map-name="ビュッフェ"] { top: 16%; left: -0.5%; }
}

.scroll-hint-icon {
	width: 180px;
	left: calc(50% - 90px);
	top: 30%;
}
.scroll-hint-text {
	font-size: 16px;
}
.scroll-hint-shadow-wrap::after {
	display: none;
}
.scroll-hint-shadow-wrap::before {
	display: none;
}

/* map-splide
----------------------------------------*/
.map-splide__track {
	padding-top: 120px;
}
.map-splide__slide.is-visible {
	.map-image {
		transform: scale(1);
		animation: pico-tilt 0.2s ease-out;
	}
}
.map-splide__list {
	transition: transform 0.6s ease !important;
}
.map-splide{
	.splide__arrows{
		top: calc(50% + 25px);
	}
	.splide__arrow{
		background-color: #c8eafe;
	}
	.splide__arrow--prev{
		left: -50px;
	}
	.splide__arrow--next{
		left: 50px;
	}
	.splide__arrow {
		position: relative;
		width: 70px;
		svg{
			width: 30px;
		}
	}
}
.splide__pagination__page {
	cursor: pointer;
}
@media (min-width: 769px) {
	.map-splide{
		.splide__arrow:hover {
			animation: pico 0.15s ease;
		}
	}
}
@media (max-width: 768px) {
	.map-splide__track {
		padding-top: calc(100 / 750 * 100vw);
	}
	.map-splide{
		.splide__arrows{
			top: calc(50% - (45 / 750 * 100vw));
		}
		.splide__arrow--prev{
			left: -5px;
		}
		.splide__arrow--next{
			left: 5px;
		}
		.splide__arrow {
			width: calc(90 / 750 * 100vw);
			max-width: 70px;
			svg {
				width: calc(32 / 750 * 100vw);
				max-width: 24px;
			}
		}
	}
}


/* facility-block
----------------------------------------*/
.facility-block {
	position: relative;
	height: 900px;
	&::before {
		content: "";
		position: absolute;
		bottom: -140px;
		left: 0;
		width: 100%;
		height: 240px;
		background: url(../images/bg-about.png) repeat left top / auto;
	}
}
.facility {
	position: absolute;
	top: 0;
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}
.facility-btn {
	position: relative;
	z-index: 2;
	flex: 0 0 50px;
	border: none;
	border-top-left-radius: 35px;
	border-bottom-left-radius: 35px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	cursor: pointer;
}
.is-visible {
	.facility-btn {
		cursor: default;
	}
}
.is-prev-visible {
	.facility-btn {
		cursor: pointer;
	}
}
.facility-btn-text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%) rotate(90deg);
	/* 90度回転を追加 */
	writing-mode: horizontal-tb;
	display: flex;
	align-items: center;
	gap: 30px;
	width: max-content;
	color: #ffffff;
	font-size: 2rem;
	font-weight: 700;
	white-space: nowrap;
  transition: .2s ease-in-out;
	.h3-en {
		font-size: 0.7em;
	}
}
.facility-panel {
	min-height: 300px; /* 事前に高さを確保 */
	flex: 1;
	padding: 70px 0;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
}
.facility-panel-inner {
	position: relative;
}
.facility-title {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 40px;
	color: #ffffff;
	font-size: 2.4rem;
	line-height: 1;
	white-space: nowrap;
	.h3-en {
		font-size: 0.66em;
	}
}
.facility-caption {
	bottom: 8px;
	right: 15px;
	color: #ffffff;
	font-size: 1.4rem;
	font-weight: 600;
	text-shadow: 1px 1px 0 #333333, -1px -1px 0 #333333, -1px 1px 0 #333333, 1px -1px 0 #333333, 0px 1px 0 #333333, 0 -1px 0 #333333, -1px 0 0 #333333, 1px 0 0 #333333;
	br.tab {
		display: none;
	}
}
.facility-image {
	border-width: 4px;
	border-style: solid;
	border-radius: 20px;
}
.facility-text {
	margin-top: 10px;
	color: #ffffff;
	font-size: 2.0rem;
	font-weight: 700;
}

.kids-and-family {
	left: 0;
	.facility-btn {
		background-color: #ff7800;
	}
	.facility-btn-text {
		top: 235px;
	}
	.facility-panel {
		background-image: url(../images/bg-about-kids-and-family.jpg);
	}
	.facility-panel-inner {
		left: -105px;
	}
	.facility-image {
		border-color: #ff9933;
	}
}

.restaurant {
	.facility-btn {
		background-color: #de3f46;
	}
	.facility-btn-text {
		top: 185px;
	}
	.facility-panel {
		background-image: url(../images/bg-about-restaurant.jpg);
	}
	.facility-panel-inner {
		left: -60px;
	}
	.facility-image {
		border-color: #de3f46;
	}
}
.restaurant.is-hidden {
	.facility-panel {
		background-color: #de3f46;
		background-image: none;
	}
}
.entertainment {
	.facility-btn {
		background-color: #ff5394;
	}
	.facility-btn-text {
		top: 248px;
	}
	.facility-panel {
		background-image: url(../images/bg-about-entertainment.jpg);
	}
	.facility-panel-inner {
		left: -35px;
	}
	.facility-image {
		border-color: #ff5394;
	}
}
.entertainment.is-hidden {
	.facility-panel {
		background-color: #ff5394;
		background-image: none;
	}
}
.activity {
	.facility-btn {
		background-color: #6e50bb;
	}
	.facility-btn-text {
		top: 195px;
	}
	.facility-panel {
		background-image: url(../images/bg-about-activity.jpg);
	}
	.facility-panel-inner {
		left: -10px;
	}
	.facility-image {
		border-color: #6e50bb;
	}
}
.activity.is-hidden {
	.facility-panel {
		background-color: #6e50bb;
		background-image: none;
	}
}
@media (max-width: 1366px) {
	.facility-caption {
		br.tab {
			display: block;
		}
	}
}
@media (min-width: 769px) {
	.facility {
		transition: left 0.4s cubic-bezier(.7, .3, .3, 1);
	}
	.facility-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px 60px;
		width: 900px;
		margin-inline: auto !important;
	}
	.facility-splide {
		visibility: visible;
	}

	.restaurant {
		width: calc(100% - 50px - 40px);
	}
	.restaurant.is-visible {
		left: 50px;
	}
	.restaurant.is-hidden {
		left: calc(100% - 208px);
	}
	.entertainment {
		width: calc(100% - 100px - 40px);
	}
	.entertainment.is-visible {
		left: 100px;
	}
	.entertainment.is-hidden {
		left: calc(100% - 158px);
	}
	.activity {
		width: calc(100% - 150px - 40px);
	}
	.activity.is-visible {
		left: 150px;
	}
	.activity.is-hidden {
		left: calc(100% - 108px);
	}
  .kids-and-family.is-hidden:hover, .kids-and-family.is-prev-visible:hover {
    .facility-btn, .facility-panel {
      background-color: #ffc38e;
    }
    .facility-btn-text{
      color: #ff7800;
      top: 230px;
    }
  }
  .restaurant.is-hidden:hover, .restaurant.is-prev-visible:hover {
    .facility-btn, .facility-panel {
      background-color: #fda0a4;
    }
    .facility-btn-text{
      color: #de3f46;
      top: 180px;
    }
  }
  .entertainment.is-hidden:hover, .entertainment.is-prev-visible:hover {
    .facility-btn, .facility-panel {
      background-color: #ffbfc3;
    }
    .facility-btn-text{
      color: #ff5394;
      top: 243px;
    }
  }
  .activity.is-hidden:hover, .activity.is-prev-visible:hover {
    .facility-btn, .facility-panel {
      background-color: #cebef8;
    }
    .facility-btn-text{
      color: #6e50bb;
      top: 190px;
    }
  }
}
@media (min-width: 1237px) and (max-width: 1536px) {
	.facility-block {
		height: calc(1180 / 1920 * 100vw);
	}
	.facility-list {
		column-gap: calc(50 / 1920 * 100vw);
		width: calc(1100 / 1920 * 100vw);
	}
	.facility-text {
		font-size: calc(26 / 1920 * 100vw);
	}
}
@media (min-width: 769px) and (max-width: 1236px) {
	.facility-block {
		height: 760px;
		width: 103%;
	}
	.facility-list {
		column-gap: 30px;
		width: 700px;
	}
	.facility-text {
		font-size: 1.7rem;
	}
}
@media (max-width: 768px) {
	.facility-block {
		position: relative;
		left: -20px;
		width: calc(100% + 40px);
		height: calc( (300 / 750 * 100vw) + 140px );

	}
	.facility {
		right: 0;
		transition: width 0.4s cubic-bezier(.7, .3, .3, 1);
	}
	.facility-title {
		margin-bottom: 20px;
		font-size: 2rem;
	}
	.facility-btn {
		flex: 0 0 30px;
	}
	.facility-btn-text {
		gap: 20px;
		font-size: 1.6rem;
	}
	.facility-panel {
		width: calc(100% - 30px);
		padding: 40px 0 0;
		overflow: hidden;
	}
	.facility .facility-panel-inner {
		left: 0;
	}
	.facility-wrap{
		overflow-x: auto;
	}
	.facility-list{
		display: flex;
		width: fit-content;
		gap: 8px;
		padding-inline: 20px;
	}
	.facility-item{
		width: calc( 440 / 750 * 100vw );
	}
	.facility-caption {
		font-size: min(1.2rem, 2.6vw);
	}
	.facility-text {
		font-size: min(1.5rem, 3vw);
	}

	.kids-and-family {
		.facility-btn-text {
			top: 140px;
		}
		.facility-panel-inner {
			width: calc(100% - 90px);
		}
	}
	
	.restaurant {
		width: calc(100% - 30px);
		.facility-btn-text {
			top: 100px;
		}
		.facility-panel-inner {
			width: calc(100% - 60px);
		}
	}
	.restaurant.is-hidden {
		width: 90px;
	}

	.entertainment {
		width: calc(100% - 60px);
		.facility-btn-text {
			top: 150px;
		}
		.facility-panel-inner {
			width: calc(100% - 30px);
		}
	}
	.entertainment.is-hidden {
		width: 60px;
	}

	.activity {
		width: calc(100% - 90px);
		.facility-btn-text {
			top: 108px;
		}
		.facilit .facility-panel-inner {
			width: 100%;
		}
	}
	.activity.is-hidden {
		width: 30px;
	}
}
@media (max-width: 440px) {
	.facility-block {
		height: calc( (380 / 750 * 100vw) + 140px );
	}
}

/* ---------------------------------------
	cabins
--------------------------------------- */
.cabins {
	margin-top: 100px;
	background-color: #faf6e8;
	h2 {
		&::before {
			content: url(../images/bg-cabins-title-top.png);
		}
	}
}
.cabins-list {
	>li {
		width: 100%;
		max-width: 460px;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	>li:nth-child(odd) {
		justify-self: end;
	}
}
.cabins-item-title {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	background-color: #007bc6;
	background-image: url(../images/bg-cabins-item-title-left.png), url(../images/bg-cabins-item-title-right.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left bottom, right bottom;
	background-size: auto, auto;
	border-radius: 20px 20px 0 0;
	color: #ffffff;
	font-size: 2.6rem;
	line-height: 1.2;
	text-shadow: 1px 1px 0 #007bc6, -1px -1px 0 #007bc6,
		-1px 1px 0 #007bc6, 1px -1px 0 #007bc6,
		0px 1px 0 #007bc6, 0-1px 0 #007bc6,
		-1px 0 0 #007bc6, 1px 0 0 #007bc6;
	&::before {
		content: url(../images/picture/cabins-title-pict.png);
		position: absolute;
		top: 25px;
		right: 66px;
	}
	br.tab {
		display: none;
	}
	span {
		position: relative;
		top: 3px;
	}
}
.cabins-item-title::before {
	animation: seagull 5s ease-in-out infinite alternate;
	transition: 1.5s ease-in-out;
}
.cabins-item-inner {
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex: 1;
	position: relative;
	padding: 0 30px 55px;
	background-color: #ffffff;
	border-radius: 0 0 20px 20px;
	background: #ffffff url(../images/bg-cabins-item.png) no-repeat bottom center / 100%;
}
#cabins-service	.modal-body{
	overflow-x: auto;
}
.cabins-image-wrap {
	&::before {
		aspect-ratio: 400 / 267;
	}
}
.cabins-image {
	border-radius: 20px;
}
.cabins-image-caption {
	right: 13px;
	bottom: 6px;
	color: #ffffff;
	font-size: 1.3rem;
	font-weight: 500;
	text-shadow: 1px 1px 0 #333333, -1px -1px 0 #333333, -1px 1px 0 #333333, 1px -1px 0 #333333, 0px 1px 0 #333333, 0 -1px 0 #333333, -1px 0 0 #333333, 1px 0 0 #333333;
	letter-spacing: 0.05em;
}
._subtitle {
	margin-top: 10px;
	font-size: 2.0rem;
	font-weight: 700;
	text-align: left;
	line-height: 1.4;
	a{
		color: #333333;
		text-decoration: underline;
	}
}
._desc {
	font-size: 0.89em;
	text-align: left;
}
._facilities {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
	gap: 10px 5px;
	li {
		padding: 0 12px;
		border-radius: 9999px;
		background-color: #e2f7ff;
		color: #0089dc;
		font-size: 0.83em;
	}
}
._price {
  margin-top: auto;
	height: 110px;
	width: calc(100% + 60px);
  margin-left: -30px;
	padding-top: 25px;
	background-image: linear-gradient(to right, #b1b1b1 2px, transparent 2px);
	background-size: 6px 2px;
	background-repeat: repeat-x;
	background-position: top;
	font-weight: 700;
}
._price-text {
	color: #d60913;
	font-size: 1.75em;
	.sm {
		font-size: 0.64em;
	}
}
.cabins-facility-list {
	gap: 30px;
	grid-template-columns: repeat(4, 1fr);
	p {
		margin-top: 20px;
		font-size: 0.89em;
		text-align: justify;
	}
}
.cabins-facility-title {
	color: #0089dc;
	font-size: 3.2rem;
	font-weight: 700;
}
.cabins-facility-image {
	border: 6px solid #0089dc;
}
.cabins-facility-image-wrap {
	&::before {
		aspect-ratio: 330 / 220;
	}
}
.cabins-splide{
	visibility: visible;
}
@media (min-width: 1367px) and (max-width: 1536px) {
	.cabins-facility-list {
		gap: 30px;
	}
	.cabins-item-title {
		font-size: calc(30 / 1920 * 100vw);
		br {
			display: block
		}
	}
	._subtitle {
		font-size: calc(25 / 1920 * 100vw);
	}
	._price {
		font-size: calc(24 / 1920 * 100vw);
	}
	._price-text {
		font-size: calc(38 / 1920 * 100vw);
	}
}
@media (max-width: 1366px) {
	.cabins-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.cabins-facility-list {
		width: 690px;
		margin-inline: auto;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 769px){
	._subtitle {
		a:hover{
			color: #ff8a00;
		}
	}
}
@media (max-width: 768px) {
	.cabins-item-inner {
		gap: 10px;
		padding-inline: 20px;
	}
	#cabins-service .modal-item{
		width: 1140px;
	}
	.cabins-item-title {
		height: calc(100 / 750 * 100vw);
		max-height: 70px;
		background-size: auto 100%, auto 100%;
		font-size: 2.0rem;
		line-height: 1;
		&::before {
			top: 20px;
			right: 52px;
		}
	}
	._subtitle {
		font-size: 1.8rem;
	}
	._price {
		width: calc(100% + 40px);
		height: auto;
		margin-left: -20px;
		padding-block: 20px 30px;
		
	}
	.cabins-facility-title {
		font-size: 2.2rem;
	}
	.cabins-facility-list {
		width: 100%;
		gap: 10px;
	}
	.cabins-facility-image {
		border-width: 4px;
	}
}
@media (min-width: 540px){
	.cabins-list {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		align-items: stretch;
		gap: 30px;
	}
}
@media (min-width: 540px) and (max-width: 768px){
	.cabins-list {
		gap: 10px;
	}
}
@media (max-width: 540px){
	.cabins-splide{
		width: 100vw;
    margin-inline: calc(50% - 50vw);
		.splide__arrows {
			width: 97%;
			top: 50%;
			transform: translateY(-50%);
		}
		.splide__arrow {
			width: calc( 85 / 750 * 100vw );
			background-color: #ffdc00;
			svg {
				fill: #004f96;
				stroke: #004f96;
				width: calc( 32 / 750 * 100vw );
			}
		}
		.splide__pagination{
			width: 60%;
			margin: 10px auto 0;
		}
		.splide__pagination li{
			flex: 1;
		}
		.splide__pagination__page{
			border: none;
			width: 100%;
			height: 6px;
			background-color: #ffdc00;
		}
		.splide__pagination__page.is-active{
			background-color: #004f96;
		}
	}
}

.modal {
	opacity: 0;
	visibility: hidden;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(30, 107, 156, .5);
  display: flex;
	align-items:
	center;
	justify-content: center;
	padding-inline: 20px;
  z-index: 9999;
	transition: .2s 
	ease-in-out;
}
.modal[hidden] {
	opacity: 0;
	visibility: hidden;
}
.modal-btn{
	background-color: transparent;
	border: none;
	cursor: pointer;
	text-decoration: underline;
}
.modal-content {
  background: #fff;
	padding: 55px;
	border-radius: 30px;
  position: relative;
	border: 6px solid #004f96;
	overflow-x: auto;
	transition: .2s ease-in-out;
	max-height: 80vh;
}
.modal-item{
	max-width: 1140px;
}
.modal-close {
  position: absolute;
	top: -3px;
	right: 6px;
	font-size: 50px;
	color: #004f96;
	cursor: pointer;
	font-weight: bold;
}
.modal.is-open{
	opacity: 1;
	visibility: visible;
}
@media (min-width: 769px){
	.modal-close:hover {
		color: #0089dc;
	}
}
@media (max-width: 768px){
	.modal-content{
		padding: 30px;
	}
	.modal-close {
		font-size: 40px;
	}
}

/* ---------------------------------------
	yacht-club
--------------------------------------- */
.yacht-club {
	background-color: #004f96;
	color: #ffffff;
	&::before {
		background-color: #004f96;
	}
	h2 {
		color: #ffffff;
		font-size: 4.0rem;
		&::before {
			content: url(../images/bg-yacht-club-title-top.png);
		}
	}
	.text-link{
		color: #ffffff;
		font-size: 2.4rem;
	}
}

#yacht-club-service .modal-body{
	overflow: auto;
	 max-height: 60vh;
}
@media (min-width: 769px){
	.yacht-club {
		.text-link:hover{
			color: #ff8a00;
		}
	}
}
@media (max-width: 768px) {
	.yacht-club {
		h2 {
			font-size: 2.6rem;
		}
		.text-link{
			font-size: 1.8rem;
		}
	}
}

/* ---------------------------------------
	pricing
--------------------------------------- */
.pricing {
	position: relative;
	background-color: #fae561;
	&::before {
		background-color: #fae561;
	}
	h2 {
		&::before {
			content: url(../images/bg-pricing-title-top.png);
		}
	}
}
.pricing-item-title {
	color: #007bc6;
	font-size: 2.8rem;
	font-weight: 700;
}
.pricing-desc {
	display: flex;
	flex: 1;
	margin-top: 20px;
	padding: 35px;
	background-color: #ffffff;
	border-radius: 20px;
}
.plan-desc-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 40px;
	text-align: left;
}
.inclusions{
	.pricing-desc{
		padding: 27px;
	}
	.plan-desc-list {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 10px;
		.-row1 {
			grid-column: span 3;
		
		}
		.-row2 {
			grid-column: span 2;
		}
	}
	.plan-desc-item{
		background-color: #e2f7ff;
		border-radius: 10px;
		padding: 20px 15px 15px;
		&::before {
		content: "";
			display: block;
			text-align: center;
		}
	}
	.plan-desc-item:first-of-type::before {
		content: url(../images/picture/pricing-icon-1.png);
	}
	.plan-desc-item:nth-of-type(2)::before {
		content: url(../images/picture/pricing-icon-2.png);
	}
	.plan-desc-item:nth-of-type(3)::before {
		content: url(../images/picture/pricing-icon-3.png);
	}
	.plan-desc-item:nth-of-type(4)::before {
		content: url(../images/picture/pricing-icon-4.png);
	}
	.plan-desc-item:nth-of-type(5)::before {
		content: url(../images/picture/pricing-icon-5.png);
	}
	.plan-desc-item:nth-of-type(3) p{
		white-space: nowrap;
	}
}
.exclusions {
	.plan-desc-item {
		display: inline-flex;
		font-size: 0.9em;
		align-items: baseline;
		&::before {
			content: "";
			display: inline-block;
			width: 6px;
			height: 15px;
			margin-right: 15px;
			z-index: 1;
			transform: rotate(45deg);
			border-right: 3px solid #999999;
			border-bottom: 3px solid #999999;
		}
	}
}
.pricing-splide{
	visibility: visible;
}
 @media (min-width: 1537px){
	.plan-desc-item{
		p{
			width: fit-content;
			margin-inline: auto;
		}
	}
 }
@media (min-width: 769px){
	.pricing-item{
		display: flex;
		flex-direction: column;
	}
	.inclusions{
		flex: 0 0 60%;
	}
	.exclusions{
		flex: 1;
	}
 }
 @media (max-width: 1536px){
	.pricing-list{
		align-items: flex-start;
	}
	.inclusions{
		flex: 0 0 50%;
		.plan-desc-list{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
		.plan-desc-item{
			display: flex;
			align-items: center;
			gap: 20px;
			width: 100%;
		}
	}
}
@media (max-width: 768px) {
	.pricing-item-title {
		font-size: 2.0rem;
	}
	.plan-desc-list {
		gap: 10px 20px;
	}
	.pricing-desc {
		margin-top: 10px;
		padding: 20px 25px 20px 35px;
		border-radius: 20px;
	}
	.inclusions{
		flex: none;
		.pricing-desc{
			padding: 22px;
		}
		.plan-desc-item {
			padding: 5px 10px;
			line-height: 1.4;
			&::before {
				position: relative;
                left: -5px;
				width: 35px;
					transform: scale(.5);
				}
			}		
		}
	.pricing-splide{
		width: 100vw;
		margin-inline: calc(50% - 50vw);
		.splide__arrows {
			top: 50%;
			transform: translateY(-50%);
			width: 97%;
		}
		.splide__arrow {
			width: calc(90 / 750 * 100vw);
			max-width: 70px;
			background-color: #007bc6;
		}
		.splide__arrow svg {
			fill: #e2f7ff;
			stroke: #e2f7ff;
			width: calc(32 / 750 * 100vw);
		}

		.splide__pagination {
			width: 60%;
			margin: 10px auto 0;
		}
		.splide__pagination li {
			flex: 1;
		}
		.splide__pagination__page {
			border: none;
			width: 100%;
			height: 6px;
			background-color: #e2f7ff;
		}
		.splide__pagination__page.is-active {
			background-color: #007bc6;
		}
	}
}
@media (min-width: 540px) and (max-width: 768px){
	.pricing-desc{
		padding: 20px 25px 20px 50px;
	}
	.inclusions {
		.plan-desc-item::before {
			height: 55px;
			top: -6px;
		}
		.pricing-desc {
			padding: 30px;
		}
	}
	.pricing-splide {
		.splide__arrow {
			max-width: 55px;
			svg{
				max-width: 24px;
			}
		}
	}
}

/* ---------------------------------------
	ships
--------------------------------------- */
.ships {
	background: url(../images/bg-image.png) repeat left top / auto;
	color: #ffffff;
	&::before {
		background-color: #004f96;
	}
	h2 {
		color: #ffffff;
		&::before {
			content: url(../images/bg-ships-title-top.png);
		}
	}
}
.ships-tabs {
	display: flex;
	gap: 20px;
	width: 100%;
	margin-bottom: 30px;
}
.ships-tab-button {
	position: relative;
	flex: 1;
	height: 60px;
	border-radius: 10px;
	background-color: #a6dafa;
	color: #004f96;
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	border: none;
	&::after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
		width: 23px;
		height: 12px;
		background: #a6dafa;
		clip-path: polygon(0 0, 50% 100%, 100% 0);
	}
}
.ships-tab-button[tabindex="0"] {
	background-color: #ffdc00;
	&::after {
		background: #ffdc00;
	}
}

.ships-block-wrap {
	padding: 40px 100px 95px;
	background-color: #ffffff;
	border-radius: 30px;
}
.ships-block-title {
	margin-bottom: 30px;
	color: #004f96;
	font-size: 3.6rem;
	font-weight: 700;
	&::before {
		content: "";
		display: block;
		width: 100%;
		height: 48px;
		background: url(../images/bg-ships-block-title.png) no-repeat top center / auto 100%;
		margin-bottom: 10px;
		line-height: 1;
	}
	span {
		display: inline-block;
		margin-left: 20px;
	}
}

.ships-data-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	position: relative;
	li {
		display: flex;
		justify-content: center;
		gap: 10px;
		padding-block: 38px;
		border-top: 1px solid #004f96;
		._data {
			color: #004f96;
			font-family: 'Oswald', sans-serif;
			font-size: 3.6rem;
			font-weight: 900;
			line-height: 1;
		}
	}
	li:nth-child(4),
	li:nth-child(5),
	li:nth-child(6) {
		border-bottom: 1px solid #004f96;
	}
}
[id^="tour"] {
	margin-inline: auto;
	margin-top: 60px;
}
.to-shippage-links {
	flex-wrap: wrap;
}
a.to-ship-detail, a.to-ship-cabin, a.to-ship-campagin {
	flex: 1;
}
.cabins-accrodion-button-wrap {
	position: relative;
}
.ships-btn {
	max-width: 600px;
	background-color: #0a3388;
	&::after {
		border-top: solid 3px #ffffff;
		border-right: solid 3px #ffffff;
	}
}
a.ships-btn {
	color: #ffffff;
}

[id^="tour"].is-empty {
	display: none;
}
@media (max-width: 1366px) {
	.ships-tabs {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 10px;
	}
}
@media (min-width: 769px) and (max-width: 1366px) {
	.ships-tab-button {
		font-size: 1.7rem;
		letter-spacing: -0.02em;
		white-space: nowrap;
	}
	.ships-block-wrap {
		padding-inline: calc(100 / 1920 * 100vw);
	}
	.tour-main-container {
		gap: 10px;
	}
	.tour-title-container {
		flex: 1;
	}
	.button-container {
		width: fit-content;
	}
	.button-application_link.-brochure {
		width: 210px;
		font-size: 16px;
	}
	.button-application_link.-mail {
		width: 210px;
		justify-content: center;
	}
	.cabin_price-link {
		width: 60%;
	}
}
@media (min-width: 769px) and (max-width: 1236px) {
	.tour-image-container {
		width: 193px;
	}
}
@media (min-width: 769px) {
	.ships-data-list {
		li {
			._head {
				position: relative;
				top: 12px;
			}
		}
	}
	.ships-btn {
		height: 80px;
	}
	.ships-tab-button:hover {
		animation: pico-tilt 0.3s ease;
		background-color: #ffdc00;
		&::after {
			background: #ffdc00;
		}
	}
	.tour-image-container {
		width: calc(300 / 1920 * 100vw);
	}
}
@media (max-width: 768px) {
	.ships-tabs {
		justify-content: center;
		gap: 10px;
	}
	.ships-tab-button {
		/* flex: 0 0 162px; */
		flex: none;
		width: calc(50% - 10px);
		padding: 0 12px;
		&::after {
			display: none;
		}
	}
	.ships-tab-button:last-of-type {
		min-width: fit-content;
	}
	.ships-block-wrap {
		padding-inline: 10px;
		padding-bottom: 20px;
	}
	.ships-data-list {
		li {
			flex-direction: column;
			align-items: center;
			gap: 0px;
			._head {
				font-size: 1.5rem;
			}
			._data {
				font-size: 2.2rem;
			}
		}
	}
	.ships-block-title {
		font-size: 2.2rem;
		line-height: 1.2;
		span {
			display: block;
			margin-left: 0;
		}
		&::before {
			height: 30px;
		}
	}
	[id^="tour"] {
		width: 100%;
	}
	.ships-btn {
		height: 60px;
	}
}
@media (max-width: 414px) {
  .button-application_link.-mail{
    white-space: nowrap;
  }
	.digital_pamphlet_url, .mail-application {
		font-size: calc(24 / 750 * 100vw)
	}
	.digital_pamphlet_url-small {
		font-size: calc(22 / 750 * 100vw)
	}
  a.to-ship-detail::before, a.to-ship-cabin::before, a.to-ship-campagin::before{
    margin-right:calc( 10 / 750 * 100vw )
  }
  a.to-ship-detail, a.to-ship-cabin, a.to-ship-campagin{
    font-size: min( calc(28 / 750 * 100vw), 13px );
  }
  .to-ship-detail .to-shippage-link-main, .to-ship-cabin .to-shippage-link-main, .to-ship-campagin .to-shippage-link-main{
    font-size: min( calc(30 / 750 * 100vw), 16px );
  }
}

/* ---------------------------------------
	tours
--------------------------------------- */
.tours {
	position: relative;
	background: url(../images/bg-image-yellow.png) repeat left top / auto;
	&::before {
		background: linear-gradient(to bottom, rgba(250, 227, 86, 1) 0%, rgba(250, 227, 86, 1) 37%, rgba(250, 227, 86, 0) 37%, rgba(250, 227, 86, 0) 100%);
	}
	h2 {
		position: relative;
		color: #004f96;
		&::before {
			content: url(../images/bg-tours-title-top.png);
		}
	}
}
		.cabin-accrodion-button-wrap{
		position: relative;
	}
@media (min-width: 769px){
	.tours-block{
		padding-inline: 100px;
		.tour_panel {
			padding-bottom: 50px;
		}
	}
}
@media (max-width: 1536px){
		.tours-block{
		padding-inline: calc( 100 / 1536 * 100vw )

	}
}
@media (max-width: 768px){
	.tours-block{
		padding-inline: 0
	}
	.tour_panel {
    margin-top: 30px
	}
}

/* ---------------------------------------
	faq
--------------------------------------- */
.faq {
	h2 {
		&::before {
			content: url(../images/bg-faq-title-top.png);
		}
	}
}
.faq-item {
	display: flex;
	gap: 40px;
	align-items: center;
	[class*="_text-"] {
		flex: 0 0 60px;
		line-height: 60px;
		text-align: center;
		color: #ffffff;
		font-size: 2em;
		font-weight: 900;
		border-radius: 9999px;
	}
}
.faq-item-title {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	flex: 0 0 325px;
	padding: 25px 20px;
	background-color: #c1e5fb;
	color: #007bc6;
	font-size: 2.0rem;
	font-weight: 700;
	border-radius: 20px;
	text-align: left;
	&::after {
		content: "";
		position: absolute;
		right: -20px;
		width: 22px;
		height: 30px;
		background: #c1e5fb;
		clip-path: polygon(0 0, 0% 100%, 100% 50%);
	}
}
.faq-item-desc {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 15px;
	text-align: justify;
}
._text-q {
	background-color: #0089dc;
}
._text-a {
	background-color: #ff5394;
}
@media (min-width: 769px){
  .faq {
    border-top-right-radius: 50px;
  }
}
@media (max-width: 768px) {
	.faq-item {
		flex-direction: column;
		[class*="_text-"] {
			flex: 0 0 50px;
			line-height: 50px;
			/* font-size: 1.9rem; */
		}
	}
	.faq-item-title {
		flex: 0 0 auto;
		width: 70%;
		margin-right: auto;
		padding: 20px;
		font-size: 1.7rem;
		&::after {
			right: auto;
			left: 50%;
			transform: translateX(-50%);
			bottom: -18px;
			width: 30px;
			height: 20px;
			clip-path: polygon(0 0, 50% 100%, 100% 0);
		}
	}
	.faq-item-desc {
		width: 90%;
		margin-left: auto;
	}
}