@charset "utf-8";

:root {
	--color-brown01: #745137;
	--color-brown02: #713A0E;
	--color-gray01: #333333;
	--color-pink01: #DE496F;
	--color-date-text01: #87552F;
	--color-date-line01: #E5DECA;

	--color-chm-bg01: #FFCE48;
	--color-chm-bg02: #FFE18E;
	--color-chm-bg03: #37893A;
	--color-chm-line01: #F7BC19;
	--color-chm-em01: #37893A;
	--color-chm-button01: #4FAD52;
	--color-chm-button02: #359138;

	--color-pool-bg01: #8CDEDA;
	--color-pool-bg02: #B2FFFB;
	--color-pool-bg03: #FFFCD8;
	--color-pool-line01: #72CBC6;
	--color-pool-em01: #268948;
	--color-pool-button01: #ED577D;
	--color-pool-button02: #E03E67;

	--color-menu-bg01: #4FAD52;
	--color-menu-bg02: #008000;
	--color-menu-bg03: #137145;
	--color-menu-line01: #359138;
	--color-menu-em01: #FABF1C;
	--color-menu-button01: #FABF1C;
	--color-menu-button02: #FFD150;

	--color-stay-bg01: #E2F0FF;
	--color-stay-bg02: #6AB0FF;
	--color-stay-line01: #D6A530;
	--color-stay-text01: #014099;
	--color-stay-text02: #FFB80D;
	--color-stay-button01: #014099;
	--color-stay-button02: #297AED;

	--color-vpn-line01: #5CBDD2;
	--color-vpn-button01: #5CBDD2;
	--color-vpn-button02: #5CCBE3;

	--color-fdd-bg01: #FFF2BA;
	--color-fdd-red01: #C9151E;
	--color-fdd-button01: #FEC411;
	--color-fdd-button02: #FFD553;
	--color-fdd-button03: #222222;

	--color-sns-bg01: #F7E0C3;
	--color-sns-line01: #745137;
	--color-sns-text01: #745137;
}

/*--- common  ---*/
#content-area {
    background: url("../images/bg_page.jpg") no-repeat #EBFFFD 50% 0 / 2126px auto;
	background-attachment: fixed;
}
@media (width >= 2000px) {
	#content-area {
		background-size: 100% auto;
	}
}
#contentMain {
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 500;
	overflow-x: hidden;
}
.content-inner {
    background: var(--color-white01);
	box-shadow: calc(10 * var(--scale-ratio)) 0 calc(20 * var(--scale-ratio)) rgb(0 0 0 / 0.28);
	position: relative;
}
.content-inner-shadow {
	margin: auto;
	box-shadow: calc(-10 * var(--scale-ratio)) 0 calc(20 * var(--scale-ratio)) rgb(0 0 0 / 0.28);
    max-width: 750px;
}
.main-area {
	position: relative;
	z-index: 20;
}
.sec-inner {
	padding: 0 calc(50 * var(--scale-ratio));
}

/*--- reservation-fixed ---*/
.reservation-fixed.btn {
    background: var(--color-white01);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
}
.reservation-fixed.btn a {
	background: url("../images/btn_bg_fixed01.jpg") no-repeat 50% 50% / 100% 100%;
    text-decoration: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(96 * var(--scale-ratio));
}
.reservation-fixed.btn .btn-txt {
	color: var(--color-brown01);
    font-weight: bold;
    font-size: 150%;
    letter-spacing: 0.025em;
    line-height: 1;
}
.reservation-fixed.btn a::after {
    content: "";
    margin-left: calc(15 * var(--scale-ratio));
    background: url("../images/btn_ico01.png") no-repeat 50% 50% / contain;
    display: inline-block;
    width: calc(15 * var(--scale-ratio));
    height: calc(24 * var(--scale-ratio));
    transition: all 0.5s;
}
.reservation-fixed.btn:hover a::after {
    transform: translateX(5px);
}

