@charset "utf-8";
/*-----------------------------------------------------*/
/* PC版 基本スタイル
/*-----------------------------------------------------*/
#footer_link {
    min-width: auto;
}
#container {
    width:100%;
    margin:0 auto;
    box-sizing: border-box;
}
.sp {
    display:none;
}
.inner {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}
#breadcrumb {
	max-width:100%;
	margin:15px auto;}

#snsBox ul li{
	padding-top:2px;
}
.box{
	display: inline-block;
	padding-top: 20px;
	/*margin-right: 50px; */
    margin: 0 30px 0;
    box-sizing: border-box;
}
#areaBooking {
    box-sizing: border-box;
}

@media screen and (max-width:640px) {
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
    #footer {
        display: none;
    }
    #breadSns {
        display: none;
    }
    header.common .logo {
        float: left;
        width: 275px;
    }
    header.common .navi li {
        float: right;
        padding-top: 15px;
	}
    #areaBooking {
        width: 100%;
    }
}
/*-----------------------------------------------------*/
/* パンくずのスタイル
/*-----------------------------------------------------*/
div#breadSns {
	width: 100%;
    max-width: 980px;
    margin: 5px auto 0;
    padding: 0;
    height: 32px;
}
@media screen and (min-width: 641px) {
    div#bread {
        float: left;
        margin: 6px 0 0 5px;
    }
	#snsBox {
        float: right;
        margin: 5px 0px 0px 0;
        vertical-align: top;
    }
	#snsBox ul li.tw {
        margin: 0 10px 0 -10px !important;
    }
	#snsBox ul li {
        float: left;
        padding: 0px;
        display: inline;
    }
}
@media (max-width: 640px) {
    div#breadSns {
        display: none;
    }
}
/*-----------------------------------------------------*/
/* 北海道オフシーズン　ボタン設定のスタイル
/*-----------------------------------------------------*/
#hokkaido_off .bookingBtn_2022 a {
	background-color: #ccc;
}
#hokkaido_off .btnAnimation_2022 a:hover {
	box-shadow:5px 6px 0px -2px rgba(0, 0, 0, 0.3); transition: none; cursor:default; transform: none;
}
#hokkaido_off .btnAnimation_2022 a:hover::after {
	animation: none;
}
/*-----------------------------------------------------*/
/* 動きのスタイル
/*-----------------------------------------------------*/
/* フェードイン */
.js-fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.js-fade-in.show {
	opacity: 1;
	transform: translateY(0);
}
/* PCでのhoverアニメーション */
@media (hover: hover) and (pointer: fine) {

	/* ボタンのhoverアニメーション */
	.btnAnimation_2022 a:hover {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px)scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: 0.3s ease-in-out;
		opacity: 1;
	}
	.btnAnimation_2022 a:hover::after {
		animation: arrowyoko infinite .7s ease-in;
	}
	.area-buttons .pc:hover {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px) scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: 0.3s ease-in-out;
		opacity: 1;
    }
}
/* タッチディバイスでのactiveアニメーション */
@media (hover: none) and (pointer: none) {
	.btnAnimation_2022 a:active {
		-webkit-transform: translate(0, -2px);
		transform: translate(0, -2px)scale(1.05, 1.05);
		color: #fff;
		-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
		box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
		transition: 0.3s ease-in-out;
		opacity: 1;
	}
}
/* IE11でのアニメーションのカクツキ対応 */
@media (-ms-high-contrast: none),
(-ms-high-contrast: active) {
	.btnAnimation_2022 a:hover {
		box-shadow: 8px 8px 5px 0 rgb(224, 222, 222);
		transform: scale(1.05, 1.05) translate(0, -2px);
	}
	.btnAnimation_2022 a:hover::after {
		animation: arrowyoko infinite .7s ease-in;
	}
}
@keyframes arrowyoko {
	0% {
		right: 25px;
	}
	100% {
		right: 10px;
		opacity: 0;
	}
}
@media screen and (max-width:980px) {
	/* タッチディバイスでのactiveアニメーション */
	@media (pointer: none) and (hover: none) {
		.btnAnimation_2022 a:hover {
			transform: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			transition: none;
			opacity: 1;
		}
		.btnAnimation_2022 a:active {
			-webkit-transform: translate(0, -2px);
			transform: translate(0, -2px)scale(1.05, 1.05);
			color: #fff;
			-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
			box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
			transition: .2s;
			opacity: 1;
		}
	}
}
/*-----------------------------------------------------*/
/* エリアタブのスタイル（エリアをタブで選択して都道府県から探すバージョン）
/*-----------------------------------------------------*/
.prefecture-grid {
	display: none;
}
.prefecture-grid.active {
  display: grid; /* もしくはflex/block */
}
.area-tabs {
	max-width: 1260px;
	margin: auto;
	border-radius: 8px;
	background: white;
	padding: 20px;
	margin-top: 30px;
}
.tab-list {
	display: flex;
	justify-content: space-between;
	list-style: none;
	font-size: 22px;
}
.tab {
	width:200px;
	padding: 20px 0;
	text-align: center;
	background: #eee;
	margin-right: 5px;
	cursor: pointer;
	font-weight: bold;
	box-sizing: border-box;
}
.tab:last-child {
    margin-right: 0;
}
.tab.active {
	background: #1977b3;
	color: white;
}
.prefecture-blocks {
    border: 4px solid #1977b3;
    padding: 35px 35px 35px;
    font-size: 22px;
}
.prefecture-blocks .prefecture-grid {
	display: none;
}
.prefecture-blocks .prefecture-grid.active {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px 50px;
}
.pref-button {
	background-color: #ff8623;
	color: white;
	padding: 20px 16px;
	text-decoration: none;
	position: relative;
	transition: background 0.3s;
	border-radius: 6px;
	box-shadow: 0 4px 0 #d0752a;
	transition: opacity 0.3s ease; /
}
.pref-button::after {
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .4em;
    height: .4em;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none;
    right: 25px;
}
.pref-button:hover {
    color: #fff;
}
.pref-button:hover::after {
    animation: arrowyoko infinite .7s ease-in;
}
@keyframes arrowyoko {
	0% {
		right: 25px;
	}
	100% {
		right: 10px;
		opacity: 0;
	}
}
.pref-button:hover {
	opacity: 0.8;
}
.pref-button:visited {
	color: #fff;
}

