@charset "utf-8";

/*================================================================
# フォント設定
================================================================ */
html {
	font-size: calc(10px + 2 * (100vw - 1280px) / 400);
}

@media screen and (min-width: 1600px) {
	html {
		font-size: calc(10px + 2 * (100vw - 1600px) / 400);
	}
}

@media screen and (max-width: 559px) {
	html {
		font-size: calc(10px + 8 * (100vw - 414px) / 649);
	}
}

body {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.618;
	color: #090909;
	letter-spacing: 0;
	word-wrap: break-word;
	word-break: break-all;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	line-break: strict;
	overflow-wrap: break-word;
}

/*================================================================
# 宿泊日検索
================================================================ */
#search_wrap,
#search_wrap .search_fixed {
	width: 100vw;
	position: fixed;
	top: auto;
	bottom: 0;
	left: 0;
	z-index: 10000;
}

#search {
	width: 100vw;
	padding: 0;
	font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', Yu Gothic Medium, '游ゴシック', Yu Gothic, 'メイリオ', Meiryo, sans-serif;
	font-size: 13px;
}

#search>dl {
	display: block;
}

#search>dl>dd {
	padding: 0;
}

#search .accordion-dd {
	padding: 0;
	display: block;
}

#search .accordion-dd form {
	padding: 16px;
	border-right: 10px solid #ffadb7;
	border-bottom: 10px solid #ffadb7;
	border-left: 10px solid #ffadb7;
	background: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

#search>dl>dd p img {
	width: 100%;
}

#search>dl>dt {
	padding: 0;
}

#search>dl>dd .date_489ban {
	width: 100%;
	padding: 0;
	display: flex;
	align-items: center;
}

/*チェックボックスを消す*/
.checkbox {
	display: none;
}

#search>dl>dt.btn {
	width: 100%;
	padding: 0;
}

.accordion .btn label {
	padding: 8px;
	cursor: pointer;
	position: relative;
	display: block;
}

#search .inbox_489ban dl {
	margin: 0;
	display: flex;
	align-items: center;
	float: none;
}

#search .inbox_489ban dl.room_489ban {
	margin: 0 0 0 16px;
}

/*ラベル内の矢印の設定*/
.accordion .btn label::after {
	border-top: 10px solid #fff;
	border-right: 7px solid transparent;
	border-left: 7px solid transparent;
	position: absolute;
	content: "";
	top: 50%;
	right: 20px;
	display: block;
	transition: 0.4s 0.4s;
	transform: translate(0, -50%);
}

/*表示される要素の基本設定*/
.accordion dd {
	height: 0;
	padding: 0 0 0 8px;
	flex: 1 1 0;
	overflow: hidden;
	transition: 0.4s;
}

/*ラベル内の矢印のアニメーション設定*/
.checkbox:checked~dl dt label::after {
	transform: translate(0, -50%) rotate(-180deg);
}

/*表示される要素のアニメーション設定*/
.checkbox:checked~dl dd {
	height: auto;
}

#search .date_489ban+.inbox_489ban {
	width: 100%;
	padding: 0;
	display: flex;
	align-items: center;
}

#search>dl>dd .inbox_489ban:nth-of-type(2) {
	padding: 0;
	display: flex;
	align-items: center;
}

#search>dl>dd .date_489ban dt {
	margin: 0;
	float: none;
}

.accordion p {
	display: none;
}

#search>dl>dd .person_489ban,
#search>dl>dd .person_489ban:nth-of-type(2) {
	margin: 0 8px 0 0;
	padding: 0;
	display: flex;
	align-items: center;
	float: none;
}

#search>dl>dd .inbox_489ban:nth-of-type(3) {
	display: none;
}

#search button {
	margin: 0;
}

#search .inbox_489ban dd {
	padding: 0;
	float: none;
}

/*================================================================
# 既存cssリセット
================================================================ */
.pc {
	display: none;
}

#header_wrap {
	height: 74px;
	position: fixed;
	z-index: 9;
}

#header {
	width: 100%;
	height: 74px;
	padding: 0;
	background: url(../common/img/line.gif) repeat-x center bottom, url(../common/img/h_bg.png) no-repeat left top, rgba(255, 255, 255, 0.763);
}