/*--- content-top ---*/
.content-top-title {
	position: relative;
}
.content-top-title .title01 {
	margin: calc(-35 * var(--scale-ratio)) 0 0 calc(15 * var(--scale-ratio));
	width: calc(638 * var(--scale-ratio));
}
.content-top-title .title02 {
	margin: calc(-10 * var(--scale-ratio)) auto calc(100 * var(--scale-ratio));
	width: calc(662 * var(--scale-ratio));
}
.content-top-title .art {
	background: url("../images/mv_art.png") no-repeat 50% 0 / contain;
	position: absolute;
	top: calc(35 * var(--scale-ratio));
	right: calc(-3 * var(--scale-ratio));
	width: calc(750 * var(--scale-ratio));
	height: calc(338 * var(--scale-ratio));
	pointer-events: none;
}

/*--- content-first ---*/
.content-first {
	padding-bottom: calc(95 * var(--scale-ratio));
	position: relative;
}
.content-first .art {
	background: url("../images/first_art.png") no-repeat 50% 0 / contain;
	position: absolute;
	top: calc(-90 * var(--scale-ratio));
	right: 0;
	width: calc(750 * var(--scale-ratio));
	height: calc(679 * var(--scale-ratio));
	pointer-events: none;
}
.content-first.sec-block .txt-area .txt {
	color: var(--color-brown01);
	font-weight: bold;
	font-size: 116%;
	line-height: 1.5;
}
.content-first .txt + .txt {
	margin-top: 1.65em;
}

/*--- page-nav-area  ---*/
.page-nav-area {
	margin-bottom: calc(144 * var(--scale-ratio));
}
.page-nav-item.-nav02 {
	margin: calc(-10 * var(--scale-ratio)) 0 calc(10 * var(--scale-ratio));
}
.page-nav-item.-nav03 {
	margin: 0 0 calc(15 * var(--scale-ratio)) calc(-20 * var(--scale-ratio));
	width: calc(691 * var(--scale-ratio));
}
.page-nav-item.-nav04 {
	margin-left: auto;
	width: calc(655 * var(--scale-ratio));
}

