@charset "utf-8";
:root{
  overflow-x: visible;
  /* color variables */
  --color-primary: #7ebe2e;
  --color-important: #F08A24;
  --color-brand: #3AB483;
  --color-brand-light: #eaf6f1;
  /* 朝食・夕食 */
  --color-breakfast: #FF8400;
  --color-dinner: #D53700;
  /* ジャンル */
  --color-japanese: #2F6D4F; /* 和食 */
  --color-western: #8B5A2B;  /* 洋食 */
  /* 日替わり（変更） */
  --color-daily: #8C2F39; /* 落ち着いたワインレッド */
  /* font size tokens */
  --fs-title: 0.95rem;   /* コース名・メニュー名 */
  --fs-body: 0.9rem;    /* 説明文 */
  --fs-label: 0.75rem;  /* 時間・料金ラベル */
  --fs-price: 0.95rem;  /* 金額 */
  --fs-base: 0.9rem;
}
html{height:100%; background: url(../images/bg.png) repeat-y center top; background-size:contain;color: #333;}
body{width:100%;height:100%;font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-size:100%;line-height:1;}

.youtube iframe{
  width: 100%;
}


#contents{width:980px; height: auto; margin:3em auto;position:relative;}
#contents #main{float:left;width:730px; margin: 0 60px 0 20px;} 

#contentswide{max-width:1280px;width:90%;height: auto;margin:3em auto; position:relative;}


h2#mtitle{z-index:-1;width: 100%;position: relative;font-size:xx-large;text-align:center;margin:0 auto;padding: 20% 0 4% 0;color:#FFF;font-weight: bold;
text-shadow: 0 0 2px #000, 0 0 7px #000;
background-size:cover;
background-position:center 3em,center -10em;
background-repeat:no-repeat;
}