@media screen and (max-width:960px) {
	br.lead_br1 {
		display: none;
	}
	.tab-list {
		display: flex;
		justify-content: space-between;
		list-style: none;
		font-size: 2.2vw;
	}
}
@media screen and (max-width:1000px) {
	h4 img {
		width: 95%;
	}
	.prefecture-blocks .prefecture-grid.active {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 25px 25px;
	}
}
@media (max-width: 768px) {
	.tab-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 横3列に */
		gap: 8px;
		justify-items: center;
		margin-bottom: 12px;
		font-size: 20px;
	}
	.tab {
		width: 100%; /* グリッドの1fr幅に合わせる */
	}
}
@media screen and (max-width:640px) {
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
    #footer {
        display: none;
    }
    #breadSns {
        display: none;
    }
    header.common .logo {
        float: left;
        width: 275px;
    }
    header.common .navi li {
        float: right;
        padding-top: 15px;
	}
	.bnrArea h4 {
		margin-bottom: 15px !important;
	}
	.bnrArea {
		width: 98%;
		padding: 30px 0;
	}
	.h4_title_sp{
		font-size: 1.6em;
		font-weight: bold;
		margin-top: 10px;
	}
	.tab_title_sp {
		font-size: 1.5em;
		font-family: bold;
		margin: 50px 0 10px 0;
	}
	.tab-list {
		font-size: 3.4vw;
	}
	.pref-button {
		padding: 15px 15px;
	}
	.pref-button::after {
		right: 18px;
	}
	.text p {
		padding: 10px 0px 10px 10px;
	}
	.tab2_box {
		margin-top: 20px;
	}
	h4 img {
		width: 100%;
	}
    .prefecture-blocks {
        font-size: 18px;
        padding: 25px 15px 25px;
    }
    .prefecture-blocks .prefecture-grid.active{
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 15px;
    }
	.h3_area {
		font-size: 5.2vw;
	}
	.h3_twi::before {
		margin-right: 0;
		width: 30px;
		height: 35px;
	}
}
/*-----------------------------------------------------*/
/* エリアタブのスタイル（エリアのボタンから直接探すバージョン）
/*-----------------------------------------------------*/
.area {
	width: 100%;
	/* margin-top: 50px; */
}
.area__title {
	max-width: 1120px;
	margin: 0 auto;
	padding-top:5.9rem;
	padding-bottom: 8.6rem;
}
.area__title img:first-child {
	display: block;
}
.area__title img:last-child {
	display: none;
}
.area-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1000px;
    gap: 30px;
    width: 100%;
    margin: 0 auto;
	margin-bottom: 50px;
}
.btn {
	transition: all .3s;
}
.btn:hover {
	opacity: .7;
}
.area-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: none;
    height: 70px;
    padding: 0 40px;
    box-sizing: border-box;
    background-color: #ff7700;
    color: #fff;
    font-weight: bold;
    border-radius: 7px;
    box-shadow: 5px 6px 0px 0px #d0752a;
    text-decoration: none;
    font-size: var(--fz30);
    transition: .5s;
    cursor: pointer;
    box-sizing: border-box;
    padding: 50px 0px;
}
.btn__text:first-child {
	font-size: 4rem;
	display: inline-block;
	padding-right: 5px;
}
.btn__text:last-child {
	font-size: 3rem;
}
.btn_area .booking {
    width: 90%;
    margin: 0 auto;
}
.btn_area ul li {
    padding: 20px;
    transition: .5s all;
}
.btn_area ul li .pc {
    display: inline-block;
    width: 100%;
    position: relative;
}
.area-buttons .btn::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 15%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    bottom: 0;
    margin: auto;
    background: none;
}
.btn_area_acco ul li a {
    border: none;
    background-color: #009933 !important;
    color: #fff;
    box-shadow: 5px 6px 0px 0px #326b45;
    transition: .3s !important;
}
.btn .btn_booking .pc .btn_booking_acco {
	border: none;
}
.btn_area ul li a {
    font-weight: bold;
    border-radius: 7px;
    color: #fff;
    /* border: 3px solid #fff; */
    box-shadow: 5px 6px 0px -2px rgba(0, 0, 0, 0.3);
    padding: 0.5em 1.2em 0.6em 0.5em;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: .5s;
    font-size: 3.5rem;
    letter-spacing: 0.1em;
}
.br_acco {
    display: none;
}
.btn_area ul li a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .4em;
    height: .4em;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none;
    right: 1em;
}
@media (min-width: 768px) {
    .area-buttons .btn.sp {
        display: none;
    }
}
/* PC・タブレット画面の時 */
@media (min-width: 768px) {
    .area-buttons .btn.sp {
        display: none !important; /* SP用ボタンを確実に消す */
    }
}
@media screen and (max-width: 980px) {
	.area-buttons {
		width: 100%;
		gap: 20px;
    }
	.btn__text:first-child {
		font-size: 3.5rem;
	}
	.btn__text:last-child {
		font-size: 2.5rem;
	}
}
@media screen and (max-width: 850px) {
	.btn__text:first-child {
		font-size: clamp(2.5rem, 4.306vw - 2.603px, 3.4rem);
	}
	.btn__text:last-child {
		font-size: clamp(1.93rem, 2.967vw + 0.032rem, 2.55rem);
	}
	.br_acco {
        display: block;
    }
}
@media screen and (max-width: 800px) {
	.area__title {
		padding-top: clamp(0rem, 21.176vw - 7.941rem, 9rem);
		padding-bottom: clamp(6rem, 6.118vw + 3.706rem, 8.6rem);
	}
	.area__title img:first-child {
		display: none;
	}
	.area__title img:last-child {
		display: block;
	}
}
@media screen and (max-width: 767px) {
	.area-buttons .btn.pc {
		display: none;
	}
	a.btn.sp.area {
		margin-top: 0;
	}
	.btn.sp {
		display: flex;
	}
}
@media screen and (max-width: 730px) {
    .btn_area .booking {
        width: 100%;
    }
}
@media screen and (max-width: 640px) {
	.area-buttons {
        grid-template-columns: 1fr;
		gap: clamp(2.4rem, 2.264vw + 1.551rem, 3rem);
        max-width: 500px;
		padding-inline: clamp(0rem, -11.321vw + 7.245rem, 3rem);
		margin-bottom: 20px;
    }
	.area-buttons .btn {
        height: auto;
        padding: clamp(1.8rem, 2.642vw + 0.809rem, 2.5rem) 0;
    }
	.btn__text:first-child {
		font-size: clamp(2rem, 5.660vw - 0.123rem, 3.5rem);
	}
	.btn__text:last-child {
		font-size: clamp(1.5rem, 5.660vw - 0.623rem, 3rem);
	}
	.btn_area_acco {
        padding: 10px 20px !important;
    }
	.btn_area ul li {
        padding: 0px;
    }
	.btn_area ul li .btn_booking_acco {
        max-width: 500px;
        margin: 0 auto;
    }
	.btn_area ul li a::after {
        right: 0.5em;
    }
}
@media screen and (max-width: 500px) {
    .btn_area ul li .btn_booking_acco {
        font-size: 6.5vw;
    }
}
/*-----------------------------------------------------*/
/* ページトップボタンのスタイル
/*-----------------------------------------------------*/
#pagetop_btn {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}
#pagetop {
	position: fixed;
	z-index: 20;
	opacity: 0;
	transform: translateX(100px);
	display: none;
	cursor: pointer;
	right: 1%;
	bottom: 2%;
	font-size:0.9vw;
}
#pagetop a {
	display: inline-block;
	transition:all 0.3s;
	color: #fff;
	width: 60px;
	height: 60px;
	box-sizing:border-box;
	text-decoration: none;
	position:relative;
	text-align: center;
	background-color:#555555;
	border-radius: 4px;
}
#pagetop a span {
	position: absolute;
	top: 43%;
	left: 50%;
	width: 32%;
	height: 32%;
	margin-left: -15%;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}