/*--- sec-block  ---*/
.-frame {
	padding: calc(90 * var(--scale-ratio)) calc(80 * var(--scale-ratio));
	border: calc(10 * var(--scale-ratio)) solid;
	border-radius: calc(40 * var(--scale-ratio));
}
.sec-block {
	&.-frame {
		margin: 0 calc(10 * var(--scale-ratio)) calc(50 * var(--scale-ratio));
		padding: 0 calc(30 * var(--scale-ratio)) calc(140 * var(--scale-ratio));
		position: relative;
		&::before {
			content: "";
			pointer-events: none;
			border-radius: 100%;
			filter: blur(calc(39 * var(--scale-ratio)));
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
		}
		.sec-ti-area {
			position: relative;
			z-index: 3;
			.sec-ti {
				margin: auto;
				position: relative;
				z-index: 4;
			}
			.sec-ti-area-art {
				position: absolute;
				z-index: 5;
				display: block;
				width: calc(750 * var(--scale-ratio));
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.sec-date {
			padding: calc(20 * var(--scale-ratio));
			border-radius: calc(40 * var(--scale-ratio));
			border: calc(5 * var(--scale-ratio)) solid var(--color-date-line01);
			background-color: var(--color-white01);
			box-shadow: calc(5 * var(--scale-ratio)) calc(5 * var(--scale-ratio)) 0 0 rgb(0 0 0 / 0.16);
			position: relative;
			z-index: 1;
			dt, dd {
				color: var(--color-date-text01);
				font-weight: bold;
				line-height: 1.5;
				text-align: center;
				white-space: nowrap;
			}
		}
		.img-area {
			margin: calc(70 * var(--scale-ratio)) 0;
			position: relative;
			z-index: 1;
			&::before {
				content: "";
				pointer-events: none;
				border-radius: 100%;
				filter: blur(calc(39 * var(--scale-ratio)));
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;
			}
			figure {
				border-radius: calc(40 * var(--scale-ratio));
				box-shadow: calc(5 * var(--scale-ratio)) calc(5 * var(--scale-ratio)) 0 0 rgb(0 0 0 / 0.16);
				background-color: var(--color-white01);
				overflow: hidden;
				position: relative;
				z-index: 3;
			}
			.art {
				position: absolute;
				pointer-events: none;
				z-index: 4;
			}
		}
		.txt-area {
			margin: 0 calc(50 * var(--scale-ratio)) calc(50 * var(--scale-ratio));
			.txt {
				color: var(--color-brown02);
				font-weight: 400;
				line-height: 1.5;
				em {
					font-weight: bold;
				}
			}
		}
	}
	.btn a,
	.btn .disabled {
		margin: auto;
		border: calc(5 * var(--scale-ratio)) solid;
		border-radius: calc(60 * var(--scale-ratio));
		box-shadow: calc(5 * var(--scale-ratio)) calc(5 * var(--scale-ratio)) 0 0 rgb(0 0 0 / 0.16);
		text-decoration: none;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(400 * var(--scale-ratio));
		height: calc(120 * var(--scale-ratio));
		.btn-txt {
			font-size: 125%;
			letter-spacing: -0.05em;
			font-weight: bold;
		}
		.arrow {
			position: absolute;
			top: calc(40 * var(--scale-ratio));
			right: calc(30 * var(--scale-ratio));
			width: calc(15 * var(--scale-ratio));
			height: calc(24 * var(--scale-ratio));
			transition: all 0.5s;
		}
	}
	.btn .disabled {
		opacity: 0.5;
	}
	.btn a {
		&:hover .arrow {
			transform: translateX(5px);
		}
	}
}

/*--- chm  ---*/
#chm {
	border-color: var(--color-chm-line01);
	background-color: var(--color-chm-bg01);
	&::before {
		background: var(--color-chm-bg02);
		top: calc(88 * var(--scale-ratio));
		width: calc(550 * var(--scale-ratio));
		height: calc(398  * var(--scale-ratio));
	}
	.sec-ti-area {
		margin-bottom: calc(87 * var(--scale-ratio));
		padding-top: calc(120 * var(--scale-ratio));
		.sec-ti-area-art {
			top: calc(-154 * var(--scale-ratio));
		}
		.sec-ti {
			width: calc(503 * var(--scale-ratio));
		}
	}
	.img-area {
		padding: 0 calc(10 * var(--scale-ratio));
		&::before {
			background: var(--color-chm-bg03);
			top: calc(78 * var(--scale-ratio));
			width: calc(550 * var(--scale-ratio));
			height: calc(550 * var(--scale-ratio));
		}
		.img01 {
			width: calc(450 * var(--scale-ratio));
			transform: rotate(-5deg);
		}
		.img02 {
			margin-left: auto;
			width: calc(450 * var(--scale-ratio));
			transform: rotate(5deg);
		}
		.art {
			background: url("../images/sec_im01_art.png") no-repeat 50% 50% / 100% 100%;
			top: calc(78 * var(--scale-ratio));
			left: calc(39 * var(--scale-ratio));
			width: calc(580 * var(--scale-ratio));
			height: calc(440 * var(--scale-ratio));

		}
	}
	.txt-area .txt em {
		color: var(--color-chm-em01);
	}
	.btn a {
		border-color: var(--color-chm-button02);
		background-color: var(--color-chm-button01);
		.btn-txt {
			color: var(--color-white01);
		}
		.arrow svg {
			fill: var(--color-white01);
		}
	}
}

/*--- pool  ---*/
#pool {
	border-color: var(--color-pool-line01);
	background-color: var(--color-pool-bg01);
	&::before {
		background: var(--color-pool-bg02);
		top: calc(78 * var(--scale-ratio));
		width: calc(550 * var(--scale-ratio));
		height: calc(442  * var(--scale-ratio));
	}
	.sec-ti-area {
		margin-bottom: calc(87 * var(--scale-ratio));
		padding-top: calc(28.5 * var(--scale-ratio));
		.sec-ti-area-art {
			top: calc(-230 * var(--scale-ratio));
		}
		.sec-ti {
			width: calc(649 * var(--scale-ratio));
		}
	}
	.img-area {
		padding: 0 calc(17 * var(--scale-ratio));
		display: flex;
		align-items: flex-start;
		&::before {
			background: var(--color-pool-bg03);
			top: calc(5 * var(--scale-ratio));
			width: calc(550 * var(--scale-ratio));
			height: calc(517 * var(--scale-ratio));
		}
		.art {
			background: url("../images/sec_im02_art.png") no-repeat 50% 50% / 100% 100%;
			top: calc(36 * var(--scale-ratio));
			left: calc(119 * var(--scale-ratio));
			width: calc(417 * var(--scale-ratio));
			height: calc(468 * var(--scale-ratio));
		}
		.img01 {
			width: calc(350 * var(--scale-ratio));
			flex-shrink: 0;
			transform: rotate(-5deg);
		}
		.img02 {
			margin: calc(140 * var(--scale-ratio)) 0 0 calc(-84 * var(--scale-ratio));
			width: calc(350 * var(--scale-ratio));
			flex-shrink: 0;
			transform: rotate(5deg);
		}
	}
	.txt-area .txt em {
		color: var(--color-pool-em01);
	}
	.btn a,
	.btn .disabled {
		border-color: var(--color-pool-button02);
		background-color: var(--color-pool-button01);
		.btn-txt {
			color: var(--color-white01);
		}
		.arrow svg {
			fill: var(--color-white01);
		}
	}
}

