@charset "utf-8";
/* CSS Document */

/*ホテルロゴサイズ修正*/
.header-inner #header-logo img { max-width: 230px;}
#footerLogo img { width: 300px;}

/*TOPページ　英語タイトルが長い時の改行用*/
.separate-rightBox02 {
	width: 100%;
	margin-top: 0;
	background: none;
	display: flex;
	flex-direction: column;
	justify-content: start;
}

/*表デザイン追加*/
table.simpleTable{
	border: 1px solid #333;
	margin: 1em 0;
	text-align: center;
}
table.simpleTable tr{
	border-bottom: 1px solid #333;
} 
table.simpleTable th,table.simpleTable td{
	padding: 0.5em;
	border-right:1px solid #333; 
}
table.simpleTable tr:last-child,table.simpleTable th:last-child,table.simpleTable td:last-child{border-bottom: none;}

/*表デザイン追加 背景あり*/
table.backTable{
	width: 100%;
	border: 1px solid #999;
	margin: 1em 0;
	text-align: center;
	background: #fff;
}
table.backTable tr{
	border-bottom: 1px solid #999;
} 
table.backTable th,table.backTable td{
	padding: 0.5em;
	border-right:1px solid #999; 
}
table.backTable th{background: #f4e9c5; vertical-align: middle;}
table.backTable tr:last-child,table.backTable th:last-child,table.backTable td:last-child{border-bottom: none;}
table.backTable td.right{text-align: right;}

.priceTitle{font-weight: bold;}
.priceTable {padding-bottom: 5%;}
.priceTable dt{margin-bottom: 1%; color: #C00;}
.priceTable dd{margin-bottom: 3%;}

.pdfBtn01{
	width: 20%;
	background: #333;
	margin: 1em 0;
	text-align: center;
}
.pdfBtn01 a{
	width: 100%;
	display: block;
	color: #fff;
}

.access-box01{
	width: 100%;
	margin: 50px 0;
	padding: 0 5%;
	text-align: center;
}
.access-box01 img{
	width: 100%;
	max-width: 700px;	
}
/*文章囲み枠*/
.infoBox01{
	border:1px solid #ccc; padding:1em;	margin: 0.5em 0;
}
/*TOPページのバナーと同じレイアウトのバナー*/
ul.ShortBnr01,ul.ShortBnr02 { display:flex; flex-direction: row; justify-content:space-between; flex-wrap:wrap; width: 100%; height:auto;}
ul.ShortBnr01 li,ul.ShortBnr02 li { flex:0 0 48%; height:100%;  margin: 0 0 2%;}
ul.ShortBnr01 li img,ul.ShortBnr02 li img  { width: 100%;}

/*観光ページの各スポット画像　右下あわせ*/
.threePiece .imgBox img {
	width: 100%;
	object-fit: cover;
	object-position: right bottom;
}
.threePiece .imgBox{
	align-items: flex-end;
}
/*観光ページの一番上の大きい画像　右下あわせ*/
article #mainImageS {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	overflow: hidden;
	height: 35vh;
	margin: 0 auto 0;
}
article #mainImageS img { width: 100%; height:100%; min-width: 530px;
object-fit: cover;
object-position: right bottom;}