#header #logo {
	padding: 0;
	position: absolute;
	top: 16px;
	left: 16px;
}

#header #logo img {
	width: auto;
	height: 44px;
	padding: 0;
}

#header h1,
#header .tel-link+p,
#main_tit {
	display: none;
}

#contents {
	margin-bottom: 0;
}

#breadcrumb {
	display: none;
}

#footer_wrap {
	position: relative;
}

.wrap {
	width: calc(100% - 48px);
	margin: auto;
}

article {
	width: 100vw;
	overflow-x: hidden;
}

article img {
	height: auto;
}

/*================================================================
# カスタムここから
================================================================ */
:root {
	--bg: #fcf9ea;
	--white: #fff;
	--text: #1a1a1a;
	--popup: #70726f;
	--main: #efa30d;
}

.article {
	width: 100%;
	padding: 0 0 64px;
	overflow-x: hidden;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* mv
------------------------------------------------------ */
.mv-onsen {
	padding: 110px 0 80px;
	background: url(first-ryokan-stay/mv_back.png) no-repeat center top / cover;
	position: relative;
}

.mv-onsen-inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
	box-sizing: border-box;
}

.mv-onsen-photo {
	margin: 0;
	position: relative;
}

.mv-onsen-photo img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* 左の縦長写真 */
.mv-onsen-photo-left {
	width: 406px;
	max-width: 34%;
	position: absolute;
	right: 4%;
	bottom: -11%;
	overflow: hidden;
	z-index: 2;
}

/* 右下の写真 */
.mv-onsen-photo-right {
	width: 655px;
	max-width: 72%;
	margin: 40px 0 0;
}

/* 中央メインカード */
.mv-onsen-main {
	width: 862px;
	max-width: 80%;
	margin: 0 auto;
	position: relative;
}

.mv-onsen-main-card {
	position: relative;
}

.mv-onsen-main-visual {
	margin: 0;
	position: relative;
}

.mv-onsen-main-visual img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* メインタイトル */
.mv-onsen-main-copy {
	width: 880px;
	max-width: 110%;
	position: absolute;
	top: 6%;
	left: -7%;
	color: #ffffff;
	text-align: center;
}

/* 右下サブタイトル */
.mv-onsen-english {
	width: 1020px;
	max-width: 124%;
	margin: 0;
	position: absolute;
	top: 36%;
	left: 0%;
}

/* リード文 */
.mv-onsen-lead {
	margin: 32px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
	color: #3a3a3a;
}

/* 温泉ナビ
------------------------------------------------------ */
.onsen-navi {
	padding: 80px 0;
	background: url(first-ryokan-stay/navi_back.png) no-repeat center center / cover;
	position: relative;
	color: #333333;
}

.onsen-navi-inner {
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	text-align: center;
	box-sizing: border-box;
}

.onsen-navi-sub {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.12em;
}

.onsen-navi-title {
	margin: 8px 0 0;
	font-family: "Cabin", sans-serif;
	font-size: 56px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.05em;
}

.onsen-navi-label {
	margin: 16px 0 0;
	padding: 6px 32px 8px;
	background: #ffffff;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

.onsen-navi-cards {
	margin: 40px 0 0;
	padding: 0 40px;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 24px;
}

/* 01 - 03
------------------------------------------------------ */
.p-index_feature {
	padding: 100px 0 0;
	position: relative;
}

.c-heading01 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.6;
	color: #111;
	letter-spacing: 0.08em;
}

.c-heading01__mark {
	margin: 0 0 10px;
	padding: 5px 10px;
	background-color: #8dc6a7;
	display: inline-block;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.4;
	color: #fff;
	text-shadow: 2px 1px 0 #fff;
	-webkit-text-stroke: 1px #111;
}

.nav02 .c-heading01__mark {
	background-color: #d9939e;
}

.nav03 .c-heading01__mark {
	background-color: #f7c75b;
}

.c-heading02 {
	position: relative;
	text-align: center;
	z-index: 2;
}

.c-heading02__en {
	display: flex;
	justify-content: center;
	align-items: center;
	-ms-flex-pack: center;
	-ms-flex-align: center;
	font-family: Cabin, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #111;
	text-transform: uppercase;
	-webkit-box-pack: center;
	-webkit-box-align: center;
}

