@charset "utf-8";
/* サイト共通レスポンシブ対応（トップページ index2026.php から順次、各下層ページにも適用）
   mobeek終了に伴い、PC版と同じHTMLをブレークポイントで再レイアウトする */

/* スマホ専用に用意した画像（img/sp/）を使う要素は、PC幅では常に非表示 */
.sp-masthead,
.sp-floor,
.sp-contact,
.sp-manga,
.sp-bath-gallery,
.sp-line,
.sp-more-link,
.sp-faq-member,
.sp-br {
	display: none;
}

@media screen and (max-width: 767px) {

	*, *::before, *::after {
		box-sizing: border-box;
	}

	html, body {
		overflow-x: hidden;
	}

	body {
		min-width: 0;
		width: 100%;
		font-size: 14px;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* 個別に対応しきれていない古いテーブルがはみ出さないようにする保険 */
	table {
		max-width: 100%;
	}

	/* スマホでのみ改行したい箇所に <br class="sp-br"> を入れて使う */
	.sp-br {
		display: block;
	}

	/* ヘッダー / ロゴ・ナビ（PC版ナビは非表示にし、img/sp/の専用画像に差し替え） */
	#header {
		background-size: cover;
		background-position: center top;
	}

	#roof,
	#g_navi {
		display: none;
	}

	/* 下層ページ共通ヘッダー（#header2 / #header_title） */
	#header2 {
		height: auto;
		padding-bottom: 15px;
		background-size: cover;
		background-position: center top;
	}

	#header_title {
		width: 100%;
		box-sizing: border-box;
		padding: 8px 4% 0;
		font-size: 18px;
	}

	.sp-masthead {
		display: block;
		width: 100%;
	}

	.sp-masthead > a {
		display: block;
		width: 100%;
	}

	.sp-masthead > a img {
		display: block;
		width: 100%;
		height: auto;
	}

	.sp-nav {
		display: flex;
		width: 100%;
	}

	.sp-nav a {
		flex: 1 1 20%;
		max-width: 20%;
	}

	.sp-nav a img {
		display: block;
		width: 100%;
		height: auto;
	}

	#g_navi_box2 {
		width: 100%;
		padding: 0 4%;
	}

	.g_navi_time_txt01 {
		font-size: 20px;
	}

	.g_navi_time_txt01 span[style*="font-size"] {
		font-size: 14px !important;
	}

	.g_navi_time img {
		max-width: 100%;
		height: auto;
	}

	.g_navi_time a img {
		width: 100%;
	}

	#toph1 {
		padding: 3px 10px;
	}

	.top_profit_txt_00 {
		font-size: 18px;
		padding: 0 10px;
	}

	/* コンテンツ全体幅 */
	#wrapper {
		background-size: auto;
	}

	#container {
		width: 100%;
		padding: 13px 3% 13px;
	}

	/* 下層ページ共通2カラムレイアウト（本文＋サイドiframe） */
	#main_border1,
	#main_border2 {
		float: none;
		width: 100%;
		border-right: none;
	}

	#main_border2 {
		padding-right: 0;
	}

	#main,
	#pagetitle {
		width: 100%;
	}

	#main_box1 {
		padding: 13px 3% 13px;
	}

	#side {
		display: none;
	}

	/* 横並びプロモボックス（.profit_box2 内、注目情報ページ等で使用）
	   PCは3列（.profit_box4 幅210pxのfloat）だが、スマホは2列に組み替える */
	.profit_box2 {
		display: flex;
		flex-wrap: wrap;
		gap: 15px 3%;
		margin: 0;
	}

	.profit_box2 .profit_box5 {
		flex: 0 0 100%;
		width: 100%;
	}

	.profit_box2 .profit_box1,
	.profit_box2 .left {
		float: none;
		flex: 0 0 48.5%;
		max-width: 48.5%;
		padding-right: 0;
		margin-bottom: 0;
	}

	.profit_box2 .profit_box4 {
		width: 100%;
	}

	.profit_box2 .floatclear {
		display: none;
	}

	.top_topics {
		width: 100%;
	}

	/* 大浴場フォトギャラリー（横幅いっぱい・矢印スライド） */
	.sp-bath-gallery {
		display: block;
		position: relative;
		width: 100%;
		margin-top: 15px;
	}

	.sp-bath-scroll {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.sp-bath-scroll img {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		height: auto;
		border-radius: 0;
		border: 0;
		scroll-snap-align: start;
	}

	.sp-bath-arrow {
		position: absolute;
		top: 50%;
		z-index: 2;
		width: 42px;
		height: 42px;
		margin-top: -21px;
		border: 0;
		border-radius: 42px;
		background-color: rgba(126, 176, 0, 0.7);
		color: #fff;
		font-size: 20px;
		line-height: 42px;
		text-align: center;
		padding: 0;
	}

	.sp-bath-prev {
		left: 10px;
	}

	.sp-bath-next {
		right: 10px;
	}

	/* フロア案内アイコン（PC版の.naviは非表示にし、img/sp/の専用画像に差し替え） */
	.navi {
		display: none;
	}

	.sp-manga {
		display: block;
		text-align: center;
		margin: 15px 4%;
		padding: 14px 10px;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 10px;
	}

	.sp-manga-ttl {
		font-weight: bold;
		font-size: 18px;
		color: #000;
		margin-bottom: 8px;
	}

	.sp-manga-btn {
		display: inline-block;
		color: #fff;
		background-color: #0077ff;
		border: 1px solid #005fcc;
		font-size: 14px;
		padding: 8px 20px;
		border-radius: 10px;
		text-decoration: none;
	}

	.sp-floor {
		display: block;
		width: 100%;
	}

	.sp-floor > a {
		display: block;
	}

	.sp-floor > a img {
		display: block;
		width: 100%;
		height: auto;
	}

	.sp-floor-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.sp-floor-grid a {
		flex: 0 0 50%;
		max-width: 50%;
		padding: 2px;
	}

	.sp-floor-grid a img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* LINEバナー */
	.sp-line {
		display: block;
		margin: 15px 0 0;
	}

	.sp-line a {
		display: block;
	}

	.sp-line img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* ふるさと納税ボックス */
	.furusato-box {
		padding: 20px !important;
	}

	.furusato-title {
		font-size: 1.1rem !important;
		padding-bottom: 10px !important;
	}

	.furusato-logos {
		flex-direction: column;
		gap: 10px;
	}

	.furusato-logos > a img {
		width: 100%;
		height: auto;
	}

	.furusato-logos > img {
		display: none;
	}

	/* 食事処・お子様向け設備バナー */
	.sp-stack-banners {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.sp-stack-banners a {
		display: block;
	}

	.sp-stack-banners img {
		width: 100%;
	}

	/* 新着情報・施設紹介動画 */
	#top_l,
	#top_c {
		width: 100%;
		float: none;
		height: auto;
		border-right: none;
	}

	.top_line {
		display: none;
	}

	#top_new {
		height: auto;
		padding: 15px 0;
	}

	#top_new_box1 {
		width: 100%;
		padding: 0 12px;
	}

	.sp-more-link {
		display: block;
		text-align: center;
		padding: 4px 12px 10px;
	}

	.sp-more-link img {
		display: inline-block;
		height: auto;
	}

	.top_box1 {
		width: 100%;
	}

	#top_c iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 465 / 263;
	}

	/* サイトマップ */
	#sitemap_box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 10px 0;
	}

	.sitemap_1 {
		display: none;
	}

	.sitemap_2 {
		float: none;
		width: 50%;
		height: auto;
		padding: 10px 4%;
		margin-bottom: 10px;
	}

	/* よくあるご質問・会員様募集 */
	.sp-faq-member {
		display: flex;
		margin-top: 15px;
	}

	.sp-faq-member a {
		position: relative;
		flex: 1 0 50%;
		max-width: 50%;
		box-sizing: border-box;
		text-align: center;
		padding: 14px 0;
		background-color: rgb(228, 240, 173);
		border: 1px solid rgb(146, 181, 116);
		color: rgb(58, 125, 0);
		font-size: 15px;
		text-decoration: none;
	}

	.sp-faq-member a::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 14px;
		width: 6px;
		height: 6px;
		margin-top: -4px;
		border-top: 2px solid rgb(58, 125, 0);
		border-right: 2px solid rgb(58, 125, 0);
		transform: rotate(45deg);
	}

	/* Facebook・電話ボタン */
	.sp-contact {
		display: block;
		padding: 20px 4% 0;
	}

	.sp-contact > a {
		display: block;
		margin-bottom: 10px;
	}

	.sp-contact > a img {
		display: block;
		width: 100%;
		height: auto;
	}

	.sp-tel-btn {
		display: block;
		box-sizing: border-box;
		text-align: center;
		border: 1px solid rgb(87, 186, 0);
		border-radius: 10px;
		background-color: #fff;
		color: rgb(87, 186, 0);
		font-size: 22px;
		padding: 12px 0;
		text-decoration: none;
	}

	/* フッター */
	#footer {
		height: auto;
		background-size: cover;
		padding: 20px 0 0;
	}

	.footer_box1 {
		width: 100%;
		padding: 0 5%;
	}

	#footer_logo {
		float: none;
		width: 100%;
		padding-top: 0;
		text-align: center;
	}

	#footer_logo img {
		margin: 0 auto;
	}

	#footer_box2 {
		float: none;
		width: 100%;
		margin: 15px 0 0;
	}

	#gaikan {
		float: none;
		position: static;
		width: 80%;
		max-width: 280px;
		margin: 15px auto 0;
	}

	#footer_btm {
		height: auto;
		padding: 10px 0;
	}

	#footer_btm .footer_box2,
	#footer_btm .footer_box3 {
		float: none;
		width: 100%;
		text-align: center;
		padding: 4px 0;
	}

	/* 料金案内ページ（charge/index.html）専用 */
	/* 幅は #charge / #charge2 / .box_charge1〜6 / .button001 の
	   width:100%; max-width:...px; 側（css/charge.css・ページ内style）で
	   PC幅を維持したまま可変対応済み。ここではフォントサイズのみ調整。 */
	#charge .style10,
	#charge2 .style10 {
		font-size: 26px;
	}

	#charge2 {
		padding-bottom: 0;
		padding-top: 0;
	}

	.box_charge4 {
		padding-bottom: 0;
		margin-top: 0;
	}

	/* 各下層ページ共通：ページ内アンカーへのジャンプボタン（7つの部屋／効果／入り方など）はスマホでは非表示 */
	.anchor-nav-table {
		display: none;
	}

	/* 岩盤浴ページ（ganban/index.html）専用 */
	.ganban_box,
	.ganban_box tbody,
	.ganban_box tr,
	.ganban_box td {
		display: block;
		width: 100%;
	}

	.ganban_box td {
		text-align: center;
	}

	.ganban_detail05 .room_ttl {
		font-size: 22px;
	}

	.ganban_detail06 .temperature01,
	.ganban_detail06 .temperature02,
	.ganban_detail06 .temperature03 {
		margin: 8px auto;
	}

	.ganban-compare-table,
	.ganban-compare-table tbody,
	.ganban-compare-table tr,
	.ganban-compare-table td {
		display: block;
		width: 100%;
	}

	.ganban-compare-table td:nth-child(2) {
		display: none;
	}

	.ganban-compare-table td {
		margin-bottom: 8px;
	}

	/* お風呂ページ（furo/index.html）専用：2列ボックスの幅と高さを揃える */
	.furo-detail-pair {
		display: flex;
		flex-wrap: wrap;
		gap: 3%;
	}

	.furo_half01,
	.furo_half02,
	.furo_half07 {
		float: none;
		width: 48.5%;
		margin-top: 0;
		box-sizing: border-box;
	}

	.furo_detail04 .room_ttl03 {
		font-size: 17px;
	}

	/* お楽しみいっぱいページ（rest/index.html）専用：写真＋説明文の横並びを解除 */
	.furo_1_box02,
	.furo_1_box02_2,
	.furo_1_box02_02 {
		float: none;
		width: 100%;
	}

	div.left,
	div.right {
		float: none;
		width: 100%;
	}

	.go_top {
		width: 100%;
	}

	/* 地図・交通ページ（access/index.html）専用：見出しの背景画像はスマホ幅だとリボンがずれるため単色に */
	.access_title {
		background-image: none;
		background-color: #996633;
		height: auto;
		padding: 10px 0;
	}

	/* よくあるご質問ページ（faq/index.html）専用：ジャンプリンクを縦積みリストに */
	.faq_link {
		display: flex;
		flex-direction: column;
		padding: 0;
		overflow: hidden;
	}

	.faq_link a {
		display: block;
		margin: 0;
		padding: 14px 10px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	}

	.faq_link a:last-child {
		border-bottom: none;
	}

	.faq_link-sep {
		display: none;
	}

}