h2.title{font-size:xx-large;color:#3AB483;line-height:1.3;margin:0 0 0.2em 7%;}
h2.title span{display: inline;}
p.titletext{font-size:medium;line-height:1.5;margin:0 7% 2em 7%;}
p.titletext strong{font-size:x-large;color:#3AB483;display: block;}

hr{border:0;border-bottom:1px solid #CCC;background:#FFF;margin: 2em auto;}
hr.dot{border:0;border-bottom:5px dotted #b3e7d2;margin: 2.7em auto;}
hr.dot2{border:0;border-bottom:1px dotted #CCC;margin:1.5em auto;clear: none;float:none;display: block;}

/*パンくず*/
#brcr{position:absolute;font-size: small;width:100%; background:rgba(255,255,255,0.8);z-index: 1;}
#brcr ul {position:relative;width:960px;margin: 0 auto;padding:0.5em;line-height:1.3;}
#brcr ul li {display: inline-block;}
#brcr ul li a:link,
#brcr ul li a:visited,
#brcr ul li a:active {padding: 0 1.7em 0 0;margin: 0 0.5em 0 0;
background:url(../../common/images/arrowa.png) center right no-repeat;background-size:auto 1em;color: #3AB483;}
#brcr ul li a:hover {color:#0fdb89;text-decoration:none;}


/*各コンテンツトップ*/
#mainall{width:95%; margin: 0 2.5%;} 
#sideunder{width:100%;table-layout:auto;display:table;border-collapse: separate;border-spacing:1px 0;}
#sideunder ul li{display:table-cell;width:25%;vertical-align:top;}


/*コンテンツペ2ページ以降*/
/* Photo切替 */
.photo,
.info{margin:0 auto 4em auto;overflow:hidden;}

.photo h2{font-size:large;color:#3AB483;line-height:1.3;margin:0 0 0.2em 0;}
.photo p{width:100%;height:auto;background: #000;line-height:0;}
.photo ul{width:90%;margin:0 auto;font-size:x-small;table-layout:fixed;display:table;border-collapse:separate;border-spacing:1px 1px;line-height:0;
}
.photo li{text-align:center;width:12.5%;display:table-cell;line-height:0;margin:0 auto;vertical-align: bottom;}
.photo li img{width:100%;-ms-interpolation-mode:bicubic;cursor:pointer;margin:0 auto;}
.photo li span{margin:5px 0 5px 0; display:block;line-height:1.2;}


/*  */
.info dl{line-height: 1.5;}
.info dt{font-weight:bold;font-size: large;color:#3AB483;border-bottom:2px solid;}
.info dd{font-size:small;border-bottom:1px dotted #999;padding:0.7em 0 0.7em 0;}
.info dd strong{font-weight: bold;margin:0 1em 0 0;}

.info table.listinfo{border-collapse:collapse;line-height: 1.5;font-size:small;border-bottom:1px dotted #999;margin-bottom:1px;}
.info table.listinfo tr.title{font-weight:bold;font-size: large;color:#3AB483;border-bottom:2px solid;}
.info table.listinfo tr.title th{padding:0;margin: 0 0 0.5em 0;}
.info table.listinfo th.titles{font-weight:bold;color:#3AB483;border-bottom:1px solid;padding:0.7em 0 0.2em 0;}
.info table.listinfo th{font-weight:bold;width:30%;border-bottom:1px dotted #999;padding:0.7em 0 0.7em 0;text-align:left;}
.info table.listinfo td{width: 70%;border-bottom:1px dotted #999;padding:0.7em 0 0.7em 0;text-align:left;}

.info table.boxinfo{border-collapse:collapse;text-align:left;line-height: 1.5;font-size:small;border-top:1px solid #999;border-left:1px solid #999;}
.info table.boxinfo th,
.info table.boxinfo td{border-bottom:1px solid #999;border-right:1px solid #999;padding:0.7em;}
.info table.boxinfo th{font-weight:bold;width:30%;background: rgba(236,236,236,1.00);}
.info table.boxinfo td{width: 70%;}

.info ul.photos{}
.info ul.photos li{margin:0 0 1px 0;}
.info ul.photos li span{font-size:x-small;margin:3px 0  0;}


.wide100{width:100%;}
.wide60L{float:left;width:55%;margin:0 5% 0 0;}
.wide60L ul.photos{width:40%;}

.wide40L{float:left;width:35%;margin:0 5% 0 0;}
.wide40L ul.photos{width:60%;}

.wide60R{float:right;width:55%;margin:0 0 0 5%;}
.wide60R ul.photos{width:40%;}

.wide55R{float:right;width:50%;margin:0 0 0 5%;}
.wide55R ul.photos{width:55%;}


.info .noborder{border-bottom:#CCC;}

.wide40{width:40%;}


/*サイドメニュー*/
#side{float:right;width:170px; margin:0;}
ul.bnra,
ul.bnrb,
ul.bnrc
{display: block;margin:0 auto; font-size:small;
height: 100%;position:relative;
}
ul.bnra li,
ul.bnrb li,
ul.bnrc li
{ width:100%;margin:0 auto 1px 0;}
.hd_mgn{padding:1.15em 1.5em!important;}
ul.bnra li p,
ul.bnrb li p
{ line-height: 1.3; background: url(../images/arrowb.png) no-repeat 0.5em 48%;background-size:0.5em auto;padding:0.5em 0.7em 0.5em 1.4em;}
ul.bnra a:link,
ul.bnrb a:link,
ul.bnra a:visited,
ul.bnrb a:visited,
ul.bnra a:active,
ul.bnrb a:active
{display:block;color:#FFF;background:rgba(58,180,131,0.9);}
ul.bnra a:hover,
ul.bnrb a:hover
{opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha(opacity=80)";}

/*各コンテンツトップ下部
#sideunder ul.bnra a:link,
#sideunder ul.bnrb a:link,
#sideunder ul.bnra a:visited,
#sideunder ul.bnrb a:visited,
#sideunder ul.bnra a:active,
#sideunder ul.bnrb a:active
{min-height:14em;height:100%;}*/




ul.bnreach{display: block;margin:0 auto;font-size:small;}
ul.bnreach li{line-height: 1.3; padding:0 0 1px 0;position: relative;}
ul.bnreach li.title{font-size:medium;font-weight:bold;color:#3AB483;padding: 0.7em 0.5em 0.5em 0.5em;border-top:5px solid;}
ul.bnreach li.titles{font-weight:bold;color: #FFF;background:#3AB483;padding: 0.7em 0.5em 0.5em 0.5em;margin:0 0 1px 0;}
ul.bnreach li.title a:link,
ul.bnreach li.title a:visited,
ul.bnreach li.title a:active
{display:block;background:none;padding:0;border-left:none;margin:0;}
ul.bnreach a:link,
ul.bnreach a:visited,
ul.bnreach a:active
{display:block;background: url(../images/arrowa.png) no-repeat 0.5em center rgba(58,180,131,0.1);background-size:0.5em auto;padding:1em 0.7em 1em 1.4em;border-left:2px solid #3AB483;margin:0 0 0 5px;}
ul.bnreach a:hover{opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha(opacity=80)";}

/*2018.10/12追加新しい遊ぶ＆スポーツ追加時*/
.new {
	display: inline-block;
	font-size:xx-small;
	font-weight: bold;
	background: #ff3333;
	color: #FFF;
	padding: 1px 2px 0 2px;
	margin: 0 0 0 5px;
}
/*遊ぶ＆スポーツサイドバナー時*/
ul.bnreach li .new {
	position: absolute;
	top:3px;
	right:5px;
}


.clerfix:after {display:block; clear:both;content: "";}


.notes{font-size:small;line-height:1.5;width:90%;margin:0 auto;padding:0 0 0 5%;}
.notes li{margin: 0 1em;padding:0 0.5em 0.5em 0;list-style:circle;}


/*基本*/
.red{color:#F00;}
.green{color:#009d83;}

/*table {overflow:auto;white-space: nowrap;display:block;width:auto;}
table tbody {width:100%;display:table;}
table::-webkit-scrollbar {height: 5px;}/*tableにスクロールバーを追加*/
/*table::-webkit-scrollbar-track {background: #F1F1F1;}/*tableにスクロールバーを追加*/
/*table::-webkit-scrollbar-thumb {background: #BCBCBC;}/*tableにスクロールバーを追加*/

/* プランボタン追加 2018.08.13 */
.localplans{margin:3em auto 2em auto;}
.localplans ul{width:100%;margin:0 auto 1em auto;text-align: center;}
.localplans ul li{display:inline-block;width:49.7%;vertical-align:top;background:#ee6500;text-align:left;overflow: hidden;box-sizing:border-box;border-bottom:2px solid #CCC;border-right:2px solid #CCC;}
.localplans ul li img{width:50%;float:left;margin:0 1em 0 0;}
.localplans ul dl{margin:1em 1em 0 0;padding: 0 0 0 0; color:#FFF;}
.localplans ul dt{font-size:medium;margin:0 0 0.2em 0;line-height: 1.2;font-weight:bold;}
.localplans ul dd{font-size:small;margin:0;line-height:1.4;}
.localplans a:hover{opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha(opacity=80)";}

/* 強調案内追加 2026.01.17 */
.intro-notice {
  margin-top: 16px;
  padding: 14px;
  border: 2px solid var(--color-important);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  line-height: 1.6;
}
.intro-notice strong {
  display: block;
  text-align: center;
  color: var(--color-important);
  margin-bottom: 6px;
}
.intro-notice small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #777;
}
/* =====================================
   Event Flyer 2026.02.28
===================================== */
.flyer-list {
  list-style: none;
  margin: 1rem 0;
}
.flyer-item + .flyer-item {
  margin-top: 0.75rem;
}
.flyer-item a {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem;
  border: 1px solid #ddd;
  color: inherit;
}
.flyer-thumb {
  width: 72px;
  aspect-ratio: 1;
  background: #f5f5f5;
  overflow: hidden;
}
.flyer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flyer-category {
  display: inline-block;
  margin-bottom: 0.25rem;
  padding: 0.1em 0.5em;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 0.75em;
  white-space: nowrap;
}
/* 温泉館カレンダー */
.flyer-item.is-calendar .flyer-category {
  background-color: var(--color-brand-light, #eaf6f1);
  color: var(--color-brand, #3AB483);
}
/* 季節イベント */
.flyer-item.is-event .flyer-category {
  background-color: #fff1e5;
  color: var(--color-important, #F08A24);
}
/* PDFお知らせ */
.flyer-item.is-pdf .flyer-category {
  background-color: #eee;
  color: #555;
}
/* 三角形の警告マーク追加 2026.02.03 */
.icon-warning-sign{
	width:1.31em;
	height:auto;
	vertical-align:middle;
	display:inline-block;
	flex-shrink:0;
	margin-right:0.3em;
	margin-left:0.5em;
}

@media only screen and (max-width: 1024px) {
h2#mtitle{background-position:center 3em,center;}
#contents{width:99%; margin:2em 0.5%;}
#contentswide{width:99%; margin:2em 0.5%;}
#contents #main{width:74%; margin:0 4% 0 3%;} 
h2.title{font-size:x-large;}
p.titletext{font-size:small;}
p.titletext strong{font-size:small;}
#side{float:right;width:19%; margin:0;/*border-left:1px solid #CCC;*/}
}

@media only screen and (max-width: 960px) {
.localplans{margin:1em auto;}
.localplans ul{width:80%;}
.localplans ul li{display:block;width:100%;margin:0 auto 1em auto;}
.localplans ul li img{width:35%;}

}


@media only screen and (max-width: 736px) {
#contents{width:99%; margin:1.2em 0.5%;}
#contentswide{width:99%; margin:1.2em 0.5%;}

p.titletext{margin:0 7% 1em 7%;}
.photo,
.info{margin:0 auto 2em auto;}

ul.bnra a:link,
ul.bnra a:visited,
ul.bnra a:active
{min-height:14em;height:100%;}

.localplans{margin:1em auto 0 auto;}
.localplans ul{width:100%;}
.localplans ul li{display:block;width:100%;margin:0 auto 0.5em auto;}
.localplans ul li img{width:40%;margin:0 0.5em 0 0;}
.localplans ul dl{margin:0.5em 0.5em 0 0;}
.localplans ul dt{font-size:small;}
.localplans ul dd{font-size:x-small;}


}

@media only screen and (max-width: 667px) {
#contents #main{float:none; width:96%; margin:0 2%;} 

#side{float:none;width:99%; margin:2em 0.5% 0 0.5%;}
ul.bnra,
ul.bnrb,
ul.bnrc
{margin:0 auto 1px auto;}
ul.bnra li,
ul.bnrb li,
ul.bnrc li
{float: left; width:33.3333%;border-right:1px solid #FFF;box-sizing:border-box;}
ul.bnrb li p
{padding:1em 0.7em 1em 1.6em;}



ul.bnreach{margin:0 0 1px 0;}
ul.bnreach li{line-height: 1.3;padding:0 0 1px 0;float:left;width:50%;}
/*ul.bnreach li{line-height: 1.3;padding:0 0 1px 0;float:left;width:33.333%;}*/
ul.bnreach li.title,
ul.bnreach li.titles{display:block;clear: both;float: none;width:100%;}
ul.bnreach a:link,
ul.bnreach a:visited,
ul.bnreach a:active
{display:block;background: url(../images/arrowa.png) no-repeat 0.5em center rgba(58,180,131,0.1);background-size:0.5em auto;padding:1em 0.7em 1em 1.4em;border-left:2px solid #3AB483;margin:0 0 0 1px;}

}

@media only screen and (max-width: 480px) {
html{background: url(../images/bg.png) repeat-y center top; background-size:cover;}
#contents{width:99%; margin:1em 0.5% 0 0.5%;}
#contentswide{width:99%; margin:1em 0.5% 0 0.5%;}

#brcr ul {width:100%;margin: 0 auto;padding:0.5em;line-height:1.5;font-size:xx-small;}


h2#mtitle{font-size:x-large;padding: 20% 0 7% 0;}
h2.title{font-size:large;margin:0 0 0.2em 5vw;font-weight: bold;}
p.titletext{font-size:small;margin:0 5vw 1em 5vw;}

#mainall{width:100%; margin:0;} 
#sideunder{width:100%;table-layout:auto;display:table;border-collapse: separate;border-spacing:1px 1px;}
#sideunder ul li{display:table-cell;width:33.33%;vertical-align:top;}

#side{float:none;width:99%; margin:1em 0.5% 0 0.5%;}


ul.bnreach li.title,
ul.bnreach li.titles{font-size:small;text-align: center;}


ul.bnreach li{font-size: xx-small;}


.photo,
.info{margin:0 auto 1em auto;}
.info table.listinfo{margin-bottom:1em;}


.wide60L,
.wide40L,
.wide60R,
.wide55R{float:none;width:100%;margin:0 auto 1em auto;}

.wide40{width:100%;}

ul.photos{width:100%;}
ul.photos li{float: left; width:50%;border-right:1px solid rgba(255,255,255,0);border-bottom:1px solid rgba(255,255,255,0);box-sizing: border-box;}

hr{margin: 1em auto;}



.notes{font-size:x-small;line-height:1.5;width:90%;margin:0 auto;padding:0 0 0 2%;}



/*テーブルスライド*/

table{width:100%;}
.scroll{overflow:auto;white-space: nowrap;display:block;width:auto;
}
.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}


}



@media only screen and (max-width: 330px) {
h2.title span{display: block;}
}

.pcview {}
.spview {display: none;}
@media screen and (max-width: 979px) {
	.pcview {
		display: none;
	}
	.spview {
		display: block;
	}
}