@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");

/* ========================================
   テーマカラー設定
======================================== */
:root {
	--aomori-color: #29CCE2;
	/* 青森（青系） */
	--hakodate-color: #F15A83;
	/* 函館（赤系） */
	--bg-beige: #F7F1EB;
	--bg-light-blue: #E5EAEA;
}


body {
	overflow: hidden;
}

#maincontents * {
	box-sizing: border-box;
}

#maincontents {
	position: relative;
	color: #000000;
	background-color: #fff;
	font-size: 24px;
	letter-spacing: 0em;
	font-weight: 400;
	line-height: 2;
	margin: 0 auto;
	font-family: "Zen Kaku Gothic New", sans-serif;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

.maincontents a {
	color: unset;
	text-decoration: none;
}

.maincontents img {
	vertical-align: bottom;
	max-width: 100%;
}

/* bg
---------------------------------------------------------------------- */
.bg__color01 {
	background: var(--bg-beige);
}

.bg__color02 {
	background: var(--bg-light-blue);
}



/* ---------------------------------------------------------------------- */
/* PC */
/* ---------------------------------------------------------------------- */
@media (min-width: 1001px) {
	a {
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	img {
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		-o-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;
	}

	a:active,
	a:hover {
		opacity: 0.7;
	}

	.img_hidden {
		opacity: 0;
		transition: 1s;
	}

	.img_open {
		-moz-animation: imgfade 1s linear 0s 1 normal forwards;
		-webkit-animation: imgfade 1s linear 0s 1 normal forwards;
		-o-animation: imgfade 1s linear 0s 1 normal forwards;
		-ms-animation: imgfade 1s linear 0s 1 normal forwards;
	}

	.img_open.ih2 {
		-moz-animation: imgfade 1s linear 0.3s 1 normal forwards;
		-webkit-animation: imgfade 1s linear 0.3s 1 normal forwards;
		-o-animation: imgfade 1s linear 0.3s 1 normal forwards;
		-ms-animation: imgfade 1s linear 0.3s 1 normal forwards;
	}

	.img_open.ih3 {
		-moz-animation: imgfade 1s linear 0.6s 1 normal forwards;
		-webkit-animation: imgfade 1s linear 0.6s 1 normal forwards;
		-o-animation: imgfade 1s linear 0.6s 1 normal forwards;
		-ms-animation: imgfade 1s linear 0.6s 1 normal forwards;
	}

	.img_open.ih4 {
		-moz-animation: imgfade 1s linear 0.9s 1 normal forwards;
		-webkit-animation: imgfade 1s linear 0.9s 1 normal forwards;
		-o-animation: imgfade 1s linear 0.9s 1 normal forwards;
		-ms-animation: imgfade 1s linear 0.9s 1 normal forwards;
	}

	.img_open.ih5 {
		-moz-animation: imgfade 1s linear 1.2s 1 normal forwards;
		-webkit-animation: imgfade 1s linear 1.2s 1 normal forwards;
		-o-animation: imgfade 1s linear 1.2s 1 normal forwards;
		-ms-animation: imgfade 1s linear 1.2s 1 normal forwards;
	}

	.showup {
		opacity: 0;
		transition: 1s;
		transform: translateY(20px);
		-webkit-transform: translateY(20px);
		-moz-transform: translateY(20px);
		-ms-transform: translateY(20px);
		-o-transform: translateY(20px);
	}

	.upview {
		-moz-animation: showup 0.6s linear 0s 1 normal forwards;
		-webkit-animation: showup 0.6s linear 0s 1 normal forwards;
		-o-animation: showup 0.6s linear 0s 1 normal forwards;
		-ms-animation: showup 0.6s linear 0s 1 normal forwards;
	}

	.upview.uv2 {
		-moz-animation: showup 0.6s linear 0.3s 1 normal forwards;
		-webkit-animation: showup 0.6s linear 0.3s 1 normal forwards;
		-o-animation: showup 0.6s linear 0.3s 1 normal forwards;
		-ms-animation: showup 0.6s linear 0.3s 1 normal forwards;
	}

	.upview.uv3 {
		-moz-animation: showup 0.6s linear 0.6s 1 normal forwards;
		-webkit-animation: showup 0.6s linear 0.6s 1 normal forwards;
		-o-animation: showup 0.6s linear 0.6s 1 normal forwards;
		-ms-animation: showup 0.6s linear 0.6s 1 normal forwards;
	}

	.upview.uv4 {
		-moz-animation: showup 0.6s linear 0.9s 1 normal forwards;
		-webkit-animation: showup 0.6s linear 0.9s 1 normal forwards;
		-o-animation: showup 0.6s linear 0.9s 1 normal forwards;
		-ms-animation: showup 0.6s linear 0.9s 1 normal forwards;
	}

	.upview.uv5 {
		-moz-animation: showup 0.6s linear 1.2s 1 normal forwards;
		-webkit-animation: showup 0.6s linear 1.2s 1 normal forwards;
		-o-animation: showup 0.6s linear 1.2s 1 normal forwards;
		-ms-animation: showup 0.6s linear 1.2s 1 normal forwards;
	}

	.showdown {
		opacity: 0;
		transition: 1s;
		transform: translateY(-20px);
		-webkit-transform: translateY(-20px);
		-moz-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		-o-transform: translateY(-20px);
	}

	.downview {
		-moz-animation: showdown 0.6s linear 0s 1 normal forwards;
		-webkit-animation: showdown 0.6s linear 0s 1 normal forwards;
		-o-animation: showdown 0.6s linear 0s 1 normal forwards;
		-ms-animation: showdown 0.6s linear 0s 1 normal forwards;
	}

	.downview.dv2 {
		-moz-animation: showdown 0.6s linear 0.3s 1 normal forwards;
		-webkit-animation: showdown 0.6s linear 0.3s 1 normal forwards;
		-o-animation: showdown 0.6s linear 0.3s 1 normal forwards;
		-ms-animation: showdown 0.6s linear 0.3s 1 normal forwards;
	}

	.downview.dv3 {
		-moz-animation: showdown 0.6s linear 0.6s 1 normal forwards;
		-webkit-animation: showdown 0.6s linear 0.6s 1 normal forwards;
		-o-animation: showdown 0.6s linear 0.6s 1 normal forwards;
		-ms-animation: showdown 0.6s linear 0.6s 1 normal forwards;
	}

	.downview.dv4 {
		-moz-animation: showdown 0.6s linear 0.9s 1 normal forwards;
		-webkit-animation: showdown 0.6s linear 0.9s 1 normal forwards;
		-o-animation: showdown 0.6s linear 0.9s 1 normal forwards;
		-ms-animation: showdown 0.6s linear 0.9s 1 normal forwards;
	}

	.showleft {
		opacity: 0;
		transition: 1s;
		transform: translateX(-20px);
		-webkit-transform: translateX(-20px);
		-moz-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
		-o-transform: translateX(-20px);
	}

	.leftview {
		-moz-animation: showleft 1s linear 0s 1 normal forwards;
		-webkit-animation: showleft 1s linear 0s 1 normal forwards;
		-o-animation: showleft 1s linear 0s 1 normal forwards;
		-ms-animation: showleft 1s linear 0s 1 normal forwards;
	}

	.leftview.uv2 {
		-moz-animation: showleft 0.6s linear 0.3s 1 normal forwards;
		-webkit-animation: showleft 0.6s linear 0.3s 1 normal forwards;
		-o-animation: showleft 0.6s linear 0.3s 1 normal forwards;
		-ms-animation: showleft 0.6s linear 0.3s 1 normal forwards;
	}

	.leftview.uv3 {
		-moz-animation: showleft 0.9s linear 0.3s 1 normal forwards;
		-webkit-animation: showleft 0.9s linear 0.3s 1 normal forwards;
		-o-animation: showleft 0.9s linear 0.3s 1 normal forwards;
		-ms-animation: showleft 0.9s linear 0.3s 1 normal forwards;
	}

	.showright {
		opacity: 0;
		transition: 1s;
		transform: translateX(20px);
		-webkit-transform: translateX(20px);
		-moz-transform: translateX(20px);
		-ms-transform: translateX(20px);
		-o-transform: translateX(20px);
	}

	.rightview {
		-moz-animation: showright 1s linear 0s 1 normal forwards;
		-webkit-animation: showright 1s linear 0s 1 normal forwards;
		-o-animation: showright 1s linear 0s 1 normal forwards;
		-ms-animation: showright 1s linear 0s 1 normal forwards;
	}

	.rightview.uv2 {
		-moz-animation: showright 0.6s linear 0.3s 1 normal forwards;
		-webkit-animation: showright 0.6s linear 0.3s 1 normal forwards;
		-o-animation: showright 0.6s linear 0.3s 1 normal forwards;
		-ms-animation: showright 0.6s linear 0.3s 1 normal forwards;
	}

	.rightview.uv3 {
		-moz-animation: showright 0.9s linear 0.3s 1 normal forwards;
		-webkit-animation: showright 0.9s linear 0.3s 1 normal forwards;
		-o-animation: showright 0.9s linear 0.3s 1 normal forwards;
		-ms-animation: showright 0.9s linear 0.3s 1 normal forwards;
	}

	.showfade {
		opacity: 0;
		transition: 1s;
	}

	.fadeview {
		-moz-animation: showfade 0.6s linear 0s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 0s 1 normal forwards;
		-o-animation: showfade 0.6s linear 0s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 0s 1 normal forwards;
	}

	.fadeview.uv2 {
		-moz-animation: showfade 0.6s linear 0.3s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 0.3s 1 normal forwards;
		-o-animation: showfade 0.6s linear 0.3s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 0.3s 1 normal forwards;
	}

	.fadeview.uv3 {
		-moz-animation: showfade 0.6s linear 0.6s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 0.6s 1 normal forwards;
		-o-animation: showfade 0.6s linear 0.6s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 0.6s 1 normal forwards;
	}

	.fadeview.uv4 {
		-moz-animation: showfade 0.6s linear 0.9s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 0.9s 1 normal forwards;
		-o-animation: showfade 0.6s linear 0.9s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 0.9s 1 normal forwards;
	}

	.fadeview.uv5 {
		-moz-animation: showfade 0.6s linear 1.2s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 1.2s 1 normal forwards;
		-o-animation: showfade 0.6s linear 1.2s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 1.2s 1 normal forwards;
	}

	.for_sp {
		display: none !important;
	}

	.for_tab {
		display: none !important;
	}

	.for_nw {
		display: none !important;
	}

	.tab .for_pcnotab {
		display: none !important;
	}

	.tab .for_tab {
		display: inline !important;
	}

	.wrap,
	#page {
		width: 100%;
		position: relative;
	}

	.pc_sidepadding {
		padding: 0 3%;
	}

	/* common
	---------------------------------------------------------------------- */
	.mainw,
	.mainw_pc {
		max-width: 1140px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.w900 {
		max-width: 900px;
		margin: 0 auto;
	}

	.w1000 {
		max-width: 1000px;
		margin: 0 auto;
	}

	.w1300 {
		max-width: 1340px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.w1600 {
		max-width: 1600px;
		margin: 0 auto;
	}

	.anchor {
		margin-top: -100px;
		padding-top: 100px;
	}

	.cflex {
		display: flex;
	}

	.img100 {
		width: 100%;
	}

	.img100 img {
		width: 100%;
	}

	.ui-state-default:hover,
	.ui-widget-content .ui-state-default:hover,
	.ui-widget-header .ui-state-default:hover {
		background: #000;
		color: #FFF;
	}

	/* btn
---------------------------------------------------------------------- */
	#maincontents  a.arrowBtn {
		font-size: 26px;
		font-weight: bold;
		color: #fff;
		background-color: #0071BC;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 390px;
		height: 100px;
		position: relative;
		padding: 1em 3em;
	}

	.arrowBtn::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 37px;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-style: solid;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-left: 12px solid #fff;
		border-right: 0;
	}

	.reservationBtn,
	.reservationMenu__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 56px;
		font-weight: bold;
		text-align: center;
		background-color: #fff;
		padding: 0.393em 2em;
		line-height: 1;
		cursor: pointer;
		position: relative;
		transition: opacity 0.3s;
	}

	#maincontents  .reservationBtn:hover {
		opacity: 0.7;
	}

	.reservationBtn.reservationBtn--stay {
		background: url(../images/icon_stay.svg) no-repeat center left 15px;
		background-size: 80px;
		background-color: #F7A3BA;
	}

	.reservationBtn.reservationBtn--stay::after {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-left: 26px solid #555555;
		border-right: 0;
		position: absolute;
		top: 50%;
		right: 47px;
		transform: translateY(-50%);
	}

	.reservationMenu__btn {
		background: url(../images/icon_jr.svg) no-repeat center left 15px;
		background-size: 80px;
		background-color: #BBD7DF;
	}

	.reservationMenu__btn::before,
	.reservationMenu__btn::after {
		content: "";
		width: 33px;
		height: 4px;
		background: #fff;
		position: absolute;
		top: 50%;
		right: 47px;
		transform: translateY(-50%);
	}

	.reservationMenu__btn::after {
		transform: translateY(-50%) rotate(90deg);
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
	}

	.reservationMenu__btn.is-open::after {
		transform: translateY(-50%) rotate(0deg);
	}

	.reservationMenu__list li a {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 50px;
		font-weight: bold;
		text-align: center;
		background-color: #fff;
		padding: 0.48em 2em;
		line-height: 1;
		position: relative;
		border-bottom: 2px solid #BBD7DF;
	}

	.reservationMenu__list li:last-of-type a {
		border: none;
	}

	.reservationMenu__list li a::after {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-left: 26px solid #808080;
		border-right: 0;
		position: absolute;
		top: 50%;
		right: 47px;
		transform: translateY(-50%);
	}

	.reservationMenu {
		border: 2px solid #BBD7DF;
	}

	#maincontents a.recommendedBtn {
        display: inline-block;
        font-size: 24px;
        line-height: 1;
        height: 35px;
        padding: 0.2em 0.5em 0.2em 0.5em;
        font-weight: bold;
        color: #fff;
        background-color: #000;
        text-align: right;
        position: relative;
        margin-bottom: 5px;
	}

	/* pageNav
  ---------------------------------------------------------------------- */
	#pageNav {
		padding-top: 150px;
	}

	.pageNav {
		padding: 70px 20px 0;
		width: calc(100% - 40px);
		margin: 0 auto;
		border-radius: 20px 20px 0 0;
		background-color: #9E005D;
		position: relative;
	}

	#maincontents .gnav {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 4px;
		margin-bottom: 60px;
	}

	.gnav li {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.gnav a {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding: 10px 10px 20px;
		background-color: #fff;
		font-size: min(2vw, 24px);
		font-weight: bold;
		letter-spacing: 0;
		text-align: center;
		line-height: 1.25;
		height: 100%;
		-webkit-transition: background-color 0.3s;
		transition: background-color 0.3s;
	}

	.gnav a span {
		display: inline-block;
		width: 85px;
	}

	.gnav li.is-active a,
	#maincontents .gnav a:hover {
		background-color: #FFFF8C;
		opacity: 1;
	}

	#maincontents .gnav a:hover img {
		opacity: 1;
	}

	.gnav li:last-of-type a {
		padding: 10px 10px 10px;
	}

	/* mascot
  ---------------------------------------------------------------------- */
	.mascot {
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-49%, -60%);
	}

	.mascot figure {
		width: 591px;
		position: relative;
		margin: 0;
	}

	.mascot figcaption {
		font-size: 14px;
		line-height: 1.35;
		font-weight: bold;
		position: absolute;
		top: 27px;
		right: 0;
		transform: translateX(92%);
	}

	.mascot figcaption span {
		text-indent: -0.5em;
		display: inline-block;
	}


	/* tab
  ---------------------------------------------------------------------- */
	.tab {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.tab li {
		width: 481px;
		font-size: 46px;
		font-weight: bold;
		color: #fff;
		letter-spacing: 0.3em;
		padding: 12px 20px 20px;
		text-align: center;
		line-height: 1.5;
		position: relative;
		z-index: 0;
		-webkit-transition: 0.3s;
		transition: 0.3s;
		cursor: pointer;
		margin: 0 -50px;
	}

	/*.tab li:hover {
		opacity: 0.7;
	}*/

	.tab li.is-move {
		margin: 0 -30px;
	}

	.tab li.is-active {
		z-index: 1;
	}

	.tab li#tab-aomori {
		background: url(../images/tab_aomori.png);
		background-size: 100% 100%;
		padding-right: 100px;
	}

	.tab li#tab-hakodate {
		background: url(../images/tab_hakodate.png);
		background-size: 100% 100%;
		padding-left: 120px;
	}

	.tab__content {
		border-top: 8px solid var(--hakodate-color);
	}

	.tab__content[data-id=aomori] {
		border-top: 8px solid var(--aomori-color);
	}

	/* keyframe
	---------------------------------------------------------------------- */
	@-moz-keyframes imgfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes imgfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-o-keyframes imgfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes imgfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-moz-keyframes showup {
		0% {
			opacity: 0;
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-webkit-keyframes showup {
		0% {
			opacity: 0;
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-o-keyframes showup {
		0% {
			opacity: 0;
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-ms-keyframes showup {
		0% {
			opacity: 0;
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-moz-keyframes showdown {
		0% {
			opacity: 0;
			transform: translateY(-20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-webkit-keyframes showdown {
		0% {
			opacity: 0;
			transform: translateY(-20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-o-keyframes showdown {
		0% {
			opacity: 0;
			transform: translateY(-20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-ms-keyframes showdown {
		0% {
			opacity: 0;
			transform: translateY(-20px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-moz-keyframes showleft {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-webkit-keyframes showleft {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-o-keyframes showleft {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-ms-keyframes showleft {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-moz-keyframes showright {
		0% {
			opacity: 0;
			transform: translateX(20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-webkit-keyframes showright {
		0% {
			opacity: 0;
			transform: translateX(20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-o-keyframes showright {
		0% {
			opacity: 0;
			transform: translateX(20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-ms-keyframes showright {
		0% {
			opacity: 0;
			transform: translateX(20px);
		}

		100% {
			opacity: 1;
		}
	}

	@-moz-keyframes showfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes showfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-o-keyframes showfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes latAo {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
}

/* End @media (min-width: 1001px) */
/* ---------------------------------------------------------------------- */


/* ---------------------------------------------------------------------- */
/* SP */
/* ---------------------------------------------------------------------- */
@media (max-width: 1000px) {


	#maincontents {
		font-size: calc(40 / 750 * 100vw);
		line-height: 1.65;
	}

	.ls-1 {
		letter-spacing: -1px;
	}

	.ls-2 {
		letter-spacing: -2px;
	}

	.ls-3 {
		letter-spacing: -3px;
	}

	.ls-4 {
		letter-spacing: -4px;
	}

	.fs10 {
		font-size: 3vw;
	}

	.fs14,
	.fs15 {
		font-size: 3.4vw;
	}

	.fs16 {
		font-size: 3.7vw;
	}

	.fs24 {
		font-size: 4vw;
	}

	.fs26 {
		font-size: 5vw;
	}

	.wrap,
	#page {
		width: 100%;
		position: relative;
	}

	.for_pc {
		display: none !important;
	}

	.for_tab {
		display: none;
	}

	.for_pcnotab {
		display: none !important;
	}

	.for_nw {
		display: none !important;
	}

	.cf_s:before,
	.cf_s:after {
		content: "";
		display: table;
	}

	.cf_s:after {
		clear: both;
	}

	.cf_s {
		zoom: 1;
	}

	.showup {
		opacity: 0;
		transition: 1s;
		transform: translateY(4vw);
		-webkit-transform: translateY(4vw);
		-moz-transform: translateY(4vw);
		-ms-transform: translateY(4vw);
		-o-transform: translateY(4vw);
	}

	.upview {
		-moz-animation: showup 1s linear 0s 1 normal forwards;
		-webkit-animation: showup 1s linear 0s 1 normal forwards;
		-o-animation: showup 1s linear 0s 1 normal forwards;
		-ms-animation: showup 1s linear 0s 1 normal forwards;
	}

	.showdown {
		opacity: 0;
		transition: 1s;
		transform: translateY(-4vw);
		-webkit-transform: translateY(-4vw);
		-moz-transform: translateY(-4vw);
		-ms-transform: translateY(-4vw);
		-o-transform: translateY(-4vw);
	}

	.downview {
		-moz-animation: showup 1s linear 0s 1 normal forwards;
		-webkit-animation: showup 1s linear 0s 1 normal forwards;
		-o-animation: showup 1s linear 0s 1 normal forwards;
		-ms-animation: showup 1s linear 0s 1 normal forwards;
	}

	.showleft {
		opacity: 0;
		transition: 1s;
		transform: translateX(-4vw);
		-webkit-transform: translateX(-4vw);
		-moz-transform: translateX(-4vw);
		-ms-transform: translateX(-4vw);
		-o-transform: translateX(-4vw);
	}

	.leftview {
		-moz-animation: showleft 1s linear 0s 1 normal forwards;
		-webkit-animation: showleft 1s linear 0s 1 normal forwards;
		-o-animation: showleft 1s linear 0s 1 normal forwards;
		-ms-animation: showleft 1s linear 0s 1 normal forwards;
	}

	.showright {
		opacity: 0;
		transition: 1s;
		transform: translateX(4vw);
		-webkit-transform: translateX(4vw);
		-moz-transform: translateX(4vw);
		-ms-transform: translateX(4vw);
		-o-transform: translateX(4vw);
	}

	.rightview {
		-moz-animation: showright 1s linear 0s 1 normal forwards;
		-webkit-animation: showright 1s linear 0s 1 normal forwards;
		-o-animation: showright 1s linear 0s 1 normal forwards;
		-ms-animation: showright 1s linear 0s 1 normal forwards;
	}

	.showfade {
		opacity: 0;
		transition: 1s;
	}

	.fadeview {
		-moz-animation: showfade 0.6s linear 0s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 0s 1 normal forwards;
		-o-animation: showfade 0.6s linear 0s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 0s 1 normal forwards;
	}

	.fadeview.uv2 {
		-moz-animation: showfade 0.6s linear 0.3s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 0.3s 1 normal forwards;
		-o-animation: showfade 0.6s linear 0.3s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 0.3s 1 normal forwards;
	}

	.fadeview.uv3 {
		-moz-animation: showfade 0.6s linear 0.6s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 0.6s 1 normal forwards;
		-o-animation: showfade 0.6s linear 0.6s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 0.6s 1 normal forwards;
	}

	.fadeview.uv4 {
		-moz-animation: showfade 0.6s linear 0.9s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 0.9s 1 normal forwards;
		-o-animation: showfade 0.6s linear 0.9s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 0.9s 1 normal forwards;
	}

	.fadeview.uv5 {
		-moz-animation: showfade 0.6s linear 1.2s 1 normal forwards;
		-webkit-animation: showfade 0.6s linear 1.2s 1 normal forwards;
		-o-animation: showfade 0.6s linear 1.2s 1 normal forwards;
		-ms-animation: showfade 0.6s linear 1.2s 1 normal forwards;
	}


	/* common
	---------------------------------------------------------------------- */
	.mainw,
	.w1300 {
		width: 88vw;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	.w950 {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}

	.anchor {
		margin-top: -20vw;
		padding-top: 20vw;
	}

	/* btn
---------------------------------------------------------------------- */
	#maincontents  a.arrowBtn {
		font-size: calc(40 / 750 *100vw);
		font-weight: bold;
		color: #fff;
		background-color: #0071BC;
		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(90 / 750 *100vw);
		position: relative;
		padding: .5em;
	}

	.arrowBtn::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 7.5vw;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-style: solid;
		border-top: 1.6845vw solid transparent;
		/* 3.369vw ÷ 2 */
		border-bottom: 1.6845vw solid transparent;
		border-left: 2.312vw solid #fff;
		border-right: 0;
	}

	.reservationBtn,
	.reservationMenu__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: calc(41 / 750 *100vw);
		font-weight: bold;
		text-align: center;
		background-color: #fff;
		padding: 0.393em 2em;
		line-height: 1;
		cursor: pointer;
		position: relative;
		transition: opacity 0.3s;
	}

	.reservationBtn:hover {
		opacity: 0.7;
	}

	.reservationBtn.reservationBtn--stay {
		background: url(../images/icon_stay.svg) no-repeat center left 1.5vw;
		background-size: calc(59 / 750 *100vw);
		background-color: #F7A3BA;
	}

	.reservationBtn.reservationBtn--stay::after {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-top: 1.4825vw solid transparent;
		border-bottom: 1.4825vw solid transparent;
		border-left: 2.568vw solid #555555;
		border-right: 0;
		position: absolute;
		top: 50%;
		right: 5vw;
		transform: translateY(-50%);
	}

	.reservationMenu__btn {
		background: url(../images/icon_jr.svg) no-repeat center left 1.5vw;
		background-size: calc(59 / 750 *100vw);
		background-color: #BBD7DF;
	}

	.reservationMenu__btn::before,
	.reservationMenu__btn::after {
		content: "";
		width: calc(24.5 / 750 *100vw);
		height: 4px;
		background: #fff;
		position: absolute;
		top: 50%;
		right: 4vw;
		transform: translateY(-50%);
	}

	.reservationMenu__btn::after {
		transform: translateY(-50%) rotate(90deg);
		-webkit-transition: 0.5s;
		-o-transition: 0.5s;
		transition: 0.5s;
	}

	.reservationMenu__btn.is-open::after {
		transform: translateY(-50%) rotate(0deg);
	}

	.reservationMenu__list li a {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: calc(37 / 750 *100vw);
		font-weight: bold;
		text-align: center;
		background-color: #fff;
		padding: 0.48em 2em;
		line-height: 1;
		position: relative;
		border-bottom: 2px solid #BBD7DF;
	}

	.reservationMenu__list li:last-of-type a {
		border: none;
	}

	.reservationMenu__list li a::after {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-top: 1.4825vw solid transparent;
		border-bottom: 1.4825vw solid transparent;
		border-left: 2.568vw solid #555555;
		border-right: 0;
		position: absolute;
		top: 50%;
		right: 5vw;
		transform: translateY(-50%);
	}

	.reservationMenu {
		border: 2px solid #BBD7DF;
	}

	#maincontents a.recommendedBtn {
		display: inline-block;
		font-size: 6.4vw;
		line-height: 1;
		padding: 0.2em 0.5em 0.2em 0.5em;
		font-weight: bold;
		color: #fff;
		background-color: #000;
		text-align: right;
		position: relative;
		margin-bottom: 3.5vw;
	}

	/* pageNav
  ---------------------------------------------------------------------- */
  	#pageNav {
		padding-top: 26vw;
	}

	.pageNav {
		padding: 11vw 0 0;
		width: 95vw;
		margin: 0 auto;
		border-radius: 5vw 5vw 0 0;
		background-color: #9E005D;
		position: relative;
	}

	.pageNav .mainw {
		width: 100%;
	}

	#maincontents .gnav {
		background-color: #fff;
		margin-bottom: 7.5vw;
	}

	.gnav li {
		border-bottom: 2px solid #E6E6E6;
	}

	.gnav a {
		font-size: 5.8666666667vw;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		padding: 2.8vw 2vw 2.8vw;
		background-color: #fff;
		font-weight: bold;
		letter-spacing: 0;
		text-align: center;
		line-height: 1.25;
		height: 100%;
		position: relative;
		-webkit-transition: background-color 0.3s;
		transition: background-color 0.3s;
	}

	.gnav a span {
		display: inline-block;
		width: 11.3333333333vw;
		margin-right: 1vw;
	}

	.gnav a::after {
		content: "";
		width: 2vw;
		height: 2vw;
		border-top: solid 2px #808080;
		border-right: solid 2px #808080;
		-webkit-transform: translateY(-50%) rotate(135deg);
		transform: translateY(-50%) rotate(135deg);
		position: absolute;
		right: 4vw;
		top: 50%;
	}

	.gnav li.is-active a,
	#maincontents .gnav a:hover {
		background-color: #FFFF8C;
		opacity: 1;
	}

	#maincontents .gnav a:hover img {
		opacity: 1;
	}

	.gnav li .eventIcon {
		margin: 1.5vw 0 -1.5vw -3vw;
	}

	/* mascot
  ---------------------------------------------------------------------- */
	.mascot {
        position: absolute;
        top: -23.5%;
        left: 50%;
        transform: translateX(-50%);
	}

	.mascot figure {
		display: flex;
		flex-direction: column-reverse;
		width: calc(591 / 750 *100vw);
		position: relative;
		margin: 0;
	}

	.mascot figcaption {
		text-align: center;
		font-size: calc(24 / 750 *100vw);
		line-height: 1.375;
		font-weight: bold;
	}

	.mascot figcaption span {
		text-indent: -0.5em;
		display: inline-block;
	}

	/* tab
  ---------------------------------------------------------------------- */
	.tab {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.tab li {
		width: 50.8vw;
		font-size: 6.4vw;
		font-weight: bold;
		color: #fff;
		letter-spacing: 0.3em;
		padding: 0.2em 1em 0.425em;
		text-align: center;
		line-height: 1.5;
		position: relative;
		z-index: 0;
		-webkit-transition: 0.3s;
		transition: 0.3s;
		cursor: pointer;
		margin: 0 -6.5vw;
	}

	/*.tab li:hover {
		opacity: 0.7;
	}*/

	.tab li.is-move {
		margin: 0 -3vw;
	}

	.tab li.is-active {
		z-index: 1;
	}

	.tab li#tab-aomori {
		background: url(../images/tab_aomori_sp.png);
		background-size: 100% 100%;
		padding-right: 2.2em;
	}

	.tab li#tab-hakodate {
		background: url(../images/tab_hakodate_sp.png);
		background-size: 100% 100%;
		padding-left: 2.6em;
	}

	.tab__content {
		border-top: 8px solid var(--hakodate-color);
	}

	.tab__content[data-id=aomori] {
		border-top: 8px solid var(--aomori-color);
	}

	/* keyframe
	---------------------------------------------------------------------- */
	@-moz-keyframes showup {
		0% {
			opacity: 0;
			transform: translateY(4vw);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-webkit-keyframes showup {
		0% {
			opacity: 0;
			transform: translateY(4vw);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-o-keyframes showup {
		0% {
			opacity: 0;
			transform: translateY(4vw);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-ms-keyframes showup {
		0% {
			opacity: 0;
			transform: translateY(4vw);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-moz-keyframes txtfade {
		0% {
			opacity: 0;
			transform: translateY(4vw);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-webkit-keyframes txtfade {
		0% {
			opacity: 0;
			transform: translateY(4vw);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-o-keyframes txtfade {
		0% {
			opacity: 0;
			transform: translateY(4vw);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-ms-keyframes txtfade {
		0% {
			opacity: 0;
			transform: translateY(4vw);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@-moz-keyframes showleft {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-webkit-keyframes showleft {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-o-keyframes showleft {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-ms-keyframes showleft {
		0% {
			opacity: 0;
			transform: translateX(-20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-moz-keyframes showright {
		0% {
			opacity: 0;
			transform: translateX(20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-webkit-keyframes showright {
		0% {
			opacity: 0;
			transform: translateX(20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-o-keyframes showright {
		0% {
			opacity: 0;
			transform: translateX(20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-ms-keyframes showright {
		0% {
			opacity: 0;
			transform: translateX(20px);
		}

		100% {
			opacity: 1;
			transform: translateX(0);
		}
	}

	@-moz-keyframes showfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes showfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-o-keyframes showfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes showfade {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
}

/* End @media (max-width:1000px) */


/* ---------------------------------------------------------------------- */
/* TOP
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* pc */
/* ---------------------------------------------------------------------- */
@media (min-width: 1001px) {

	/* mv 
  ---------------------------------------------------------------------- */
	#mv {
		padding: 0 20px;
		position: relative;
	}

	.mv__inr {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		border-radius: 20px;
		overflow: hidden;
		position: relative;
	}

	.mv__inr::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		background: url(../images/index/bg_mv.png) no-repeat center;
		background-size: auto 100%;
		z-index: 1;
	}

	.mv__item {
		width: 50%;
		padding: 110px 12.7% 110px 11.6%;
		position: relative;
		-webkit-transform-origin: top;
		transform-origin: top;
	}

	.mv__item::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--aomori-color);
		z-index: 0;
	}

	.mv__item.mv__item--hakodate {
		padding-right: 11.6%;
		padding-left: 12.7%;
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}

	.mv__item.mv__item--hakodate::after {
		background-color: var(--hakodate-color);
	}

	.mv__slide img {
		width: 100%;
	}

	.mv__slide .slick-slide,
	.mv__slide .slick-list {
		border-radius: 19px;
		overflow: hidden;
	}

	.mv__slide--hakodate .slick-slide {
		margin: 0 5px;
	}

	.mv__city {
		color: #fff;
		position: absolute;
		top: 22px;
		left: 32px;
		font-size: 7.125vw;
		font-weight: bold;
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
		line-height: 1;
		z-index: 1;
	}

	.mv__city span.en {
		font-size: 2.5vw;
		font-weight: bold;
		margin-top: 21px;
	}

	.mv__contentt {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.mv__logo {
		width: 22.6875vw;
		margin: 0 auto 12px;
	}

	.mv__ttl {
		font-size: 7.625vw;
		font-weight: 800;
		line-height: 1;
		margin-bottom: 20px;
	}

	.mv__copy {
		font-size: 1.75vw;
		font-weight: bold;
		line-height: 1.5;
	}

	.mv__item--hakodate .mv__city {
		right: 32px;
		left: initial;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	.mv__loopText {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 23px;
		line-height: 1;
		font-size: min(4vw, 58px);
		font-weight: 800;
		color: #fff;
		white-space: nowrap;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		overflow: hidden;
	}

	.mv__loopText ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-animation: loop 40s linear infinite;
		animation: loop 40s linear infinite;
	}

	/* mv animation
  ---------------------------------------------------------------------- */
	.mv__item::after {
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
	}

	.is-on .mv__item::after {
		-webkit-animation: bg_anime 0.5s ease-in-out forwards;
		animation: bg_anime 0.5s ease-in-out forwards;
		-webkit-transform-origin: top;
		transform-origin: top;
	}

	.mv__item.mv__item--hakodate::after {
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}

	.mv__slide {
		z-index: 1;
		opacity: 0;
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}

	.is-on .mv__slide {
		-webkit-animation: slide_anime 0.7s ease-in-out 0.7s forwards;
		animation: slide_anime 0.7s ease-in-out 0.7s forwards;
	}

	.mv__loopText {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}

	.is-on .mv__loopText {
		-webkit-animation: loop_anime 1s ease-in-out 1s forwards;
		animation: loop_anime 1s ease-in-out 1s forwards;
	}

	.mv__city {
		opacity: 0;
		-webkit-transform: scale(1.4);
		transform: scale(1.4);
	}

	.is-on .mv__city {
		-webkit-animation: city_anime 0.7s ease-in-out 1.3s forwards;
		animation: city_anime 0.7s ease-in-out 1.3s forwards;
	}

	.is-on .mv__item--hakodate .mv__city {
		-webkit-animation: city_anime 0.7s ease-in-out 1.8s forwards;
		animation: city_anime 0.7s ease-in-out 1.8s forwards;
	}

	.mv__contentt {
		opacity: 0;
		-webkit-transform-origin: left;
		transform-origin: left;
		-webkit-transform: scale(1.4) translate(-50%, -50%);
		transform: scale(1.4) translate(-50%, -50%);
	}

	.is-on .mv__contentt {
		-webkit-animation: content_anime 0.7s ease-in-out 2.3s forwards;
		animation: content_anime 0.7s ease-in-out 2.3s forwards;
	}

	@-webkit-keyframes bg_anime {
		0% {
			-webkit-transform: scale(1, 0);
			transform: scale(1, 0);
		}

		100% {
			-webkit-transform: scale(1, 1);
			transform: scale(1, 1);
		}
	}

	@keyframes bg_anime {
		0% {
			-webkit-transform: scale(1, 0);
			transform: scale(1, 0);
		}

		100% {
			-webkit-transform: scale(1, 1);
			transform: scale(1, 1);
		}
	}

	@-webkit-keyframes slide_anime {
		0% {
			-webkit-transform: scale(1.4);
			transform: scale(1.4);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes slide_anime {
		0% {
			-webkit-transform: scale(1.4);
			transform: scale(1.4);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}

	@-webkit-keyframes loop_anime {
		0% {
			opacity: 0;
			-webkit-transform: translateY(20px);
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
	}

	@keyframes loop_anime {
		0% {
			opacity: 0;
			-webkit-transform: translateY(20px);
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
	}

	@-webkit-keyframes city_anime {
		0% {
			-webkit-transform: scale(1.4);
			transform: scale(1.4);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes city_anime {
		0% {
			-webkit-transform: scale(1.4);
			transform: scale(1.4);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}

	@-webkit-keyframes content_anime {
		0% {
			-webkit-transform: scale(1.4) translate(-50%, -50%);
			transform: scale(1.4) translate(-50%, -50%);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1) translate(-50%, -50%);
			transform: scale(1) translate(-50%, -50%);
			opacity: 1;
		}
	}

	@keyframes content_anime {
		0% {
			-webkit-transform: scale(1.4) translate(-50%, -50%);
			transform: scale(1.4) translate(-50%, -50%);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1) translate(-50%, -50%);
			transform: scale(1) translate(-50%, -50%);
			opacity: 1;
		}
	}

	/* bannerArea
  ---------------------------------------------------------------------- */
	.bannerArea {
		padding: 100px 0 0;
	}

	.bannerArea__inr {
		max-width: 1120px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.bannerArea__list {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 60px 12px;
	}

	.bannerArea__list li {
		width: calc((100% - 12px) / 2);
	}

	.bannerArea__list li:first-of-type {
		width: 100%;
	}

	/* spot
  ---------------------------------------------------------------------- */
	.spot {
		padding: 160px 0 155px;
	}

	.spot:last-child {
		padding-bottom: 240px;
	}

	.spot__inr {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		padding-left: 20px;
		position: relative;
	}

	.spot__img {
		width: 48%;
		max-height: 570px;
		overflow: hidden;
		margin-top: 30px;
		border-radius: 100px 0 0 100px;
	}

	.spot__img .slick-list  ,
	.spot__img .slick-track {
		height: 100%;
	}

	.spot__img .slick-dots {
		bottom: 20px;
		z-index: 10;
	}

	.spot__img .slick-dots li button:before {
		color: #fff;
		font-size: 15px;
		opacity: 1;
	}

	.spot__img .slick-dots li.slick-active button:before {
		color: #7f7f7f;
		opacity: 1;
	}

	.spot__img img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.spot__content {
		margin-right: 40px;
		max-width: 600px;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.spot__ttl {
		font-size: 34px;
		padding: 0.35em 0;
		font-weight: bold;
		line-height: 1.5;
		border-bottom: 2px solid #000;
		margin-bottom: 45px;
		position: relative;
	}

	.spot__ttl span {
		text-align: center;
		font-size: 18px;
		position: absolute;
		bottom: 86%;
		left: 9px;
		width: 287px;
		height: 57px;
		background: url(../images/icon_bubble.png) no-repeat center;
		background-size: contain;
	}

	.spot__txt {
		font-size: 24px;
		font-weight: bold;
		line-height: 2;
		margin-bottom: 72px;
		padding-right: 0.58em;
	}

	.spot__copy {
		margin-bottom: 20px;
	}

	.spot__copy dt {
		font-size: 24px;
		font-weight: bold;
	}

	.spot__copy dd {
		font-size: 18px;
		font-weight: 400;
		line-height: 2.22;
		margin-bottom: 30px;
	}

	.spot__copy dd:last-of-type {
		margin-bottom: 0;
	}

	.spot__access dt {
		display: inline-block;
		font-size: 24px;
		line-height: 1;
		height: 35px;
		padding: 0.2em 0.1em 0.2em 0.5em;
		font-weight: bold;
		color: #fff;
		background-color: var(--hakodate-color);
		text-align: right;
		position: relative;
		margin-bottom: 5px;
	}

	.spot__access dt::after {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent;
		border-left: 18px solid var(--hakodate-color);
		border-right: 0;
		position: absolute;
		top: 0;
		left: 100%;
	}

	.spot__access dd {
		color: var(--hakodate-color);
		font-size: 18px;
		font-weight: bold;
	}

	.spot:first-child .spot__ttl span {
		letter-spacing: -0.04em;
		padding-left: 15px;
	}

	.spot:nth-of-type(even) .spot__inr {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
		padding: 0 20px 0 0;
	}

	.spot:nth-of-type(even) .spot__img {
		border-radius: 0 100px 100px 0;
	}

	.spot:nth-of-type(even) .spot__content {
		margin: 0 0 0 40px;
	}

	/* rooms
  ---------------------------------------------------------------------- */
	.loopText {
		font-size: 22px;
		font-weight: bold;
		color: #fff;
		background-color: var(--hakodate-color);
		white-space: nowrap;
		width: 100%;
		height: 30px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		overflow: hidden;
	}

	.loopText ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-animation: loop-reverse 40s linear infinite;
		animation: loop-reverse 40s linear infinite;
	}

	.loopText li span {
		margin-right: 13px;
	}

	.loopText.loopText--aomori {
		background-color: var(--aomori-color);
	}

	.loopText.loopText--aomori ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-animation: loop 40s linear infinite;
		animation: loop 40s linear infinite;
	}

	@-webkit-keyframes loop {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}
	}

	@keyframes loop {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}
	}

	@-webkit-keyframes loop-reverse {
		0% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}

		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}

	@keyframes loop-reverse {
		0% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}

		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}

	/* plan
  ---------------------------------------------------------------------- */
	.plan {
		background: url(../images/index/bg_plan.png) no-repeat left;
		background-size: auto 100%;
	}

	.plan .reservationBtn.reservationBtn--stay {
		margin-bottom: 62px;
	}

	.plan__inr {
		max-width: 930px;
		padding: 23px 20px 102px;
		margin: 0 auto;
	}

	#maincontents  .plan__img {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 22px 0 22px 8px;
	}

	#maincontents #plan__aomori.plan__img {
        flex-direction: row-reverse;
	}

	.plan__ttl {
		font-size: 74px;
		font-weight: 800;
		text-align: center;
		line-height: 1.6;
		margin-bottom: 67px;
	}

	.plan__ttl span {
		display: block;
		font-size: 40px;
	}

	/* ferry
  ---------------------------------------------------------------------- */
	.ferry {
		padding-top: 87px;
	}

	.ferry__inr {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.ferry__img {
		width: 50%;
		max-height: 650px;
	}

	.ferry__img img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.ferry__content {
		width: 50%;
		background-color: #B2DDFC;
		padding: 90px 4% 90px 5%;
	}

	.ferry__txt {
		font-size: 30px;
		font-weight: 800;
		text-align: left;
		line-height: 1.55;
		margin-bottom: 7px;
	}

	.ferry__txt span {
		display: block;
		font-size: 40px;
	}

	.ferry__wrap {
		display: inline-block;
	}

	.ferry__ttl {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		font-size: min(5vw, 60px);
		font-weight: 800;
		line-height: 1.1;
		margin-bottom: 72px;
	}

	.ferry__ttl span {
		margin-top: 22px;
		padding-top: 17px;
		font-size: 34px;
		display: inline-block;
		border-top: 3px solid #000;
	}

	/* other
  ---------------------------------------------------------------------- */
	.other {
		padding: 80px 0 190px;
	}

	.other .reservationBtn.reservationBtn--stay {
		margin-bottom: 62px;
	}

	.other__inr {
		max-width: 930px;
		padding: 0 20px;
		margin: 0 auto;
	}

	.other__ttl {
		text-align: center;
		font-size: 50px;
		font-weight: 800;
		margin-bottom: 70px;
	}
}

/* ---------------------------------------------------------------------- */
/* SP */
/* ---------------------------------------------------------------------- */
@media (max-width: 1000px) {

	/* mv 
  ---------------------------------------------------------------------- */
	#mv {
		padding: 0 3vw;
		position: relative;
	}

	.mv__inr {
		border-radius: 5vw;
		overflow: hidden;
		position: relative;
	}

	.mv__inr::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		background: url(../images/index/bg_mv_sp.png) no-repeat center;
		background-size: auto 100%;
		z-index: 1;
	}

	.mv__item {
		padding: 9vw 22vw 12vw;
		position: relative;
		-webkit-transform-origin: top;
		transform-origin: top;
	}

	.mv__item::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--aomori-color);
		z-index: 0;
	}

	.mv__item.mv__item--hakodate {
		padding: 12vw 22vw 9vw;
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}

	.mv__item.mv__item--hakodate::after {
		background-color: var(--hakodate-color);
	}

	.mv__slide img {
		width: 100%;
	}

	.mv__slide .slick-slide,
	.mv__slide .slick-list {
		border-radius: 2.5333333333vw;
		overflow: hidden;
	}

	.mv__slide--hakodate .slick-slide {
		margin: 0 5px;
	}

	.mv__city {
		color: #fff;
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		line-height: 1;
		font-size: 15.2vw;
		font-weight: bold;
		position: absolute;
		z-index: 1;
		top: 8vw;
		left: 3vw;
		top: 8vw;
		left: 3vw;
		right: 3vw;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}

	.mv__city span.en {
		font-size: 9.0666666667vw;
		font-weight: bold;
		margin-right: 2.5vw;
		margin-top: 1vw;
	}

	.mv__contentt {
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 3vw;
		z-index: 1;
	}

	.mv__logo {
		width: 50vw;
		margin: 0 auto;
	}

	.mv__ttl {
		font-size: 18vw;
		font-weight: 800;
		line-height: 1;
		letter-spacing: 0;
		margin-top: -1vw;
	}

	.mv__copy {
		font-size: 2.9333333333vw;
		font-weight: bold;
		line-height: 1.37;
	}

	.mv__loopText {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 1.5vw;
		line-height: 1;
		font-size: 6.4vw;
		font-weight: 800;
		color: #fff;
		white-space: nowrap;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		overflow: hidden;
	}

	.mv__loopText ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-animation: loop 40s linear infinite;
		animation: loop 40s linear infinite;
	}

	.mv__item--hakodate .mv__city {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		top: 11vw;
	}

	.mv__item--hakodate .mv__city span.en {
		margin-top: 1vw;
		margin-left: 4vw;
	}

	/* mv animation
  ---------------------------------------------------------------------- */
	.mv__item::after {
		-webkit-transform: scale(1, 0);
		transform: scale(1, 0);
	}

	.is-on .mv__item::after {
		-webkit-animation: bg_anime 0.5s ease-in-out forwards;
		animation: bg_anime 0.5s ease-in-out forwards;
		-webkit-transform-origin: top;
		transform-origin: top;
	}

	.mv__item.mv__item--hakodate::after {
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}

	.is-on .mv__item--hakodate::after {
		-webkit-animation: bg_anime 0.5s ease-in-out 0.3s forwards;
		animation: bg_anime 0.5s ease-in-out 0.3s forwards;
	}

	.mv__slide {
		z-index: 1;
		opacity: 0;
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}

	.is-on .mv__slide {
		-webkit-animation: slide_anime 0.7s ease-in-out 0.7s forwards;
		animation: slide_anime 0.7s ease-in-out 0.7s forwards;
	}

	.mv__loopText {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
	}

	.is-on .mv__loopText {
		-webkit-animation: loop_anime 1s ease-in-out 1s forwards;
		animation: loop_anime 1s ease-in-out 1s forwards;
	}

	.mv__city {
		opacity: 0;
		-webkit-transform: scale(1.4);
		transform: scale(1.4);
	}

	.is-on .mv__city {
		-webkit-animation: city_anime 0.7s ease-in-out 1.3s forwards;
		animation: city_anime 0.7s ease-in-out 1.3s forwards;
	}

	.is-on .mv__item--hakodate .mv__city {
		-webkit-animation: city_anime 0.7s ease-in-out 1.8s forwards;
		animation: city_anime 0.7s ease-in-out 1.8s forwards;
	}

	.mv__contentt {
		opacity: 0;
		-webkit-transform-origin: left;
		transform-origin: left;
		-webkit-transform: scale(1.4) translate(-50%, -50%);
		transform: scale(1.4) translate(-50%, -50%);
	}

	.is-on .mv__contentt {
		-webkit-animation: content_anime 0.7s ease-in-out 2.3s forwards;
		animation: content_anime 0.7s ease-in-out 2.3s forwards;
	}

	@-webkit-keyframes bg_anime {
		0% {
			-webkit-transform: scale(1, 0);
			transform: scale(1, 0);
		}

		100% {
			-webkit-transform: scale(1, 1);
			transform: scale(1, 1);
		}
	}

	@keyframes bg_anime {
		0% {
			-webkit-transform: scale(1, 0);
			transform: scale(1, 0);
		}

		100% {
			-webkit-transform: scale(1, 1);
			transform: scale(1, 1);
		}
	}

	@-webkit-keyframes slide_anime {
		0% {
			-webkit-transform: scale(1.4);
			transform: scale(1.4);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes slide_anime {
		0% {
			-webkit-transform: scale(1.4);
			transform: scale(1.4);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}

	@-webkit-keyframes loop_anime {
		0% {
			opacity: 0;
			-webkit-transform: translateY(20px);
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
	}

	@keyframes loop_anime {
		0% {
			opacity: 0;
			-webkit-transform: translateY(20px);
			transform: translateY(20px);
		}

		100% {
			opacity: 1;
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}
	}

	@-webkit-keyframes city_anime {
		0% {
			-webkit-transform: scale(1.4);
			transform: scale(1.4);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes city_anime {
		0% {
			-webkit-transform: scale(1.4);
			transform: scale(1.4);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}
	}

	@-webkit-keyframes content_anime {
		0% {
			-webkit-transform: scale(1.4) translate(-50%, -50%);
			transform: scale(1.4) translate(-50%, -50%);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1) translate(-50%, -50%);
			transform: scale(1) translate(-50%, -50%);
			opacity: 1;
		}
	}

	@keyframes content_anime {
		0% {
			-webkit-transform: scale(1.4) translate(-50%, -50%);
			transform: scale(1.4) translate(-50%, -50%);
			opacity: 0;
		}

		100% {
			-webkit-transform: scale(1) translate(-50%, -50%);
			transform: scale(1) translate(-50%, -50%);
			opacity: 1;
		}
	}

	/* bannerArea
  ---------------------------------------------------------------------- */
	.bannerArea {
		padding: 7.5vw 0 0;
	}

	.bannerArea__inr {
		max-width: 1120px;
		margin: 0 auto;
		padding: 0 4vw;
	}

	.bannerArea__list li {
		margin-bottom: 5vw;
	}

	.bannerArea__list li:last-of-type {
		margin-bottom: 0;
	}

	/* spot
  ---------------------------------------------------------------------- */
	.spot {
		padding: 16vw 0 17vw;
	}

	.spot.spot--large {
        padding-top: 25vw;
	}

	.spot:last-child {
		padding-bottom: 19vw;
	}

	.spot__inr {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
		position: relative;
		/*padding-top: 23.5vw;*/
		margin-top: 23.5vw;
	}

	.spot__img {
		overflow: hidden;
		border-radius: 13.3333333333vw 0 0 13.3333333333vw;
		margin-bottom: 9vw;
	}

		.spot__img .slick-list  ,
	.spot__img .slick-track {
		height: 100%;
	}

	.spot__img .slick-dots {
        bottom: 5vw;
		z-index: 10;
	}

	.spot__img .slick-dots li {
		margin: 0 3vw;
	}

	.spot__img .slick-dots li button:before {
		color: #fff;
		font-size: 4vw;
		opacity: 1;
	}

	.spot__img .slick-dots li.slick-active button:before {
		color: #7f7f7f;
		opacity: 1;
	}

	.spot__img img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.spot__content {
		padding: 0 5vw;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.spot__ttlWrap {
		position: absolute;
		/*top: 0;*/
        bottom: calc(100% + 8vw);
		left: 5vw;
		right: 0;
		border-bottom: 2px solid #000;
	}

	.spot__ttl {
		font-size: 6.6666666667vw;
		padding: 0.35em 0;
		font-weight: bold;
		line-height: 1.5;
		position: relative;
	}

	.spot__ttl span {
		text-align: center;
		font-size: 3.7333333333vw;
		position: absolute;
		bottom: 86%;
		left: 9px;
		width: 58vw;
		height: 12vw;
		background: url(../images/icon_bubble.png) no-repeat center;
		background-size: contain;
	}

	.spot__txt {
		font-size: 5.3333333333vw;
		font-weight: bold;
		line-height: 1.65;
		margin-bottom: 6.5vw;
	}

	.spot__copy {
		margin-bottom: 2.6666666667vw;
	}

	.spot__copy dt {
		font-size: 6.4vw;
		font-weight: bold;
	}

	.spot__copy dd {
		font-size: 4.8vw;
		font-weight: 400;
		line-height: 2.22;
		margin-bottom: 4vw;
	}

	.spot__copy dd:last-of-type {
		margin-bottom: 0;
	}

	.spot__access dt {
		display: inline-block;
		font-size: 6.4vw;
		line-height: 1;
		padding: 0.2em 0.1em 0.2em 0.5em;
		font-weight: bold;
		color: #fff;
		background-color: var(--hakodate-color);
		text-align: right;
		position: relative;
		margin-bottom: 3.5vw;
	}

	.spot__access dt::after {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-top: 4.5vw solid transparent;
		border-bottom: 4.5vw solid transparent;
		border-left: 5vw solid var(--hakodate-color);
		border-right: 0;
		position: absolute;
		top: 0;
		left: 100%;
	}

	.spot__access dd {
		color: var(--hakodate-color);
		font-size: 4.8vw;
		font-weight: bold;
		line-height: 1.55;
	}

	.spot:first-child .spot__ttl span {
		letter-spacing: -0.04em;
		padding-left: 1vw;
	}

	.spot:nth-of-type(even) .spot__img {
		border-radius: 0 13.3333333333vw 13.3333333333vw 0;
	}

	.spot:nth-of-type(even) .spot__ttlWrap {
		left: 0;
		right: 5vw;
		padding-left: 5vw;
	}

	/* rooms
  ---------------------------------------------------------------------- */
	.loopText {
		font-size: 2.9333333333vw;
		font-weight: bold;
		color: #fff;
		background-color: var(--hakodate-color);
		white-space: nowrap;
		width: 100%;
		height: 30px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		overflow: hidden;
	}

	.loopText ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-animation: loop-reverse 40s linear infinite;
		animation: loop-reverse 40s linear infinite;
	}

	.loopText li span {
		margin-right: 13px;
	}

	.loopText.loopText--aomori {
		background-color: var(--aomori-color);
	}

	.loopText.loopText--aomori ul {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-animation: loop 40s linear infinite;
		animation: loop 40s linear infinite;
	}

	@-webkit-keyframes loop {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}
	}

	@keyframes loop {
		0% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}

		100% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}
	}

	@-webkit-keyframes loop-reverse {
		0% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}

		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}

	@keyframes loop-reverse {
		0% {
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
		}

		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}

	/* plan
  ---------------------------------------------------------------------- */
	.plan {
		background: url(../images/index/bg_plan_sp.png) no-repeat left;
		background-size: 100% 100%;
	}

	.plan .reservationBtn.reservationBtn--stay {
		margin-bottom: 6vw;
	}

	.plan__inr {
		max-width: 930px;
		padding: 3.5vw 6.5vw 0.5vw;
		margin: 0 auto;
	}

	#maincontents  .plan__img {
		padding: 22px 0 22px 0;
	}

	#maincontents  .plan__img li {
		transform: translateY(0px) !important;
    	opacity: 1 !important;
	}

	.plan__ttl {
		font-size: 7.4666666667vw;
		font-weight: 800;
		text-align: center;
		line-height: 1.6;
		margin-bottom: 7.5vw;
	}

	.plan__ttl span {
		display: block;
		font-size: 5.3333333333vw;
	}

	/* ferry
  ---------------------------------------------------------------------- */
	.ferry {
		padding-top: 10vw;
	}

	.ferry__img img {
		width: 100%;
		aspect-ratio: 5/3;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.ferry__content {
		background-color: #B2DDFC;
		padding: 5.5vw 5vw 12vw;
	}

	.ferry__txt {
		font-size: 4vw;
		font-weight: 800;
		text-align: left;
		line-height: 1.55;
		margin-bottom: 7px;
	}

	.ferry__txt span {
		display: block;
		font-size: 5.3333333333vw;
	}

	.ferry__wrap {
		max-width: 78vw;
		margin: 0 auto;
	}

	.ferry__ttl {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		font-size: 8vw;
		font-weight: 800;
		line-height: 1.1;
		margin-bottom: 72px;
	}

	.ferry__ttl span {
		margin-top: 2.8vw;
		padding: 2.5vw 2vw 0 0;
		font-size: 4.5333333333vw;
		display: inline-block;
		border-top: 3px solid #000;
	}

	/* other
  ---------------------------------------------------------------------- */
	.other {
		padding: 16vw 0 25vw;
	}

	.other .reservationBtn.reservationBtn--stay {
		margin-bottom: 6vw;
	}

	.other__inr {
		padding: 0 6.5vw;
		margin: 0 auto;
	}

	.other__ttl {
		text-align: center;
		font-size: 6.4vw;
		font-weight: 800;
		margin-bottom: 14vw;
	}
}