/*--- menu  ---*/
#menu {
	margin-bottom: calc(100 * var(--scale-ratio));
	border-color: var(--color-menu-line01);
	background-color: var(--color-menu-bg01);
	&::before {
		background: var(--color-menu-bg02);
		top: calc(99 * var(--scale-ratio));
		width: calc(650 * var(--scale-ratio));
		height: calc(338  * var(--scale-ratio));
	}
	.sec-ti-area {
		margin-bottom: calc(90 * var(--scale-ratio));
		padding-top: calc(127 * var(--scale-ratio));
		.sec-ti-area-art {
			top: calc(-198 * var(--scale-ratio));
		}
		.sec-ti {
			width: calc(520 * var(--scale-ratio));
		}
	}
	.img-area {
		margin: calc(50 * var(--scale-ratio));
		&::before {
			background: var(--color-menu-bg03);
			top: calc(-26 * var(--scale-ratio));
			width: calc(603 * var(--scale-ratio));
			height: calc(503  * var(--scale-ratio));
		}
	}
	.txt-area {
		.txt, .note {
			color: var(--color-white01);
			em {
				color: var(--color-menu-em01);
			}
		}
		.note {
			margin-top: calc(10 * var(--scale-ratio));
			font-size: 83%;
			font-weight: 400;
		}
	}
	.btn a,
	.btn .disabled {
		border-color: var(--color-menu-button02);
		background-color: var(--color-menu-button01);
		.btn-txt {
			color: var(--color-white01);
		}
		.arrow svg {
			fill: var(--color-white01);
		}
	}
	.sec-bottom-art {
		pointer-events: none;
		position: absolute;
		left: calc(-10 * var(--scale-ratio));
		bottom: calc(-90 * var(--scale-ratio));
		width: calc(715 * var(--scale-ratio));
	}
}


