/*--------------------------
霧多布温泉ゆうゆ
kiritappu-yuyu.com
--
2025-09-10	org
--------------------------*/
@charset "UTF-8";

/*------------------------
A Modern CSS Reset
------------------------*/
/* Box sizingの定義 */
*, *::before, *::after	{ box-sizing: border-box; }
/* デフォルトのpaddingを削除 */
ul[class], ol[class]	{ padding: 0; }
/* デフォルトのmarginを削除 */
body, 
h1, h2, h3, h4, h5, h6,
ul[class], ol[class], li,
figure, figcaption, blockquote, dl	{ margin: 0; }
/* bodyのデフォルトを定義 */
body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
}
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class], ol[class]	{ list-style: none; }
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class])	{ text-decoration-skip-ink: auto; }
/* img要素の扱いを簡単にする */
img	{ max-width: 100%; margin: auto; }
img	{ display: block; }
/* iframe */
iframe	{ max-width: 100%; margin: auto; }
iframe	{ display: block; }
/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 
article > * + * { margin-top: 1em; }
*/
/* inputやbuttonなどのフォントは継承を定義 */
input, button, textarea, select	{ font: inherit; }
 
/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/*----------------------
Inview
----------------------*/
/*
.effect		{ overflow: hidden; }
*/
.ef-fade,
.ef-fade01,
.ef-zoom,
.ef-rotate	{ transition: .6s; }
.ef-fade:nth-child(even)	{ transition: .9s; }
.ef-fade:nth-child(3)	{ transition: 1.2s; }
.ef-fade	{ opacity: 0; transform: translate(0, 60px); -webkit-transform: translate(0, 60px); }
.fade		{ opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); }
.ef-fade01	{ opacity: 0; }
.fade01		{ opacity: 1; }
.ef-zoom	{ transform: scale(0, 0); -webkit-transform: scale(0, 0); }
.zoom		{ transform: scale(1, 1); -webkit-transform: scale(1, 1); }
.ef-rotate	{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
.rotate		{ transform: rotateY(360deg); -webkit-transform: rotateY(360deg); }


/*----------------------
Customize
--------------------- */
html { scroll-behavior: smooth; }

body {
	color: #334;
	font-size: 1rem;
	line-height: 1.5;
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;	/* mobile safariの自動文字サイズ調整をoffにする */
	-webkit-tap-highlight-color: transparent;	/* モバイルでタッチ時のハイライトカラーを消す */
	-webkit-font-smoothing: antialiased;	/* 文字のアンチエイリアスをきれいに表示 */
	-moz-osx-font-smoothing: grayscale;
}
/*
section:nth-child(odd)	{ background-color: #63548b; }
section	{ background-color: transparent; }
section	{ background-color: rgba(255,255,255,1); }
*/
section:nth-child(even) .grid	{ direction: rtl; }
section:nth-child(even) .grid > *	{ direction: ltr; text-align: start; }

a		{ text-decoration: none; }
a:hover	{ text-decoration: underline; }

h1	{ font-size: clamp(32px, 5vw, 48px); }
h2	{ font-size: clamp(18px, 4vw, 24px); }
h3	{ font-size: clamp(24px, 4vw, 32px); }
h4	{ font-size: clamp(22px, 4vw, 26px); }
h5	{ font-size: clamp(18px, 3vw, 21px); }

h1 span,
h2 span,
h3 span,
h4 span	{ display: inline-block; }

table	{ border-collapse: collapse; }

hr	{ margin: 1em 0; height: 1px; background-color: #0008; border: none; }

/*----------------------
⭐カラー調整
----------------------*/
/*body	{ color: #333; background-color: #fff; }*/
/*section:nth-child(even)	{ background-color: #f1dea736; }*/
/*a	{ color: #fff; }*/
/*h1,h2	{ color: #fff; }*/
/*h3	{ color: #fff; }*/
/*h4	{ color: #fff; }*/

/*----------------------
※印つき<ul>、<ol>リスト
----------------------*/
ul.asterisk		{margin-top: 1em; }
ul.asterisk li	{padding-left: 1em; text-indent: -1em; }
ul.asterisk li:before { content: '※'; display: inline; }
ol.asterisk		{ counter-reset: number; }
ol.asterisk li:before { content: "※"counter(number)" "; counter-increment: number; }

/*----------------------
矢印つき<ul>リスト
----------------------*/
ul.arrow	{margin-top: 1em; }
ul.arrow li	{padding-left: 1em; text-indent: -1em; }
ul.arrow li:before { content: '\f138'; font-family: fontawesome; padding-right: .5em; opacity: .3; }


/*----------------------
共通要素
--------------------- */
.inner {
	position: relative;
	max-width: 1200px;
	max-width: 960px;
	margin: auto;
	padding: 2em 1em;
}
.inner > * + h2	{ margin-top: 4rem; }
.inner > h2 + *	{ margin-top: 2rem; }
.inner > * + h3	{ margin-top: 3rem; }
.inner > h3 + *	{ margin-top: 1rem; }
.inner > * + h4	{ margin-top: 3rem; }
.inner > h4 + *	{ margin-top: 1rem; }
.inner > * + h5	{ margin-top: 2rem; }
.inner > h5 + *	{ margin-top: 1rem; }


.serif	{ font-family: serif; }

.cbar	{ text-align: center; }
.cbar:after	{
	content: '';
	display: block;
	margin: .5em auto 0;
	height: 3px;
	border-radius: 1em;
	background-color: #ecd47f;
}

.more	{ margin: 2rem auto; text-align: center; }
.more a { display: inline-block; padding: .5rem 2rem; }
/*.more a { color: #fff; background-color: #0367ac; border: 1px solid #0367ac; border-radius: 3em; transition: .2s; }*/
/*.more a:hover { color: #0367ac; background-color: #fff; text-decoration: none; }*/
.more a { font-weight: 600; color: #0367ac; background-color: inherit; border: 2px solid #0367ac; border-radius: 3em; transition: .2s; }
.more a:hover { color: #fff; background-color: #0367ac; text-decoration: none; }
.more a span	{ display: inline-block; }

.more.blk a { font-weight: bold; color: inherit; background-color: #fff; border: 2px solid #111; border-radius: .5em; }
.more.blk a:hover { transform: scale(1.1); }

.morebtn	{ display: inline-block; padding: .05rem 1rem; }
.morebtn	{ color: #fff; background-color: #36d; border-radius: 3em; transition: .2s; }
.morebtn:hover { background-color: #039; text-decoration: none; }

/*----------------------
Flexbox
----------------------*/
.flex	{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1em, 3vw, 2em);
}
/*.flex > *	{ min-width: 280px; }*/
.flex > *	{ min-width: 150px; }
.flex.vt	{ align-items: start; }
.flex.rvs	{ flex-direction: row-reverse; }
.flex .img	{ flex: 1 0 auto; max-width: 50%; }
.flex.x2 >*	{ flex: 1 0 40%; }
.flex.x3 >*	{ flex: 1 0 30%; }
.flex.shadow >*	{ border-radius: .3em; box-shadow: 0 0 12px rgba(0,0,0,.1); }
.flex.shadow >*	{ aspect-ratio: 4/3; }

.flex .cph	{ margin: auto; max-width: 40%; }
.flex .cph img	{ margin: auto; width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 100em; }

.flex+.flex	{ margin-top: 1.5rem; }

/*----------------------
Flex
list with box-shadow
----------------------*/
.flexs	{ margin: 1em auto;; padding: 0; list-style-type: none; }
.flexs	{ display: flex; flex-wrap: nowrap; justify-content: center; }
.flexs li	{ padding: 1em; box-shadow: 0 0 16px 0px rgba(0,0,0,.2); }
.flexs li	{ flex: 1 0 auto; }
.flexs li+li	{ margin-left: 1em; }


.note	{ padding: .75em; border: 3px solid #666; }
.note.red	{ border: 3px solid #e33; }
.note ul	{ margin: 0; padding-left: 1.5em; }
.note li+li	{ margin-top: .5em; }
.note strong{ color: #e00; }

.mbo	{ display: initial; }
.pco	{ display: none; }
.pcow	{ display: none; }

.b	{ font-weight: bold; }
.bb	{ font-weight: bold; color: #000; font-size:1.2em; }

.xs	{ font-size: .6rem; }
.s	{ font-size: .8rem; }
.m	{ font-size: 1rem; }
.lg	{ font-size: 1.1rem; }
.xl	{ font-size: 1.2rem; }

.l	{ text-align: left;  }
.r	{ text-align: right; }
.c	{ text-align: center; }
.vt	{ vertical-align: top; }

.caution	{ color: #c00; }
.red	{ color: #e00; }
.grn	{ color: #393; }
.date	{ color: #393; }
.url	{ color: #393; word-break: break-all; }


.marker,
.marker.yellow	{ background: linear-gradient(transparent 50%, #ffef8f 50%); }	/* 黄色 */
.marker.lime	{ background: linear-gradient(transparent 50%, #66FFCC 50%); }	/* 黄緑色 */
.marker.water	{ background: linear-gradient(transparent 50%, #66ccff 50%); }	/* 水色 */
.marker_pink	{ background: linear-gradient(transparent 50%, #ff66ff 50%); }	/* 桃色 */


/*----------------------
アイコン付加
----------------------*/
a[href$=".pdf"]:after	{ content: '\f1c1'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
a[href$=".docx"]:after,
a[href$=".doc"]:after	{ content: '\f1c2'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
a[href$=".xlsx"]:after,
a[href$=".xls"]:after	{ content: '\f1c3'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
a[href$=".zip"]:after	{ content: '\f1c6'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
a[href^="mailto:"]:after{ content: '\f0e0'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
/*
a[href^="http"]:after	{ content: '\f08e'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
*/
/* No Icon */
.no_icon:after {
	content: '' !important;
	margin-left: 0 !important;
}


/*----------------------
Fit Content - Centering
----------------------*/
.fit-content {
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	max-width: 960px;
}
.fit-content.image	{ max-width: 800px; }

/*----------------------
レスポンシブ対応（横スクロール）
<div class="scroll-box">
	<table>〜</table>
</div>
----------------------*/
.scroll-x {
/*	white-space: nowrap;*/
	overflow-x: auto;
	overflow-y: hidden;
}

/*----------------------
テーブル要素
----------------------*/
table.solid		{ margin: 1em 0; border-top: 1px solid #0008; }
table.solid th,
table.solid td	{ padding: .5em .5em; background-color:#fffc; border-bottom: 1px solid #0008; }
table.solid th	{ font-weight: normal; background-color:#fffcdcee; white-space: nowrap; }
table.solid .d	{ text-align: center; background-color:#e7f3fa; }
table.solid .e	{ text-align: center; background-color:#fffff0; }

table.uline		{ margin: 1em 0; min-width: 80%; }
table.uline th,
table.uline td	{ padding: 1em; border-bottom: 1px solid #0006; }
table.uline th	{ text-align: left; font-weight: normal; }
/*table.uline th+td	{ padding-left: 2em; }*/

table.noline	{ margin: 1em 0; }
table.noline th,
table.noline td	{ padding: .5em .8em; vertical-align: top; }
table.noline .d	{ white-space: nowrap; text-align: center; background-color: #f0f0f0; }


/*----------------------
YouTube
----------------------*/
.youtube iframe	{ display: block; aspect-ratio: 16/9; width: clamp(160px, 100%, 800px); height: auto; }


/*----------------------
Googlemap
----------------------*/
.googlemap iframe	{ display: block; width: 100%; height: auto; max-width: 800px; aspect-ratio: 16/9; }


/*----------------------
SNS Icon
----------------------*/
.sns { display: flex; align-items: center; gap: 1rem; }
.sns a	{
	display: flex; justify-content: center; align-items: center;
	width: 32px; height: 32px;
	transition: .2s;
/*
	font-size: 18px;
	color: #fff;
	background-color: rgba(0,0,0,.2);
	border-radius: 8px;
*/
}
.sns a:hover	{ transform: scale(1.2); text-decoration: none; }
.sns i	{ display: none; }
.sns .s	{ font-size: 11px; line-height: 16px; }
.sns .envelope	{ background-color: #6c9; }
.sns .website	{ background-color: #f90; }
.sns .website2 	{ background-color: #f60; }

/*.sns .twitter	{ background: #000 url(ico_x_w100.svg); }	/* Replace Twitter → X */
.sns .twitter	{ background: url(ico_x.svg) no-repeat 50% 50% / contain; }	/* Replace Twitter → X */
.sns .facebook	{ background: url(ico_facebook.svg) no-repeat 50% 50% / contain; }
.sns .line		{ background: url(ico_line.svg) no-repeat 50% 50% / contain; }
.sns .youtube	{ background: url(ico_youtube.svg) no-repeat 50% 50% / contain; }
.sns .instagram	{ background: url(ico_instagram.svg) no-repeat 50% 50% / contain; }
.sns .tiktok	{ background: url(ico_tiktok.svg) no-repeat 50% 50% / contain; }
/*
.sns .facebook	{ background-color: #1977f1; }
.sns .facebook:before	{ content: '\f09a'; font-family: fontAwesome; }
.sns .youtube	{ background-color: #f00; }
.sns .youtube:before	{ content: '\f16a'; font-family: fontAwesome; }
.sns .twitter	{ background-color: #1DA1F2; }
.sns .twitter:before	{ content: '\f099'; font-family: fontAwesome; }
.sns .instagram	{ background-image: url(ico_instagram.png); background-size: cover; }
.sns .instagram	{ background-image: url(gradient-768x768.jpg); background-size: cover; font-size: 20px; }
.sns .instagram:before	{ content: '\f16d'; font-family: fontAwesome; }
*/




/*----------------------
Header
----------------------*/
.header {
	background-color: #fff;
	width: 100%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	z-index: 10;
}
.header .inner	{ position: relative; max-width: 1200px; padding: 1.5em 1em; }
.header .inner	{ display: flex; justify-content: space-between; align-items: end; }
.header .logo	{}
.header .logo	{ position: relative; transition: .2s; z-index: 3; }
.header .logo	{ transform-origin: left top; transform: scale(5) translate(0px, -4px); }
.header .logo a	{
	display: block;
	width: clamp(10px, 6vw, 50px);
	/*width: 50px;*/
	aspect-ratio: 1/1;
	background: url(logo-header.png) no-repeat 0 0 / contain;
	text-indent: -9999px;
	transition: .2s;
}
.header .inquiry a	{ display: none; }

/*.header .sns	{ display: none; }*/
.header .sns .s	{ display: none; }

/*----------------------
追従ヘッダー Sticky
JS - setup.js
----------------------*/
.header.fixed {
	position: sticky; top: 0; background-color: #fffe;
	.logo	{ transform: scale(2.5) translate(0px, -8px); }
	.pc-nav	{ display: none; }
}

.head-navi	{ display: flex; justify-content: center; align-items: center; gap: 10px; }

/*----------------------
SmartPhone Navigation
----------------------*/
.sp-nav	{ margin-left: 20px; font-size: clamp(12px, 4vw, 18px); }
/* Toggle Button */
.sp-nav .toggle	{ position: relative; width: 2em; aspect-ratio: 1.2/1; cursor: pointer; z-index: 10; }
.sp-nav .toggle > span	{
	position: absolute; left: 0;
	display: block; width: 100%; height: 15%;
	background-color: #333;
	border-radius: 5px;
	transition: .2s;
}
.sp-nav .toggle > span:nth-child(1)	{ top: 0; }
.sp-nav .toggle > span:nth-child(2)	{ top: 50%; transform: translatey(-50%); }
.sp-nav .toggle > span:nth-child(3)	{ bottom: 0; }
/* Navigation Content */
/*inset: 0 と position: fixed を指定すると画面全体に背景を覆うことができる。モーダルウィンドウやローディング画面を表示させる時*/
.sp-nav .nav-content	{ position: fixed; inset: 0; color: #fff; background-color: #000d; z-index: 3; }
.sp-nav .nav-content	{ -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); }
/*.sp-nav .nav-content	{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background-color: #000d; z-index: 3; }*/
.sp-nav .nav-content	{ opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.sp-nav .nav-content ul	{ width: clamp(100px, 70%, 600px); margin: auto; padding: 0; list-style-type: none; }
/*.sp-nav .nav-content ul	{ height: clamp(100px, 100%, 800px); }*/
.sp-nav .nav-content ul	{ display: flex; flex-direction: column; justify-content: center; gap: .5em; }
.sp-nav .nav-content li	{ width: 100%; }
.sp-nav .nav-content a	{ display: block; padding: 2vh; color: inherit; text-align: center; text-decoration: none; transition: .2s; }
.sp-nav .nav-content a	{ background-color: #00968800; border: 1px solid #fff6; border-radius: 1em; background-image: none !important; }
.sp-nav .nav-content a span	{ display: none; }
/*.sp-nav .nav-content a	{ pointer-events: none; }*/
.sp-nav .nav-content .fa,
.sp-nav .nav-content .fa-solid,
.sp-nav .nav-content .fa-regular	{ display: inline-block; opacity: .75; }
.sp-nav .nav-content .fa	{ display: none; }
.sp-nav .nav-content a:hover	{ opacity: 1; background-color: #3fc4b6; transform: scale(1.0); }
.sp-nav .nav-content a:hover .fa,
.sp-nav .nav-content a:hover .fa-solid,
.sp-nav .nav-content a:hover .fa-regular	{ opacity: 1; }
/* SNS */
.sp-nav .sns_wrap	{ display: none; }
.sp-nav .sns_wrap	{ max-width: 320px; margin: auto; }
.sp-nav .sns_wrap a	{ aspect-ratio: auto; margin: auto; background: none; }
.sp-nav .sns_wrap ul	{ display: flex; justify-content: center; gap: 20px; }
.sp-nav .sns_wrap img	{ height: 48px; }
/* is-open */
.is-open #toggle > span { background-color: #fff; }
.is-open #toggle > span:nth-child(1) { top: 50%; transform: translatey(-50%) rotate(45deg); }
.is-open #toggle > span:nth-child(2) { top: 50%; transform: translatey(-50%) rotate(90deg); opacity: 0; }
.is-open #toggle > span:nth-child(3) { top: 50%; transform: translatey(-50%) rotate(-45deg); }
.is-open #sp-nav .nav-content	{ opacity: 1; visibility: visible; }
.is-open #sp-nav .nav-content a	{ pointer-events: auto; }

/* アコーディオン用 */
.sp-nav .acc	{ position: relative; margin: 0; padding: 1em; cursor: pointer; transition: background .2s ease; }
.sp-nav .acc::before,
.sp-nav .acc::after	{ position: absolute; top: 0; bottom: 0; right: 1em; width: 12px; height: 2px; margin: auto; background:#fff; content: ''; }
.sp-nav .acc::after	{ transform: rotate(-90deg); transition: transform .2s; }
.sp-nav .acc.active	{ background-color: #20b8aa; border-radius: 1em 1em 0 0; }
.sp-nav .acc.active::after	{ transform: rotate(0deg); }

.sp-nav .nav-content ul ul	{ display: none; width: auto; margin: 1em auto; }
.sp-nav .nav-content li li	{ background-color: transparent; }
.sp-nav .nav-content li li a	{ padding: .25em; }
.faq .ans span	{ display: block; margin-top: 1em; }
.faq .ans span a:before	{
	display: inline-block;
	content: '\f054'; font-family: fontawesome;
	padding-right: 8px; color: initial; text-decoration: none; opacity: .5;
}
/* SNS Icon */
.sp-nav .nav-content .sns	{ height: auto; padding: 60px 0; }
.sp-nav .nav-content .sns	{ display: flex; flex-direction: row; justify-content: center; gap: 1.5rem; }
.sp-nav .nav-content .sns li	{ width: auto; }
.sp-nav .nav-content .sns a	{ padding: 0; border: none; border-radius: 0; }
.sp-nav .nav-content .sns a:hover	{ background-color: transparent; transform: scale(1.2); }
.sp-nav .nav-content .sns *:before	{ content: ''; font-size: 32px; font-family: fontawesome; line-height: 1; color: #fff; }
.sp-nav .nav-content .sns .line:before	{ content: '\f3c0'; }
.sp-nav .nav-content .sns .twitter:before	{ content: '\e61b'; }
.sp-nav .nav-content .sns .facebook:before	{ content: '\f09a'; }
.sp-nav .nav-content .sns .youtube:before	{ content: '\f167'; }
.sp-nav .nav-content .sns .instagram:before	{ content: '\f16d'; }
.sp-nav .nav-content .sns .tiktok:before	{ content: '\e07b'; }


/*----------------------
PC Navigation
----------------------*/
.pc-nav	{ display: none; }
.pc-nav	{ padding: 20px 20px 0; color: #fff; background-color: #e7eaed; }
.pc-nav a	{ display: block; height: 50px; text-indent: -9999px; color: inherit; text-decoration: none; }
.pc-nav ul	{
	position: relative; max-width: 1200px; margin: auto; padding: 0; list-style-type: none;
	display: flex; justify-content: center; align-items: center; gap: 1px;
	text-align: center;
}
.pc-nav li	{ position: relative; z-index: 1; flex: 1; }
.pc-nav li ul	{ position: absolute; top: 50px; display: block; width: 100%; box-shadow: 0px 10px 10px 2px rgba(0,0,0,0.2); }
.pc-nav li ul	{ visibility: hidden; }
.pc-nav li:hover ul	{ visibility: visible; }
.pc-nav li ul li		{ width: 100%; }
.pc-nav li ul li+li	{ border: none; }
.pc-nav li ul li a	{ line-height: 50px; text-indent: 0; background-color:#3767b3; background-image: none; border: none; }

.pc-nav li ul li a:hover	{ color: #fff; transition: all 0.3s ease; }

/*----------------------
Page Title
----------------------*/
/*.sectitle	{ display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }*/
.sectitle	{
	position: relative; display: block;
	/*.secimg	{ width: 100%; aspect-ratio: 16/9; max-height: 60vh; }*/
	.secimg	{ width: 100%; aspect-ratio: 4/3; max-height: 60vh; }
	.sectxt	{
		display: none;
		position: absolute; bottom: 0; right: 0; width: 100%; max-width: none; padding: 0;
		clip-path: polygon(13% 0, 100% 0, 100% 100%, 10% 100%);
		background-color: #bae1e1;
		text-align: center;
		h2	{ display: none; }
	}
	.sec-mb	{
		position: absolute; bottom: 0; left: 0; width: 100vw; height: 18vw;
		background: url(bg1.jpg) no-repeat 0% 100% / cover;
	}
}
.sectitle:before	{
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: url(bg1.jpg) no-repeat 50% 50% / cover;
	content: '';
}
/*----------------------
Page Introduction
----------------------*/
.secintro	{
	position: relative;
	overflow-x: clip;
	.inner	{ position: relative; padding: 40px 40px 0; }
	.inner:after	{ display: none; }
	.inner:after	{
		position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 1/1;
		background: url(bg-fujiko.png) no-repeat 50% 50% / contain;
		transform-origin: right bottom; transform: scale(1.5) translate(-100px, 0);;
		content: '';
	}
	h3	{ color: #004098; font-family: serif; text-align: center; }
	h3+p	{ margin-top: .5em; }
}

/*----------------------
Slider
----------------------*/
.secslider	{
	text-align: center;
	.inner	{ max-width: 1200px; }
	.more	{ margin-top: 3em; }
}

/*----------------------
Footer
----------------------*/
.footer	{ position: relative; }
/*
.footer:after	{
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: url(footer-lupin.png) no-repeat 0 0 / 600px;
	content: '';
	transform: translate(50%, -42px);
}
*/
.footer .sns	{ max-width: 1200px; margin: auto; padding: 1em; }
.footer .foot-nav	{
	background-color: #bae0e1;
	ul	{ max-width: 55%; margin: 0; padding: 1em; list-style-type: none; }
	ul	{ display: flex; flex-wrap: wrap; gap: 1em 1.5em; }
	ul+ul	{ padding-top: 0; }
	a	{ display: inline-block; color: inherit; transition: .2s; }
	a+a	{ border-top: thin solid rgba(255,255,255,.3); }
	a:hover	{ transform: scale(1.2); text-decoration: none; }
	.sns	{ margin-bottom: 1em; gap: 1em; }
	.sns li	{ flex: 0 1 auto; min-width: auto; }
	.sns a	{ color: #fff; }
}
.footer .company	{
	flex: 1 0 30%;
	min-width: 300px;
	p	{ margin: 0; padding: 0; }
	span	{ display: inline-block; }
	.cname	{ font-size: 1.4em; font-weight: bold; color: #0367ac }
	.adder	{ font-size: .9em; }
	.phone	{}
}
.footer .foot-img	{
	position: relative;
	max-width: 1200px; margin: auto;
	.lupin	{
		position: absolute; bottom: 0; right: 0; width: 50%; aspect-ratio: 40/23;
		background: url(footer-lupin.png) no-repeat 50% 50% / cover;
		/*transform: translate(50%, -42px);*/
	}
}
.footer .cprt	{ max-width: 1000px; margin: auto; padding: 1em; text-align: right; font-size: 12px; font-family: arial, sans-serif; }


/*----------------------
Page Top
----------------------*/
#pagetop { position: fixed; bottom: 1rem; right: 1rem; z-index: 99; }
#pagetop {
	width: 4rem;
	aspect-ratio: 1/1;
	line-height: 1;
	font-size: 12px;
	text-align: center;
	color: white;
	background-color: orange;
	border-radius: 3em;
}
#pagetop	{ display: flex; flex-flow: column; justify-content: center; align-items: center; }
/*#pagetop	{ opacity: .6; }*/
#pagetop a	{ display: block; width: 100%; padding: .5em 0 1em; color: inherit; text-decoration: none; }
#pagetop a:before { content: '\f106'; display: block; font-size: 200%; font-family: fontawesome; }



/*----------------------
Frontpage
----------------------*/
#front	{
	h3	{ font-family: serif; color: #d20212; }
	.inner { max-width: 1020px; }
	.biglogo	{
		/*position: relative;*/
		position: fixed; top: 0; left: 0;
		width: 100vw; height: 100vh;
		display: flex; justify-content: center; align-items: center;
		background-color: #fff;
		cursor: pointer;
		z-index: 20;
	}
	/*.biglogo		{ opacity: 0; visibility: hidden; }*/
	.biglogo.active	{ opacity: 1; visibility: visible; }
	.biglogo.escape	{ opacity: 0; visibility: hidden; transition: .2s; }
	.biglogo a	{
		display: block;
		width: 90%; height: 80%;
		background: url(logo-big.png) no-repeat 50% 50% / contain;
		text-indent: -9999px;
		transition: .2s;
	}
	/*.header.fixed .logo	{ transform: scale(5); }*/
	/*.header.fixed .logo	{ transform: scale(4); }*/
	.sectitle:before	{ background: url(bg1.jpg) no-repeat 40% 50% / cover; }
	.sectitle .inner	{ position: relative; padding: 1em; padding-top: clamp(64px, 20vw, 160px); z-index: 1; }
	.sectitle h1	{ color: #004098; font-family: serif; }
	.sectitle h1 span	{ color: #d20212; }
	/*.sectitle br	{ display: none; }*/
	.sectitle p		{ width: clamp(250px, 63%, 540px); margin-left: 0; }
	.yy-intro	{ overflow-x: clip; }
	/*.yy-intro .inner	{ background: url(./common/bg-all.png) no-repeat 100% 50% / contain; }*/
	.yy-intro h3	{ margin-top: 20px; color: inherit; }
	.yy-intro h3 span	{ color: #d20212; }
	.yy-intro h3+p		{ margin-top: 0; }
	.yy-intro .scaleup img	{ transform: scale(1.5) translate(0, -80px); }
	.secslider .inner	{ max-width: fit-content; }
	.yy-link	{ text-align: center; background-color: #eee; }
	.yy-info	{}
	.yy-info .inner	{ background: url(bg-zenigata.png) no-repeat 100% 0% / 33%; }
	.yy-info .flex	{ display: block; }
	.yy-price	{ margin-top: 2em; font-weight: 600; }
	.yy-price th	{ padding: 1em; color: #fff; background-color:#d20212; }
	.yy-price td	{ padding-left: 1.5em; text-align: right; }
	.yy-price small	{ font-weight: normal; }
	.yy-price.room th	{ background-color:#e05214; }
	.yy-price.room th span	{ display: inline-block; }
	.yy-price.room td	{ text-align: left; }
	.yy-apps	{ display: flex !important; }
	.yy-apps	{ margin-top: 2em; margin-bottom: 2em; font-weight: 600; text-align: center; }
	.yy-apps >*	{ flex: 1 0 40%; min-width: auto; }
	.yy-apps a	{ display: block; color: #fff; background-color: #111; line-height: 3; border-radius: 2em; transition: .2s; }
	.yy-apps a:hover	{ transform: scale(1.05); text-decoration: none; }
	.yy-apps.bnrs >*	{ flex: 0 0 auto; min-width: auto; }
	.yy-apps.bnrs a	{ color: inherit; background-color: transparent; }
	.yy-apps.bnrs img	{ max-height: 48px; }
	.yy-access	{ background-color: #fffcdc; }
	.yy-access h3+dl	{ margin-top: 1em; }
	.yy-access dd	{ margin: 0; }
	.yy-access .inner	{ background: url(bg-goemon2.png) no-repeat 100% 0% / 60%; }
	.yy-access .flex	{ display: block; }
	/*.yy-access .flex.x2 >*	{ min-width: 300px; }*/
	.yy-access dl	{ width: fit-content; background-color: #fffcdc99; }
	.yy-access hr	{ max-width: 400px; }
	.yy-maps	{}
	.yy-maps .flex.x2 >*	{ min-width: 300px; }
}

/*----------------------
Hotspring
----------------------*/
#hotspring	{
	h4	{ color: #d20212; font-family: serif; text-align: center; }
	h4+p	{ margin-top: .5em; }
	.sectitle:before	{ background: url(bg2.jpg) no-repeat 50% 50% / cover; }
	.sectitle .sec-mb	{ background-image: url(h1-hotspring.png); }
	/*.sectitle .sec-mb	{ display: block; height: clamp(50px, 12vw, 115px); background-image: url(h1-hotspring.png); }*/
	/*.sectitle .sectxt	{ display: none; }*/
	.secintro .inner:after	{ background-image: none; }
	.sechotspa	{ position: relative; overflow: hidden; }
	.sechotspa .inner:after	{
		display: none;
		position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1/2;
		background: url(bg-lupin.png) no-repeat 50% 50% / contain;
		transform-origin: center center; transform: scale(1.2) translate(0px, 50px);
		content: '';
	}
	.secdata	{
		margin-left: auto; margin-right: auto;
		.mbo	{ display: initial; }
		.pco	{ display: none; }
		h4	{ margin-top: 3em; }
	}
	.secinfo	{ background-color: #fffcdc; }
	.secinfo p	{ max-width: 540px; }
	.secmovie	{}
	.secmovie p	{ width: clamp(200px, 80%, 400px); margin-left: auto; margin-right: auto; }
	.secmovie a	{ display: block; transition: .2s; }
	.secmovie a:hover	{ transform: scale(1.05); text-decoration: none; }
}

/*----------------------
Restaurant
----------------------*/
#restaurant	{
	h3	{ font-size: clamp(22px, 3vw, 32px); }
	h4	{ margin-bottom: 10px; padding-bottom: 10px; color: #d20212; font-family: serif; text-align: center; border-bottom: 2px solid #666; }
	h5	{ margin-top: 30px; text-align: center; }
	.sectitle:before	{ background: url(bg3.jpg) no-repeat 50% 50% / cover; }
	.sectitle .sec-mb	{ background-image: url(h1-rest.png); }
	.sectitle .sectxt	{ color: #fff; background-color: #0378c2; }
	.secintro .inner	{ width: fit-content; }
	.secintro .inner:after	{ background-image: url(bg-jigen.png); transform: scale(1.8) translate(-50px, 0px); }
	.secintro.plus	{
		.inner:before,
		.inner:after	{
			display: none;
			position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 1/2;
			background: url(bg-food1.png) no-repeat 50% 50% / contain;
			transform-origin: center center; transform: scale(1.2) translate(-200px, 0);
			content: '';
		}
		.inner:after	{ left: auto; right: 0; background-image: url(bg-food2.png); transform: scale(1.2) translate(200px, 0); }
		img	{ width: 500px; }
	}
	.plan-menu	{
		display: block;
		align-items: start;
		div+div	{ padding-top: 3em; }
		p	{ margin: auto; padding: 10px; text-align: center; border-top: 1px solid #666; }
		p:last-child	{ border-bottom: 1px solid #666; }
		.cap	{ font-size: .9em; text-align: left; border: none; }
	}
	.nomiho	{ display: block; }
}
#group-plan.sectitle	{}
#group-plan.sectitle:before	{ background: none; }
#group-plan.sectitle .sec-mb	{ top: 0; background-image: url(h1-plan.png); }
#group-plan.sectitle .sectxt	{ color: #fff; background-color: #89bb1f; }
#group-plan.sectitle+.secintro	{ margin-top: 18vw; }
#group-plan.sectitle+.secintro p	{ max-width: 350px; }
#group-plan.sectitle+.secintro .inner:after	{ background-image: url(bg-goemon.png); transform: scale(1.3) translate(-110px, -15px); }

/*----------------------
Goods
----------------------*/
#goods	{
	.sectitle:before	{ background: url(bg4.jpg) no-repeat 50% 50% / cover; }
	.sectitle .sec-mb	{ background-image: url(h1-goods.png); }
	.sectitle .sectxt	{ color: #fff; background-color: #e7537c; }
	.secintro .inner:after	{ background-image: url(bg-fujiko.png); }
	.flex.x3	{ font-weight: 600; align-items: initial; }
}






/*----------------------
SmartPhone Landscape （横）
----------------------*/
@media screen and (min-width: 480px) {
}

@media screen and (min-width: 640px) {
}


/*----------------------
Tablet
----------------------*/
@media screen and (min-width: 768px) {

	.xs	{ font-size: .6rem; }
	.s	{ font-size: .8rem; }
	.m	{ font-size: 1rem; }
	.lg	{ font-size: 1.2rem; }
	.xl	{ font-size: 1.5rem; }

	.fl	{ float: left; }
	.fr	{ float: right; }
	.clr{ clear: both; }

	.inner { padding: 3em 1em; }
	/*.inner p	{ max-width: 800px; }*/
	.inner p	{ margin: 1.75em auto; line-height: 1.75; font-size: 110%; }
	.inner table	{ margin-bottom: 1.75em; line-height: 1.75; font-size: 110%; }

	.mbo	{ display: none; }
	.pco	{ display: initial; }

	/* Responsive Table Adjust 横スクロール解除 */
	table	{ display: table; white-space: normal; }

	.link .ttl,
	.link a	{ font-size: 1.2em; }
	.arrow li a		{ font-weight: normal; font-size: 1.1em; }
	.arrow li.sub a	{ font-weight: normal; font-size: 1.0em; }

	/*.header .sns { display: flex; }*/
	.header .sns .s { display: initial; }

	.nav-pc ul	{ gap: 1em 2em; }

	.sectitle	{ padding: 2em 1em; gap: 2em; }
	.sectitle br	{ display: initial; }
	.sectitle .sectxt	{ display: block; }
	.sectitle .sec-mb	{ display: none; }

	/*.secintro	{ overflow: visible; }*/
	.secintro .inner	{ max-width: clamp(300px, 50vw, 540px); }
	.secintro .inner:after	{ display: block; }

	.footer	{ padding-top: 10vw; }
	.footer .foot-nav ul	{ max-width: 1200px; margin: auto; }
	.footer .foot-nav li	{ min-width: 8em; }

	#front .biglogo a	{ aspect-ratio: 4/5; background-image: url(logo-big-pc.png); }

	#front .yy-info .inner	{ background: url(bg-zenigata.png) no-repeat 0% 50% / contain; }
	#front .yy-info .flex	{ display: flex; }
	#front .yy-access .inner	{ background: url(bg-goemon2.png) no-repeat 100% 50% / 540px; }
	#front .yy-access .flex	{ display: flex; }

	#hotspring .sectitle:after	{
		position: absolute; bottom: 0; left: 14vw; width: clamp(100px, 24vw, 400px); aspect-ratio: 40/23;
		background: url(footer-lupin.png) no-repeat 50% 50% / cover;
		content: '';
	}
	#hotspring .secintro .inner	{ max-width: clamp(300px, 50vw, 620px); }
	#hotspring .secdata	{ max-width: 620px; }

	#restaurant .secintro.plus .inner:before,
	#restaurant .secintro.plus .inner:after	{ display: block; }
	#restaurant .plan-menu,
	#restaurant .nomiho	{ display: flex; }
	#restaurant .plan-menu div+div	{ padding-top: 0; }
	#group-plan.sectitle+.secintro	{ margin-top: 0; }
}


/*----------------------
for PC
----------------------*/
@media screen and (min-width: 1024px) {
	.pcow	{ display: initial; }

	#front .yy-price th	{ min-width: 200px; }
	#front .yy-price.room th	{ min-width: 150px; }

	#hotspring .sechotspa .inner:after	{ display: block; }
	#hotspring .secdata	{
		margin-top: 60px; margin-left: 0;
		.mbo	{ display: none; }
		.pco	{ display: initial; }
		h4	{ text-align: left; }
	}
}

@media screen and (min-width: 1200px) {
	/*#hotspring .sectitle .sectxt	{ display: block; }*/
	/*#hotspring .sectitle .sec-mb	{ display: none; }*/
	/*#hotspring .sectitle:after	{ display: block; }*/
}