#pagetop a:hover {
	text-decoration: none;
	background: #929292;
}

/*　左の動き　*/
#pagetop.LeftMove {
	animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
	from {
		opacity: 0;
		transform: translateX(130px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/*　右の動き　*/
#pagetop.RightMove {
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 1;
		transform: translateX(300px);
	}
}
@-webkit-keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

#reserve-btn {
	position: fixed;
	z-index: 20;
	opacity: 0;
	transform: translateX(100px);
	display: none;
	cursor: pointer;
	right: 1%;
	bottom: 110px;
	font-size: 0.9vw;
}
#reserve-btn a {
	display: inline-block;
	transition: all 0.3s;
	color: #fff;
	padding: 13px 40px 10px 30px;
	box-sizing: border-box;
	text-decoration: none;
	position: relative;
	text-align: center;
	background-color: #ff7700;
	border-radius: 4px;
	font-size: 20px;
	font-weight: 600;
}
#pagetop.LeftMove, #pagetop.RightMove,
#reserve-btn.LeftMove, #reserve-btn.RightMove {
	display: block;
}
li.reserve_Animation a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: .4em;
    height: .4em;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: none;
    right: 0.8em;
}

/* アニメーションは Page top と同じ動きに合わせる */
#reserve-btn.LeftMove {
	animation: LeftAnime 0.5s forwards;
}
#reserve-btn.RightMove {
	animation: RightAnime 0.5s forwards;
}