/*--- stay  ---*/
#stay {
	padding: calc(150 * var(--scale-ratio)) 0;
    background: url("../images/bg_stay01.jpg") no-repeat 50% 0 / 100% auto, url("../images/bg_stay02.jpg") no-repeat 50% 100% / 100% auto;
	background-color: var(--color-stay-bg01);
	figure {
		border: calc(5 * var(--scale-ratio)) solid var(--color-stay-line01);
		border-radius: calc(40 * var(--scale-ratio));
		box-shadow: calc(5 * var(--scale-ratio)) calc(5 * var(--scale-ratio)) 0 0 rgb(0 0 0 / 0.16);
		overflow: hidden;
	}
	.txt-area {
		.ti {
			margin-bottom: calc(25 * var(--scale-ratio));
			color: var(--color-stay-text01);
			font-weight: bold;
			font-size: 116%;
			line-height: 1;
		}
		.txt {
			color: var(--color-stay-text01);
			font-weight: 400;
			line-height: 1.5;
			a {
				color: var(--color-stay-text02);
			}
		}
	}
	.btn a {
		border-color: var(--color-stay-button02);
		background-color: var(--color-stay-button01);
		.btn-txt {
			color: var(--color-white01);
		}
		.arrow svg {
			fill: var(--color-white01);
		}
	}
	.area-first {
		.sec-ti-stay {
			margin-bottom: calc(100 * var(--scale-ratio));
			color: var(--color-stay-text01);
			font-weight: bold;
			font-size: 166%;
			line-height: 1.2;
			text-align: center;
			display: flex;
			align-items: center;
			white-space: nowrap;
			&::before, &::after {
				content: "";
				background: url("../images/ti_sec04_art.png") no-repeat 50% 50% / 100% 100%;
				width: calc(90 * var(--scale-ratio));
				height: calc(50 * var(--scale-ratio));
			}
			&::before {
				margin-right: calc(20 * var(--scale-ratio));
			}
			&::after {
				margin-left: calc(20 * var(--scale-ratio));
				transform: scaleX(-1);
			}
		}
		.img-area {
			&::before, &::after {
				content: "";
				margin: auto;
				background: url("../images/line_double.png") no-repeat 50% 50% / 100% 100%;
				display: block;
				width: calc(550 * var(--scale-ratio));
				height: calc(21 * var(--scale-ratio));
				pointer-events: none;
			}
			&::before {
				margin-bottom: calc(5 * var(--scale-ratio));
			}
			&::after {
				margin-top: calc(5 * var(--scale-ratio));
				transform: scaleY(-1);
			}
			figure {
				margin: 0 calc(-40 * var(--scale-ratio));
				background: var(--color-white01);
				box-shadow: none;
			}
		}
	}
	.area {
		padding: calc(50 * var(--scale-ratio)) 0;
		&::before {
			content: "";
			margin: 0 calc(-40 * var(--scale-ratio)) calc(86 * var(--scale-ratio));
			background: url("../images/line_wave.png") no-repeat 50% 50% / 100% 100%;
			display: block;
			width: calc(730 * var(--scale-ratio));
			height: calc(56 * var(--scale-ratio));
		}
		.ti-stay-sub {
			text-align: center;
			color: var(--color-stay-text01);
			font-weight: bold;
			font-size: 150%;
			line-height: 1.16;
		}
		figure {
			background: var(--color-white01);
		}
		&.-entry {
			padding-bottom: calc(50 * var(--scale-ratio));
			&::before {
				display: none;
			}
			.ti-stay-sub {
				margin-bottom: calc(50 * var(--scale-ratio));
			}
			.img-area {
				position: relative;
				z-index: 1;
				&::before {
					content: "";
					pointer-events: none;
					border-radius: 100%;
					filter: blur(calc(39 * var(--scale-ratio)));
					background: var(--color-stay-bg02);
					position: absolute;
					top: calc(-14 * var(--scale-ratio));
					left: calc(-14 * var(--scale-ratio));
					z-index: 2;
					width: calc(674 * var(--scale-ratio));
					height: calc(451  * var(--scale-ratio));
				}
				.img01 {
					margin-bottom: calc(25 * var(--scale-ratio));
					box-shadow: calc(5 * var(--scale-ratio)) calc(5 * var(--scale-ratio)) 0 0 rgb(0 0 0 / 0.16);
					position: relative;
					z-index: 5;
				}
			}
			.txt-area {
				margin-bottom: calc(25 * var(--scale-ratio));
			}
		}
		&.-resort {
			padding-top: 0;
			&::before {
				margin-bottom: calc(50 * var(--scale-ratio));
			}
			.ti-stay-sub {
				margin-bottom: calc(50 * var(--scale-ratio));
			}
			.img01 {
				margin-bottom: calc(25 * var(--scale-ratio));
				box-shadow: calc(5 * var(--scale-ratio)) calc(5 * var(--scale-ratio)) 0 0 rgb(0 0 0 / 0.16);
			}
			.img-area.-img-area02 {
				margin: calc(38 * var(--scale-ratio)) 0 calc(30 * var(--scale-ratio));
				position: relative;
				z-index: 1;
				display: flex;
				align-items: flex-start;
				&::before {
					content: "";
					pointer-events: none;
					border-radius: 100%;
					filter: blur(calc(39 * var(--scale-ratio)));
					background: var(--color-stay-bg02);
					position: absolute;
					top: calc(-2 * var(--scale-ratio));
					left: calc(146 * var(--scale-ratio));
					z-index: 2;
					width: calc(342 * var(--scale-ratio));
					height: calc(342  * var(--scale-ratio));
				}
				.img02 {
					margin-left: calc(10 * var(--scale-ratio));
					position: relative;
					z-index: 5;
					width: calc(310 * var(--scale-ratio));
					flex-shrink: 0;
					transform: rotate(-5deg);
				}
				.img03 {
					margin: calc(90 * var(--scale-ratio)) 0 0 calc(-77 * var(--scale-ratio));
					position: relative;
					z-index: 4;
					width: calc(405 * var(--scale-ratio));
					flex-shrink: 0;
				}
			}
			.txt-area {
				position: relative;
				z-index: 5;
			}
		}
		&.-service {
			padding-top: 0;
			.column {
				margin: calc(64 * var(--scale-ratio)) 0 calc(40 * var(--scale-ratio));
				display: flex;
				gap: calc(50 * var(--scale-ratio));
				.txt-area {
					width: calc(234 * var(--scale-ratio));
				}
				.img-area {
					position: relative;
					width: calc(350 * var(--scale-ratio));
					z-index: 1;
					&::before {
						content: "";
						pointer-events: none;
						border-radius: 100%;
						filter: blur(calc(39 * var(--scale-ratio)));
						background: var(--color-stay-bg02);
						position: absolute;
						top: calc(-14 * var(--scale-ratio));
						left: calc(-18 * var(--scale-ratio));
						z-index: 2;
						width: calc(383 * var(--scale-ratio));
						height: calc(489 * var(--scale-ratio));
					}
					.img01 {
						position: relative;
						z-index: 5;
						transform: rotate(5deg);
					}
				}
			}
			.img02 {
				margin-bottom: calc(25 * var(--scale-ratio));
				box-shadow: calc(5 * var(--scale-ratio)) calc(5 * var(--scale-ratio)) 0 0 rgb(0 0 0 / 0.16);
				position: relative;
				z-index: 5;
			}
		}
		&.-link {
			padding: 0;
			&::before {
				margin-bottom: calc(50 * var(--scale-ratio));
			}
		}
	}
	.box {
		margin: 0 calc(-40 * var(--scale-ratio));
		&.-box01 {
			margin-top: calc(75 * var(--scale-ratio));
			margin-bottom: calc(75 * var(--scale-ratio));
			border-color: var(--color-stay-line01);
			background-color: var(--color-white01);
			position: relative;
			&::before, &::after {
				content: "";
				background: url("../images/line_double.png") no-repeat 50% 50% / 100% 100%;
				position: absolute;
				left: 50%;
				width: calc(650 * var(--scale-ratio));
				height: calc(21 * var(--scale-ratio));
				pointer-events: none;
			}
			&::before {
				top: calc(-36 * var(--scale-ratio));
				transform: translateX(-50%);
			}
			&::after {
				bottom: calc(-36 * var(--scale-ratio));
				transform: translateX(-50%) scaleY(-1);
			}
			.kira {
				background: url("../images/ico_kira.png") no-repeat 50% 50% / 100% 100%;
				pointer-events: none;
				position: absolute;
				width: calc(82 * var(--scale-ratio));
				height: calc(80 * var(--scale-ratio));
				&.-kira01 {
					transform: scaleX(-1);
					top: calc(10 * var(--scale-ratio));
					left: calc(30 * var(--scale-ratio));
				}
				&.-kira02 {
					top: calc(10 * var(--scale-ratio));
					right: calc(30 * var(--scale-ratio));
				}
				&.-kira03 {
					transform: scale(-1,-1);
					bottom: calc(10 * var(--scale-ratio));
					left: calc(30 * var(--scale-ratio));
				}
				&.-kira04 {
					transform: scaleY(-1);
					bottom: calc(10 * var(--scale-ratio));
					right: calc(30 * var(--scale-ratio));
				}
			}
			.ti {
				margin-bottom: calc(25 * var(--scale-ratio));
				color: var(--color-stay-text01);
				font-weight: 800;
				font-size: 125%;
				line-height: 1.1;
				text-align: center;
				white-space: nowrap;
			}
			.txt {
				margin-bottom: calc(25 * var(--scale-ratio));
				text-align: left;
				font-weight: 400;
				line-height: 1.5;
				white-space: nowrap;
			}
			.btn a {
				width: auto;
			}
		}
		&.-box02 {
			margin-bottom: calc(50 * var(--scale-ratio));
			border-color: var(--color-vpn-line01);
			background-color: var(--color-white01);
			color: var(--color-gray01);
			.logo {
				margin: 0 auto calc(50 * var(--scale-ratio));
				width: calc(328 * var(--scale-ratio));
			}
			.ti {
				margin-bottom: calc(25 * var(--scale-ratio));
				color: var(--color-stay-text01);
				font-weight: 800;
				font-size: 166%;
				line-height: 1.1;
				text-align: center;
				white-space: nowrap;
			}
			.txt {
				margin-bottom: calc(25 * var(--scale-ratio));
				text-align: left;
				font-weight: 400;
				line-height: 1.5;
			}
			.btn a {
				border-color: var(--color-vpn-button02);
				background-color: var(--color-vpn-button01);
				.btn-txt {
					color: var(--color-white01);
				}
				.arrow svg {
					fill: var(--color-white01);
				}
			}
		}
		&.-box03 {
			border-color: var(--color-fdd-red01);
			background-color: var(--color-fdd-bg01);
			color: var(--color-gray01);
			text-align: center;
			.logo {
				margin: 0 auto calc(50 * var(--scale-ratio));
				width: calc(404 * var(--scale-ratio));
			}
			.ti {
				margin-bottom: calc(10 * var(--scale-ratio));
				color: var(--color-fdd-red01);
				font-weight: 800;
				font-size: 166%;
				line-height: 1;
				white-space: nowrap;
			}
			.label {
				margin-bottom: calc(25 * var(--scale-ratio));
				padding: calc(5 * var(--scale-ratio)) calc(20 * var(--scale-ratio));
				border-radius: calc(10 * var(--scale-ratio));
				background-color: var(--color-fdd-red01);
				color: var(--color-white01);
				font-weight: bold;
				font-size: 125%;
				line-height: 1;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				height: calc(50 * var(--scale-ratio));
			}
			.txt {
				text-align: left;
				font-weight: 400;
				line-height: 1.5;
			}
			.start {
				margin: calc(25 * var(--scale-ratio)) 0;
				border: calc(5 * var(--scale-ratio)) solid var(--color-fdd-button01);
				border-radius: calc(40 * var(--scale-ratio));
				color: var(--color-fdd-red01);
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
				height: calc(80 * var(--scale-ratio));
			}
			.btn a {
				border-color: var(--color-fdd-button02);
				background-color: var(--color-fdd-button01);
				.btn-txt {
					color: var(--color-fdd-button03);
				}
				.arrow svg {
					fill: var(--color-fdd-button03);
				}
			}
		}
	}
	& + .note-list {
		margin: calc(50 * var(--scale-ratio)) 0;
		color: var(--color-gray01);
		font-weight: 400;
	}
}