/*温泉ページ　源泉説明*/
#onsen-gensen{
	width:100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	background-image: url("../img/onsen/onsen-gensen-bg.jpg");
	background-size:cover;
	background-position: left bottom;
	background-repeat: no-repeat;
	border-radius: 60px;
	padding: 45px 2em;
	
}
.gensenTitle{
	width:100%;
	display: block;
	font-size:150%;
	letter-spacing: 2px;
	margin-bottom: 2em;
}
.gensenTxt{
	width:100%;
	display: block;
	line-height: 150%;
    letter-spacing: 2px;
}
/*施設ページ　施設概要*/
.twoBox{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.twoBoxImg{width: 80%;margin: 0 10%;}
.twoBoxImg img{width:100%;}

/*スマホアクセス お車でお越しの場合--*/
.row {margin-right: -15px; margin-left: -15px; font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;}
.row::before {display: table; content: " "; box-sizing: border-box;}
.col-sm-4 {position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
.access_point.start {background: #c6a85f; display: block; padding: 12px; border-radius: 0; border: none; color: #FFF; width: 100%; font-size: 16px; text-align: center; display: table; content: " ";line-height: 2;}
.access_point {height: 50px;}
.access_point.start::before {font-family: "FontAwesome"; content: "\f0ab"; margin-right: 0.5em; box-sizing: border-box;}
.access_caption {padding: 12px 5px; min-height: 50px; margin-left: 20px; color: #666; border-left: 2px #999 dotted; font-size: 16px;}
.access_point {display: block; padding: 12px; height: 50px; color: #333; width: 100%; border: 2px #666 solid; text-align: center; border-radius: 25px; background: #eee; font-size: 16px;}
.access_point.goal {background: #942148; border-radius: 25px; margin-bottom: 80px; padding: 12px; border: none; color: #FFF; width: 100%; font-size: 16px; text-align: center; display: table; content: " ";line-height: 2;}
.access_point.goal::before {font-family: "FontAwesome"; content: "\f024"; margin-right: 0.5em;}
.visible-xs {display: none !important;}
.col-sm-12 {width: 100%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}

/*スマホアクセス 公共交通機関でお越しの場合--*/
.public_transport {color: #e74c3c; font-size: 14px; margin-bottom: 20px; line-height: 1.4; font-family: Cinzel,"ヒラギノ明朝 ProN",HiraMinProN,"游明朝体","Yu Mincho",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;}
.col-lg-3 {position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
.col-lg-6, .col-md-6, .col-sm-6, .col-sm-6 {position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
.col-xs-6 {width: 50%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
.illust-map{width: 100%; margin: 3% 0 0; padding: 0 5%;}
.illust-map img{width: 100%;}

/*宴会ページ団体プラン--*/
.DetailAccordion02 { 
	max-width: 400px; margin: 25px;
}
.DetailAccordionA { 
	max-width: 100%; margin: 0 2% ;
}
.DetailAccordionA .summary-label{
	max-width: 100%;
}
.planBoxA { display:flex; flex-direction: column; justify-content:space-between; width: 100%; margin: 2% auto 5%; }
.planBoxA-inner { 
	width: 96%;
	margin: 2% 2%;
	display: flex;
	flex-direction: column;
    justify-content: space-between;
}
.planBoxA-inner img { width: 100%; }
.planBoxA-inner p{
	width: 100%;
	padding: 0 0 0 0%;
}
.planBoxA p { margin: 1% 0 0;}
.planBoxA-photo{
	width: 96%;
	margin: 2% 2%;
	display: flex;
	flex-direction: row;
    justify-content: space-between;	
}
.planBoxA-photo p{ width: 33%; font-size:90%;}
.planBoxA-photo img { width:100%; }
.paleMTextureBox{
	background: #f0e5eb;
	padding: 1% 0;
}
.planlinkA{display: flex;flex-direction: column;justify-content: center; width: 100%; background:#942148;text-align: center; }
.planlinkA a{color: #fff;}
.planlinkA p{padding: 0.5em; margin: 0;}
.planlinkA p a{text-align: center; }

/*YOUTUBE --*/
.videoYoutube{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.videoYoutube iframe{
	width: 100%;
	height: 100%;
}

/*ページトップへあがるボタン トリップAIコンシェルジュ*/
.pagetop {
  height: 55px;
  width: 55px;
  position: fixed;
  right: 12px;/*10px*/
  bottom: 140px;/*70px*/
  background-color:#555555;
  border: none;/*線なし*/
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  opacity: 0.6;
}
.pagetop__arrow {
  display: block;
  height: 15px;
  width: 15px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  transform: translateY(20%) rotate(-45deg);
}

/*予約追従ボタン*/
.reserve_folliwing {
  height: 55px;
  width: 55px;
  position: fixed;
  right: 12px;/*10px*/
  bottom: 85px;/*15px*/
  background: #942148;
  border: none;/*線なし*/
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  opacity: 0.8;
}
.reserve_folliwingInner{
  display: block;
  font-size:16px;
	font-weight: 600;
}
.reserve_folliwingInner a{color:#fff;}

.redBox{display: block;width: 100%; border: 1px solid #ff0000;padding: 1em; color: #ff0000;}

.higaeriTitle{display: block; width: 76%; margin: 0 12%; color: #fff;}

/*プラン一覧のプラン削除タイマー設定用----------------------------------*/
.hidden-plan {
  display: none !important;
}

/*あじさいスポット---------------------------------------------------*/
.blueLine{border-bottom:2px solid #0094bc;}
.blueText{color:#0094bc; }
.planInfo{ display: flex; flex-direction: column; justify-content: center; background: #fff; margin: 5% 0; padding: 2em; line-height: 180%;}
.planInfotitle{color:#942148; font-size: 120%; font-weight: 600; margin: 0 0 0.5em; border-bottom:2px solid #942148; }
.planLink{display: flex; flex-direction: row; justify-content: flex-end; margin: 0 0 1.5%; }
.planLink a{ color:#942148; border-bottom: 1px solid #942148; font-weight: 600; padding: 0 0.5em; }
#ajisai h2.border-stripe{ position: relative;padding: 0.3em; color: #0094bc;}
#ajisai h2.border-stripe:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: repeating-linear-gradient(-45deg, #0094bc, #0094bc 4px, #fff 4px, #fff 8px);}
.eventBox01 {display:inline-block;background: #df5b04; padding:0.1em 0.2em; margin-right: 0.3em; color: #fff;}
.eventBox02 {display:inline-block;background: #C00;  padding:0.1em 0.2em; margin-right: 0.3em; color: #fff;}
.eventBox03 {display:inline-block;background: #007700;  padding:0.1em 0.2em; margin-right: 0.3em; color: #fff;}
#ajisai .twoPiece .imgBox{justify-content: flex-start; align-items: baseline;}
/*#ajisai .twoPiece .imgBox img{object-fit: contain; width: 100%; height: 100%; object-position: center top;}*/
#ajisai .twoPiece .imgBox{height: auto;}
#ajisai .twoPiece .imgBox img{width: 100%;}
#ajisai .twoPiece p{line-height: 160%;}
#ajisai section h2 { margin: 0% 0 1% ; z-index: 2;}
#ajisai #planBox ul { width: 100%; display: flex; flex-direction: column; align-items: stretch;}
#ajisai #planBox li { width: 250px; height: auto!important; display: flex; flex-direction: column; justify-content:space-between; background: #000000;}
#ajisai #planBox .imgBox {
	display: flex;
	justify-content: center;
	align-items: center;
	/*overflow: hidden;*/
	height: 165px;
	}
#ajisai #planBox .imgBox img { width: 100%; height: 100%; object-fit: contain;}
#ajisai #planBox .planTitle { display: flex; justify-content: start; height: 100px; margin: 0 0 0; padding: 7%; color: white;}
#ajisai #planBox .planBtn { background:#942148; color:#FFF; text-align:center; margin-top: auto; padding: 5px; align-items: flex-end;}
#ajisai #planBox .planBtn:hover { opacity: 0.8;}
#ajisai .arrow-white { color:#FFF;}
#ajisai .planLead{margin: 0 0 1% ; }

#ajisai #planBox ul.noSliderBnr{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;}
#ajisai #planBox ul.noSliderBnr li{margin-bottom: 2%;}

/* プラン一覧へボタン */
.flexboxPlan { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2%;}
.flexboxPlan .flexList { width: auto; padding: 1%;}



@media (min-width: 768px) {
/*ホテルロゴサイズ修正*/
.header-inner #header-logo img { max-width: 250px;}

/*TOPページ　英語タイトルが長い時の改行用*/
.separate-rightBox02 {
	width: 55%;
	margin-top: -130px;
}
.separate-rightBox02 .bigText {
	text-align: right;
}	
.separate-rightBox02 { width: 33%; background: none; display: flex; flex-direction: column; }	

/*TOPページのバナーと同じ横4つレイアウトのバナー*/	
ul.ShortBnr01 { display:flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; height:auto; padding-bottom: 7%;} 
ul.ShortBnr01 li { flex:0 0 24%; margin: 1% 0.5% 1%;}
/*横3つレイアウトのバナー おしながき日帰りの下*/
ul.ShortBnr02 { display:flex; justify-content: center; flex-wrap: wrap; width: 100%; height:auto; padding-bottom: 7%;} 
ul.ShortBnr02 li { flex:0 0 24%; margin: 1% 0.5% 1%;}
	
/* お料理 おしながき */
.oshinagaki { width: 100%;}
.oshinagaki dl { margin-bottom: 50px; float: left;}
/* .iframe-wrapper{height: 1650px;overflow: hidden;}*/
/* お料理 おしながき縦書きの中の数字 */
.oshinagaki span.number {
text-orientation: upright;	
}
/* お料理 おしながき縦書きの中の数字 二桁の時 */
span.number2 {
  text-combine-upright: all;
  letter-spacing: normal;
}	
/*観光ページの一番上の大きい画像　右下あわせ*/
article #mainImageS { height: 55vh; margin: 0 auto 0; align-items: center;}	
/*温泉ページ　源泉説明*/
#onsen-gensen{
	width:100%;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	position: relative;
	background-image: url("../img/onsen/onsen-gensen-bg.jpg");
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 60px;
	padding: 45px;
}
.gensenTitle{
	font-size:150%;
	writing-mode: vertical-rl;
	letter-spacing: 2px;
}
.gensenTxt{
	line-height: 200%;
	writing-mode: vertical-rl;
    letter-spacing: 2px;
}
/*施設ページ　施設概要*/
.twoBox{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.twoBoxImg{width: 40%; padding-right: 5%;}
.twoBoxImg img{width:100%;}

/*PCアクセス お車でお越しの場合--*/
.accesspointBox{display: block;width: 100%; }
.row {margin-right: -15px; margin-left: -15px; font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;}
.row::before {display: table; content: " "; box-sizing: border-box;}
.col-sm-4 {width: 33.33333333%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
.access_point.start {background: #c6a85f; display: block; padding: 12px; border-radius: 0; border: none; color: #FFF; width: 100%; font-size: 16px; text-align: center; display: table; content: " "; line-height: 2; }
.access_point {height: 50px;}
.access_point.start::before {font-family: "FontAwesome"; content: "\f0ab"; margin-right: 0.5em; box-sizing: border-box;}
.access_caption {padding: 12px 5px; min-height: 50px; margin-left: 20px; color: #666; border-left: 2px #999 dotted; font-size: 16px;}
.access_point {display: block; padding: 12px; height: 50px; color: #333; width: 100%; border: 2px #666 solid; text-align: center; border-radius: 25px; background: #eee; font-size: 16px;line-height: 1.4;}
.access_point.goal {background: #942148; border-radius: 25px; margin-bottom: 80px; padding: 12px; border: none; color: #FFF; width: 100%; font-size: 16px; text-align: center; display: table; content: " "; line-height: 2;}
.access_point.goal::before {font-family: "FontAwesome"; content: "\f024"; margin-right: 0.5em;}
.visible-xs {display: none !important;}
.col-sm-12 {width: 100%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}

/*PCアクセス 公共交通機関でお越しの場合--*/
.public_transport {color: #e74c3c; font-size: 21px; margin-bottom: 20px; line-height: 1.4; font-family: Cinzel,"ヒラギノ明朝 ProN",HiraMinProN,"游明朝体","Yu Mincho",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;}
.col-lg-3 {width: 25%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
.col-md-6 {width: 50%; float: left;}
.col-lg-6, .col-md-6, .col-sm-6, .col-sm-6, .col-xs-6 {position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}	
/*宴会ページ　プラン*/
.planBoxA-inner { 
	width: 96%;
	margin: 2% 2%;
	display: flex;
	flex-direction: row;
    justify-content: space-between;
}
.planBoxA-inner img { width: 100%; }
.planBoxA-inner p{
	width: 50%;
	padding: 0 0 0 2%;
}
	
/*ページトップへあがるボタン トリップAIコンシェルジュ*/
.pagetop {
  height: 55px;
  width: 55px;
  position: fixed;
  right: 34px;/*10px*/
  bottom: 140px;/*15px→85pxから予約ボタン表示でさらに変更*/
  background-color:#555555;
  border: none;/*線なし*/
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2;
  cursor: pointer;
  opacity: 0.6;
}
.pagetop__arrow {
  display: block;
  height: 15px;
  width: 15px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  transform: translateY(20%) rotate(-45deg);
}
/*予約追従ボタン*/
.reserve_folliwing {right: 34px; }
	
/*あじさいスポット---------------------------------------------------*/
#ajisai #planBox .planTitle { height: 120px; padding: 5%;} 
#ajisai #planBox ul { width: 100%;}
#ajisai #planBox ul.noSliderBnr{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
#ajisai #planBox ul.noSliderBnr li{ margin-bottom: 0%;margin-right: 1%;}
#ajisai #planBox li { width: 23.5%;}
	
/* プラン一覧へボタン */
.flexboxPlan { flex-direction: row; padding: 0%;}
.flexbox .flexList { padding: 3%;}

/* CLS改善のため */
#slider-wrap {width: auto;}
/*#top-page #topImage {left:50%;  }*/

}
@media (min-width: 1010px) {
/*ホテルロゴサイズ修正*/
.header-inner #header-logo img { max-width: 300px;}

/*TOPページ　英語タイトルが長い時の改行用*/
.separate-rightBox02 { width: 35%;}
/*観光ページの一番上の大きい画像　右下あわせ*/
article #mainImageS { height: 60vh;}



}