.c-heading02__en:after,
.c-heading02__en:before {
	width: 20px;
	height: 1px;
	margin: 0 10px;
	border-bottom: 1px dotted #111;
	content: "";
	display: block;
}

.c-heading02__main {
	margin: 80px 0 0;
	padding: 0 24px;
	position: relative;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.4;
	color: transparent;
	text-shadow: 3px 1px 0 #8dc6a7;
	text-align: left;
	z-index: 2;
	-webkit-text-stroke: 1px #111;
}

.nav02 .c-heading02__main {
	text-shadow: 3px 1px 0 #d9939e;
}

.nav03 .c-heading02__main {
	text-shadow: 3px 1px 0 #f7c75b;
}

.c-text01 {
	margin: 32px 0 0;
	font-size: 16px;
	line-height: 2;
}

.c-text02 {
	margin: 24px 0 0;
	font-size: 14px;
	line-height: 1.75;
}

.c-text03 {
	margin: 24px 0 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.75;
}

.c-catch01 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: #111;
	letter-spacing: 0.05em;
}

.c-container {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.p-index_feature__sec {
	margin: 40px 0 0;
	position: relative;
	z-index: 1;
}

#contents .p-index_feature__sec:after {
	width: 72vw;
	height: 850px;
	border-radius: 999px 0 0 999px;
	background-color: #d2e8dc;
	position: absolute;
	content: "";
	top: -140px;
	right: 0;
	display: block;
	visibility: visible;
	z-index: -1;
}

#contents .p-index_feature.reverse .p-index_feature__sec:after {
	border-radius: 0 999px 999px 0;
	background-color: #e5ccd0;
	right: auto;
	left: 0;
	display: block;
	visibility: visible;
	z-index: -1;
}

#contents .nav03 .p-index_feature__sec:after {
	background-color: #f6ecc6;
}

.p-index_feature__sec__num,
.p-index_feature__sec__num:before {
	position: absolute;
	font-family: Cabin, sans-serif;
	font-weight: 700;
}

.p-index_feature__sec__num {
	top: 60px;
	right: 24px;
	font-size: 120px;
	line-height: 0.8;
	color: #8dc6a7;
}

.nav02 .p-index_feature__sec__num {
	color: #d9939e;
}

.nav03 .p-index_feature__sec__num {
	color: #f7c75b;
}

.p-index_feature__sec__num:before {
	width: 80px;
	height: 80px;
	border: 1px dotted #111;
	border-radius: 50%;
	content: "ONSEN NAVI";
	top: -25px;
	left: -45px;
	display: flex;
	justify-content: center;
	align-items: center;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	-ms-flex-align: center;
	font-size: 12px;
	color: #111;
	white-space: nowrap;
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
}

.p-index_feature__sec__row01 {
	padding: 0 24px;
}

.reverse .p-index_feature__sec__row01 {
	flex-direction: row-reverse;
}

.p-index_feature__sec__row01 .img-area {}

.p-index_feature__sec__row01 .text-area {
	margin: 40px 0 0;
}

.reverse .p-index_feature__sec__row01 .text-area {}

.p-index_feature__sec__row02 {
	margin: 32px auto 0;
	padding: 0 24px;
}

.reverse .p-index_feature__sec__row02 {
	flex-direction: row-reverse;
}

.p-index_feature__sec__row02 .img-area {
	width: 100%;
	margin: 24px 0 0;
}

.p-index_feature__sec__row02 .text-area {
	width: 100%;
}

.reverse .p-index_feature__sec__row02 .img-area {
	width: 100%;
}

.reverse .p-index_feature__sec__row02 .text-area {
	width: 100%;
}

.p-index_feature__sec__row03 {
	margin: 32px 0 0;
	padding: 0 8px;
	display: flex;
	flex-wrap: wrap;
}

/*02
------------------------------------------------------ */
.c-img_zoom {
	opacity: 0;
	overflow: hidden;
	-webkit-transition: all .7s ease;
	transition: all .7s ease;
}

.c-img_zoom img {
	-webkit-transition: all .8s ease-out;
	transition: all .8s ease-out;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transform-origin: center;
	transform-origin: center;
}

.c-img_zoom.is-act {
	opacity: 1;
}

.c-img_zoom.is-act img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

.img-area img {
	width: 100%;
}