/*--- content-ft  ---*/
.content-ft {
	padding: 0 calc(10 * var(--scale-ratio));
	position: relative;
	z-index: 5;
	#sns {
		margin: 0;
		border-color: var(--color-sns-line01);
		background-color: var(--color-sns-bg01);
		.snsBtn{
			margin-bottom: calc(50 * var(--scale-ratio));
			li {
				width: calc(100 * var(--scale-ratio));
				img {
					max-width: calc(100 * var(--scale-ratio));
				}
			}
			li + li {
				margin-left: calc(50 * var(--scale-ratio));
			}
		}
		.snsCap {
			p {
				color: var(--color-sns-text01);
				font-weight: bold;
				font-size: 125%;
			}
			.note-list {
				li {
					color: var(--color-sns-text01);
					font-size: 83%;
					line-height: 1.5;
				}
			}
		}
	}
}

/*--- ft-art  ---*/
.ft-art {
	margin-top: calc(-150 * var(--scale-ratio));
	background: url("../images/ft_bg.png") no-repeat 50% 50% / 100% 100%;
	height: calc(808 * var(--scale-ratio));
	.art {
		background: url("../images/ft_art.png") no-repeat 50% 50% / 100% 100%;
		position: relative;
		z-index: 10;
		display: block;
		width: 100%;
		height: 100%;
	}
}