.img-area.-black {
	border: 1px solid #333;
}

.img-area.-off {
	position: relative;
}

.img-area.-off:after {
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	position: absolute;
	content: "";
	top: 10px;
	left: 10px;
	display: block;
}

.c-kakukaku {
	opacity: 0;
	-webkit-transition: all .7s ease;
	transition: all .7s ease;
	-webkit-transform-origin: center center;
	transform-origin: center center;
}

.c-kakukaku.is-act {
	opacity: 1;
	-webkit-animation: kakukaku 1.5s steps(2, start) infinite;
	animation: kakukaku 1.5s steps(2, start) infinite;
}

.p-index_first {
	padding: 80px 0 0;
	position: relative;
	z-index: 0;
}

.p-index_first__head {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.p-index_first__head__pic {
	margin: 40px 40px 0 0;
	padding: 0 24px;
	position: relative;
	order: 2;
}

.p-index_first__head__pic:before {
	width: 240px;
	height: 240px;
	background-color: #e5ccd0;
	position: absolute;
	content: "";
	top: 300px;
	left: -100px;
	display: block;
	z-index: -1;
}

.p-index_first__head__pic img {
	width: 100%;
}

.p-index_first__head__textarea {
	padding: 0 24px;
	order: 1;
}

.p-index_first__head__textarea .c-text01+.c-text01 {
	margin-top: 20px;
}

.p-index_first__head__textarea.js-anim_elm .c-heading01 {
	opacity: 0;
	-webkit-transition: all .7s ease;
	transition: all .7s ease;
	-webkit-transform: translateX(20px);
	transform: translateX(20px);
}

.p-index_first__head__textarea.js-anim_elm .text .c-text01 {
	opacity: 0;
	-webkit-transition: all .7s ease .6s;
	transition: all .7s ease .6s;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
}

.p-index_first__head__textarea.js-anim_elm .text .c-text01+.c-text01 {
	-webkit-transition-delay: 1s;
	transition-delay: 1s;
}

.p-index_first__head__textarea.js-anim_elm.is-act .c-heading01 {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.p-index_first__head__textarea.js-anim_elm.is-act .text .c-text01 {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.p-index_first__pic {
	width: 100%;
	margin: 40px auto 0;
	padding: 0 24px;
	position: relative;
	display: flex;
	flex-direction: column;
}

.p-index_first__pic .clip {
	position: absolute;
	bottom: 105px;
	left: 103px;
	z-index: 3;
}

.p-index_first__pic .sub01 {
	position: absolute;
	bottom: 460px;
	left: 60px;
	z-index: 2;
}

.p-index_first__pic .sub02 {
	position: absolute;
	bottom: 125px;
	left: 435px;
	z-index: 2;
}

.p-index_first__pic .main {
	width: 80%;
	max-width: 800px;
	margin: 40px 0 0;
	box-shadow: calc(1.87755vw - .04082px) calc(1.87755vw - .04082px) 0 rgba(229, 204, 208, 0.5);
	position: relative;
}

.p-index_first__pic .main.js-anim_elm.is-act {
	-webkit-box-shadow: 30px 30px 0 rgba(229, 204, 208, 0.5);
	box-shadow: 30px 30px 0 rgba(229, 204, 208, 0.5);
}

.p-index_first__en {
	font-family: Cabin, sans-serif;
	font-size: 18rem;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1px #eee;
}

.p-index_first__en span {
	position: absolute;
	z-index: 3;
}

.p-index_first__en span svg {
	width: 1em;
	height: 1em;
}

.p-index_first__en span.js-anim_elm {
	opacity: 0;
	-webkit-filter: blur(10px);
	filter: blur(10px);
	-webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
	transition: all .6s cubic-bezier(.645, .045, .355, 1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.p-index_first__en span.js-anim_elm.is-act {
	opacity: 1;
	-webkit-filter: blur(0);
	filter: blur(0);
	-webkit-transform: scale(1);
	transform: scale(1);
}

.p-index_first__en span.e {
	bottom: 710px;
	left: calc(28.57143vw + 12.85714px);
}

.p-index_first__en span.c {
	bottom: 520px;
	left: calc(7.91837vw - 26.69388px);
}

.p-index_first__en span.o {
	bottom: 335px;
	left: calc(24.40816vw + 44.46939px);
}

.p-index_first .title {
	margin: 24px 0 0;
	font-size: 20px;
	font-weight: 600;
}

.p-index_first .text {
	margin: 16px 0 0;
	font-size: 16px;
}

.p-index_first .text small {
	font-size: 12px;
}

.p-index_first .note {
	margin: 8px 0 0;
	font-size: 12px;
}

.p-index_first .sub.text_frame {
	padding: 0 40px 0 0;
	position: relative;
	order: 2;
}

.p-index_first .sub.text_frame:before {
	width: 240px;
	height: 240px;
	background-color: #e5ccd0;
	position: absolute;
	content: "";
	top: -50px;
	left: -100px;
	display: block;
	z-index: -1;
}

/* plan
------------------------------------------------------ */
.p-index_what {
	width: 100%;
	margin: 64px auto 0;
	padding: 0 0 64px;
}

.p-index_what__pic {
	padding: 64px 48px;
	background-color: #e5ccd0;
	position: relative;
}

.p-index_what__pic .en {
	position: absolute;
	bottom: 48px;
	left: 18px;
	font-family: Cabin, sans-serif;
	font-size: 14px;
	line-height: 1;
	color: #fff;
	letter-spacing: 0;
	-webkit-writing-mode: vertical-lr;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
	text-transform: uppercase;
}

.p-index_what__heading {
	position: absolute;
	top: 85px;
	right: 24px;
	text-align: right;
	z-index: 3;
}

.p-index_what__heading .main {
	font-family: Cabin, sans-serif;
	font-size: 80px;
	line-height: 1;
	color: #fff;
	text-shadow: 2px 2px 20px rgba(0, 0, 0, .15);
	font-variation-settings: "wght" 700;
}

.p-index_what__heading .tag {
	padding: 5px 10px;
	background-color: #fff;
	display: inline-block;
	font-size: 2rem;
	line-height: 1;
	color: #111;
}

.p-index_what__textarea {
	padding: 64px 24px;
	background-color: #f0e2e5;
	display: flex;
	align-items: center;
	transform: translateY(calc(8.16327vw - 30.61224px));
}

.plan {
	font-size: 18px;
	font-weight: 500;
	line-height: 2;
	text-align: center;
	letter-spacing: .1em;
}

.p-index_what__textarea__title {
	margin: 24px 0 40px;
	font-size: 32px;
	font-weight: 500;
	text-align: center;
	letter-spacing: .08em;
}

.p-index_what__textarea__title span {
	position: relative;
	display: inline-block;
	line-height: 1.4;
	letter-spacing: 0;
	z-index: 1;
}

.p-index_what__textarea__title span:after {
	width: calc(100% + 15px);
	height: 16px;
	background-color: #fff;
	position: absolute;
	content: "";
	right: 25px;
	bottom: 0;
	left: -10px;
	display: block;
	z-index: -1;
}

.p-index_what dl {
	width: 100%;
	margin: 24px 0 0;
	display: flex;
	align-items: flex-end;
	font-size: 14px;
}

.p-index_what dl dt {
	padding: 0 8px;
	background-image: linear-gradient(0deg, #f5dd84 -6%, #f5dd84 35%, transparent 36%, transparent);
	flex: 0 0 72px;
}

.p-index_what dl dd {
	margin: 0 0 0 8px;
	font-size: 14px;
}

.p-index_what dl dd small {
	font-size: 12px;
}

.p-index_what .note {
	margin: 16px 0 0;
	font-size: 10px;
	text-align: left;
}

.p-index_what .btn-area {
	margin: 32px 0 0;
}

.p-index_what .btn {
	margin: 16px 0 0;
}

.p-index_what .btn a {
	padding: 16px;
	border-radius: 8px;
	background-color: #d26777;
	position: relative;
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
	text-align: center;
}

.p-index_what .btn a::before,
.p-index_what .btn a::after {
	width: 10px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	position: absolute;
	content: "";
	right: 12px;
	transition: transform .2s ease, right .2s ease;
}

.p-index_what .btn a::before {
	top: 50%;
	transform: translateY(-3px) rotate(48deg);
}

.p-index_what .btn a::after {
	top: 50%;
	transform: translateY(3px) rotate(-48deg);
}