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

h1 {
	margin: -50px 0 0 -10px;
	font-size: 155%;
	background-image:url(../img/common/h1_bg.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width:170px;
	min-height: 170px;
	min-width: 170px;
	color:#FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position:relative;
	z-index:2;
	line-height: 170%;
}
#h1Box { display:flex; flex-direction:column; align-items:flex-start;}
#h1-text { flex:100%; font-size: 115%; margin: 5% 0 10%;}

.textInImg { overflow:visible; }
.textInImg h2 {
  position: relative;
  display: inline-block;
  margin: 0 0 -50px -10px;
  padding: 1% 5% 1%;
  color: #fff;
  background: #000;
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  opacity: 0.9;
  z-index: 2;
}
.textInImg h2:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: '';
  border-top: 10px solid #005276;
  border-left: 10px solid transparent;
}

/* flex 1列 */
.onePiece { display:flex; flex-direction: column; justify-content:space-between; width: 100%; margin: 0 auto 5%;}
.onePiece li.animationUp { width:100%; margin-bottom: 10%;}
.onePiece li.animationUp:last-child { margin-bottom: 0%;}
.onePiece .imgBox { 
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 35vh;
}
.onePiece .imgBox img { width: auto; height: 100%;}
.onePiece p { margin: 1% 0 0;}
.onePiece .imgBox_top { 
	display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    height: 35vh;
}
.onePiece .imgBox_top img { width: auto; height: 100%;}

/* flex 2列 */
.twoPiece { display:flex; flex-direction: column; justify-content:space-between; flex-wrap:wrap; width: 100%;}
.twoPiece li { width:100%; margin: 2% 0 2%;}
.twoPiece li ul li { width: auto; margin:0;}
.twoPiece .imgBox { 
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 25vh;
}
.twoPiece .imgBox img { width: 100%; height: auto;}
.twoPiece p { margin: 2% 1% 1%; line-height: 140%;}

/* flex 3列 */
.threePiece { display:flex; flex-direction: row; justify-content:space-between; flex-wrap:wrap; width: 100%;}
.threePiece li { width:48%; margin: 0 0 5%;}
.threePiece .imgBox { 
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 15vh;
}
.threePiece .imgBox img { width: 100%; height: auto;}
.threePiece p { line-height: 140%;}

/* flex 4列 */
.fourPiece { display:flex; flex-direction: row; justify-content:space-between; flex-wrap:wrap; width: 100%;}
.fourPiece li { width:48%; margin: 1% 0 1%;}
.fourPiece .imgBox { 
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 18vh;
}
.fourPiece .imgBox img { width: 100%; height: auto;}
.fourPiece p { margin: 2% 1% 1%; line-height: 140%;}

.listInner {overflow: visible;}
.whiteBox { background:#FFF; height: auto;}
.beigeBox { background-color: rgba(248, 242, 222, 1);}
.grayBox { background: #565656; color: white; height: auto;}
.whiteTextureBox li { background:url(../img/common/whiteBg.png);}
.beigeTextureBox li { background:url(../img/common/beigeBg.png);}
.whiteTextureBox li div.listInner { background-color: rgba(248, 242, 222, 0.1); padding: 0%; height:100%;}
.beigeTextureBox li div.listInner { background-color: rgba(248, 242, 222, 0.5); padding: 0%; height:100%;}
.whiteTextureBox li div.listInner p , .beigeTextureBox li div.listInner p , .whiteBox p , .beigeBox p  { padding: 12px 10px 10px;}
.simpleImg img { width: 100%;}
.sightList .table dt.base { background:linear-gradient(90deg,rgba(251,232,179,0.6),rgba(251,232,179,1) 20%,rgba(251,232,179,1));}

/*table*/	
.table { font-size: 95%;}
.table li , .table-flex li { width: 100% !important; margin: 0 !important;} 
.table dl , .table-flex dl { display:flex; width: 100%; align-items: stretch;} 
.table dt , .table-flex dt { width: 20%; text-align:center; display:inline-block; vertical-align: middle; }
.table dd { width: 80%;background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,1) 80%,rgba(255,255,255,0.6));}
.table dd.noGradation { width: 80%; background-color:#FFF !important;}
.table dt , .table dd { margin-bottom: 1px; padding: 1.5%; }
.table-flex dt , .table-flex dd{  border-top:#999 1px solid; border-bottom:#999 1px solid; margin-top: -1px; padding: 1.5%; }
.table dt { background:linear-gradient(90deg,rgba(201,198,197,0.5),rgba(201,198,197,1) 20%,rgba(201,198,197,1));}
.table dt.noGradation { background:linear-gradient(90deg,rgba(201,198,197,1),rgba(201,198,197,1) 20%,rgba(201,198,197,1));}
.table dt.base { background:linear-gradient(90deg,rgba(244,233,197,0.6),rgba(244,233,197,1) 20%,rgba(244,233,197,1));}
.table dt.base-noGradation { background:linear-gradient(90deg,rgba(244,233,197,1),rgba(244,233,197,1) 20%,rgba(244,233,197,1));}
.table-flex dt { background:#f4e9c5;}
.table-flex dt.base  { background:#e3dfdd;}
.table-flex dd { flex:1; background-color:#fff; border-left:#c7c7c7 1px solid;}
.table-flex .th dt , .table-flex .th dd { background: #B43A4D !important; text-align:center; color:#FFF;}
.table-column dt , .table-column dd { width: 100%; padding: 2%; border:#999 1px solid;}
.table-column dt { background:#f4e9c5;}
.table-column dd { margin-top: -1px;}
.table-title { width: 100%; margin-top: 3%; padding: 1%; color:#CCC; text-align:center; background-image:url(../img/common/navBg.png); font-size:120%;}

/*dtとddの調整*/
.twoPiece .table dt , .separate-box .table dt { width: 30% !important;}
.twoPiece .table dt , .separate-box .table dd { width: 70% !important;}
.w30 { width: 30% !important;}
.w70 { width: 70% !important;}
.w15 { width: 15% !important;}
.w85 { width: 85% !important;}
.f10 { flex: 10% !important;}
.f5 { flex: 5% !important;}

.noBorder-top { border-top: none !important;}
.noBorder-bottom { border-bottom: none !important;}
.border-left-dotted { border-left:#c7c7c7 1px dotted !important;}

/*温泉ページ*/
.onsenDetail { margin-bottom: 5%;}
.onsenDetail details { margin-top: 20px;}
#bg-gry .onsenDetail { margin-top: 1%;}
.onsenDetail .DetailAccordion {
    max-width: 100%;
}
.onsenDetail .summary-label {
    max-width: 400px;
}

/*客室ページ*/
.roomDetail { margin-bottom: 5%;}
.roomDetail details { margin-top: 20px;}
.roomAbout { margin: 20px 0 10px;}
.roomAbout dt {display: inline; width: auto; border-bottom:#942148 1px solid;}
.roomAbout dd {margin-top: 5px;}
.roomDetail .DetailAccordion {
    max-width: 100%;
}
.roomDetail .summary-label {
    max-width: 400px;
}

/*施設案内ページ*/
.aboutDetail { margin-top: 0; margin-bottom: 5%;}
.aboutDetail p { margin-bottom: 25px;}
.aboutDetail img { width: 100%;}
.aboutDetailUnder { margin-top: 40px; display:flex; flex-direction:column;}
.aboutDetailUnder .left { width: 100%;}
.aboutDetailUnder .right { width: 100%; margin-left: 0;}
#aboutBnr { margin-top: 5%;}
#aboutBnr li {display: flex; flex-direction: column;}
#aboutBnr li div { width: 100%;}
#aboutBnr li div.aboutBnr-img {
	display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
	height: 250px;
    }
#aboutBnr li div.aboutBnr-img img { width: 100%; height: auto;}
#aboutBnr li div.aboutBnr-text { padding: 5%; background: #FFFFFF;}
#aboutBnr li div.aboutBnr-text h2 { margin: 0 0 0 0; padding: 0 0 0 0;}
#aboutBnr li#aboutBnr02 { flex-direction: column; margin-top: 20px;}
.aboutDetail details { margin-top: 20px;}
.card-detail{display: flex;flex-direction: row;
align-items: center;}
.card-detail li {width: 60px; margin-right: 10px;}
.card-detail li img{width:100%; height: 100%; object-fit: contain;}
.aboutDetail .DetailAccordion {
    max-width: 100%;
}
.aboutDetail .summary-label {
    max-width: 400px;
}

/*食事ページ*/

/*タブ切り替え*/
#tabs { display:flex; flex-wrap:wrap; margin: 0 auto 20px;}

/*タブのスタイル*/
.tab_item {
	display:inline-block;
	width:49%;
	padding: 2% 0;
	margin-bottom: 10px;
	text-align:center;
	background-image:url("../img/cuisine/cuisineTabBlack.svg");
	background-size:contain;
	background-repeat:no-repeat;
	color:#fff;
}
label[for="tab01"], label[for="tab03"], label[for="tab05"], label[for="tab07"]{
margin-right: 1%;
}
label[for="tab02"], label[for="tab04"], label[for="tab06"], label[for="tab08"]{
margin-left: 1%;
}
.tab_item:hover {
	cursor:pointer;
	background-image:url(../img/cuisine/cuisineTabRed.svg);
	color: #fff;
}
#tabs input:checked + .tab_item {
	background-image:url(../img/cuisine/cuisineTabRed.svg);
	color: #fff;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	width: 98vw; 
	margin: 5% calc(50% - 50vw); 
	padding: 5% 0 0;
	background:url(../img/common/black-thread.png), linear-gradient(348deg, rgba(25,15,5,1) 0%, rgba(25,15,5,1) 38%, rgba(40,25,10,0.9) 100%); 
	clear: both;
	overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content,
#tab03:checked ~ #tab03_content,
#tab04:checked ~ #tab04_content {
	display: block;
}

/*選択されているタブのスタイルを変える*/
#tabs input:checked + .tab_item {
  background-image:url(../img/cuisine/cuisineTabRed.svg);
}

/**********************************/

.iframe-wrapper {
	padding: 0 5%;
	height: 1000px;
	overflow: hidden;
}
.iframe-wrapper iframe {
	width: 100%;
	height: 100%;
}
.oshinagakiSlider { margin: 0 auto 0;}
.oshinagakiBox { width: 100%;}
.oshinagakiTitle { font-size: 180%; margin-bottom: 20px; color: white; font-family: 'Noto Serif JP', serif; padding: 5px 50px 0 50px;}
#oshinagakiNavi { width: 100%; margin: 0 auto 0;}
#oshinagakiNavi section { width: 100% ; height:auto; margin: 0 auto 0;}
#oshinagakiNavi #innerTabs { width: 100%; display:flex; flex-wrap:wrap;}
#oshinagakiNavi #innerTabs .innerTab_item { flex: 0 0 50%; margin-bottom: 1px; padding-right: 1px;}
#oshinagakiNavi #innerTabs .innerTab_item div { padding: 5px; background-color:#333; text-align:center; font-size: 0.9em; color:#fff;}
.innerTab_item:hover {
	cursor:pointer;
	opacity: 0.6;
}
.oshinagakiImage {
	display:flex; 
	flex-direction:column;
	background:url(../img/common/green-dust-and-scratches80.png), linear-gradient(348deg, rgba(25,54,5,1) 0%, rgba(54,99,22,0.9) 100%);
}
.oshinagakiImage .img { width: 100%;}
.oshinagakiImage .tategakiText { width: 100%; height: auto; color:#FFF; padding: 20px; line-height: 150%; font-family: 'Noto Serif JP', serif;}
.oshinagakiImage .pointUp {font-size: 110%; line-height: 150%; margin: 0 0 10px 0;}
.oshinagakiImage section , .oshinagakiImage .img .onePiece { margin: 0 auto 0 !important;}
.oshinagaki { background-color:#FFF; padding: 20px; line-height: 100%; letter-spacing: 0; font-family: 'Shippori Mincho', serif;}
.oshinagaki h4 { font-size: 130%; line-height: 140%; margin-left: 0;letter-spacing: 5px;}
.oshinagaki dl { font-size: 1em; margin: 0 0 20px 0;}
.oshinagaki dl dt { margin-right: 0; margin-top: 1em;}
.oshinagaki dl dd { margin-top: 5px; margin-right: 0; margin-left: 1em;}
.oshinagaki p.pinkText { margin-right: 0; font-size: 0.9em;}
.oshinagakiLink { display:flex; flex-direction: column; justify-content: flex-end; height:auto; background:#fff; font-family: 'Shippori Mincho', serif; padding: 0 0 0 0;}
.oshinagakiLink div.o-Link { width:80%; margin: 0 auto 20px; padding: 13px 20px 18px; background-color:#000; border-radius: 50px; text-align:center;}
.oshinagakiLink div.o-Link:hover { background-color: #942148;}
.oshinagakiLink div.o-Link a { color:#fff;}
.oshinagakiLink div.o-Date p { display: inline-block; width: auto; margin: 0 0 20px 20px; padding: 3px 10px 5px; background-color: #dfdfdf; color: black;}
.cuisineDetail { margin-top: 20px; margin-bottom: 40px;}
#cuisineMorningTab { margin: 7% 0 0;}
.cuisineDetail .DetailAccordion {
    max-width: 100%;
}
.cuisineDetail .summary-label {
    max-width: 400px;
}

/*アクセスページ*/
#google-map { width: 100%; height:70vh;}
#google-map iframe { width: 100%; height:100%;}
#access-add {  width: auto; margin: 0 0 10px;}
#access-add dt { font-size: 120%; font-weight: 600;}
#accessBox ul li { margin: 25px 0;}
.dp-bnrArea { display: flex; flex-wrap: wrap; margin-left: 2%; margin-top: 50px;}
.dp-bnrArea li {width: 48%; margin-right: 2%; margin-bottom: 30px;}
.accessDetail .DetailAccordion {
    max-width: 100%;
}
.accessDetail .summary-label {
    max-width: 400px;
}

/*周辺観光ページ*/
.mainImageText { float:right; margin: 1% 5% 0 0;}
.sightList {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content:flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.sightseeingBox { width: 100%; padding: 5% 5% 0;}
.sightseeingBox dl { }
.sightseeingBox dl dt.sightName { font-size: 110%; margin:3% 0 0; font-weight: 700;}
.sightseeingBox dl dt.sightName a:hover { color: #942148;}
.sightseeingBox dl dd.sightCont { margin-bottom: 2%;}
.positionBottom { margin-top:auto; width: 100%;}
.positionBottom .distance { background: #942148; color: white; text-align: center;}
.positionBottom .table li { background: none;}
.positionBottom .table dt { width: 50%; border-top: none; border-bottom:none;}
.positionBottom .table dd { width: 50%; border-top: none; border-bottom:none; text-align:center;}
.whiteBoxRound { background:#FFF; padding:3%; border-radius: 50px; text-align:center;}
.featureBox dl dt { font-size: 130% !important; text-align: center;}
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 50px;/*画面いっぱいにする場合100vh*/
	margin: 0 auto 0;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrow {
	position: absolute;
	top: 50%;/*着地点（サンプルは[class:cp_arrows]height300pxの50%）*/
	left: 40%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	-webkit-transform-origin: 50% 50%;
	        transform-origin: 50% 50%;
	opacity: 0;
}
.cp_arrows .cp_arrowfirst {
	-webkit-animation: arrow-move08 2s ease-in-out infinite;
	        animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrowsecond {
	-webkit-animation: arrow-move08 2s 1s ease-in-out infinite;
	        animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 30px;
	height: 3px;
	content: '';
	background: #555;
}
.cp_arrows .cp_arrow:before {
	-webkit-transform: rotate(30deg) translateX(-39%);
	        transform: rotate(30deg) translateX(-39%);
	-webkit-transform-origin: top left;
	        transform-origin: top left;
}
.cp_arrows .cp_arrow:after {
	-webkit-transform: rotate(-30deg) translateX(39%);
	        transform: rotate(-30deg) translateX(39%);
	-webkit-transform-origin: top right;
	        transform-origin: top right;
}
@-webkit-keyframes arrow-move08 {
	0% {
		top: 30%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes arrow-move08 {
	0% {
		top: 30%;/*スタート地点（サンプルは[class:cp_arrows]height300pxの35%）*/
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*faqページ*/
#faqLink {margin: 0 auto 3%;}
#faqLink ul { display: flex; flex-wrap: wrap;}
#faqLink li {
	width: auto;
	margin: 0 5px 10px 0;
	padding: 0.6rem 1em;
	display: block;
	color: #000;
	background: rgba(26,26,26,0.2);
	cursor: pointer;
	border-radius: 50px;
}
#faqLink li:hover {
	background: rgba(26,26,26,0.5);
}
#faqLink li a:hover {
	color: #fff;
}
#faq {}
#faq li { background: rgba(255,255,255,0.5); margin: 0 0 5%; padding: 5%; border-radius: 10px;}
#faq h2 { margin: 0 0 6%;}
#faq dl { margin-bottom: 50px;}
#faq dl dt {
	background-image:url(../img/faq/q.svg);
	background-repeat: no-repeat;
	background-size: 22px;
	background-position: left 0 top 3px;
	padding: 0 0 0 30px;
	line-height: 160%;
	font-size: 120%;
}
#faq dl dd {
	background-image:url(../img/faq/a.svg);
	background-repeat: no-repeat;
	background-size: 22px;
	background-position: left 0 top 10px;
	padding: 10px 0 0 30px;
	line-height: 160%;
	font-size: 110%;
	border-top: solid 1px #c7c7c7;
	margin-top: 10px;
}

/*約款ページ*/
#stipulation {}
#stipulation li { margin-bottom: 5%;}
.stipulation-dt { font-size: 120%; margin-bottom: 10px;}
#saigo { margin-top: 5%; text-align:right;}

/*情報Box*/
.infoBox { background-color:#FFF; padding: 5%; border-radius: 10px;}
.infoBox dt { margin-bottom: 3%;}
.infoBox h3 { font-size: 120%;}

/*宴会ページ*/
.flex-2img { display:flex; width: 100%; justify-content:space-between; flex-direction:column;}
.flex-2img div {  width:100%; margin-bottom:2%;}
.flex-2img div img { width: 100%;}

/* プラン一覧ページ*/ 
#stayplan section h2 { margin: 10% 0 3% ; z-index: 2;} 
#stayplan .planBox .imgBox{display:flex; width:100%;margin: 0 0 0 0; padding: 0 2% 0 0; flex-direction: 
column;justify-content: center;align-items: flex-start;} 
#stayplan .planBox .imgBox img { width: 100%; } 
#stayplan .planBox ul.planInner{ width: 100%; display: flex; flex-direction: column; align-items: stretch;} 
#stayplan .planBox ul.planInner li{ width: 100%; height: auto!important; display: flex; flex-direction: row; align-items:flex-start;background:url(../img/stay/beigeBg-stay.jpg); color:#333; overflow: hidden; margin: 0 0 5%; } 
#stayplan .planBox ul.planInner li a.planPhoto{display: block; width:34%; height: auto;} 
#stayplan .planBox ul.planInner a.planWord {display: block; width: 100%;} 
#stayplan .planBox ul.planInner .planTitle { display: flex; justify-content: start; margin: 0 0 0; padding: 3%; 
margin-bottom: 0%; color:#333; font-weight: 700;} 
#stayplan .planLead{margin: 0 0 3% ; } 
/*最初のいちおしプラン3つ */ 
#stayplan .planBox ul.recommendP{ width: 100%; display: flex; flex-direction: column; align-items: stretch;} 
#stayplan .planBox ul.recommendP li{ width: 100%; height: auto!important; display: flex; flex-direction: row; 
align-items:flex-start;background:url(../img/stay/beigeBg-stay.jpg) ; color:#333; overflow: hidden; margin: 0 0 
5%;} 
#stayplan .planBox ul.recommendP li a.planPhoto{width:34%; margin-right: 3%;} 
#stayplan .planBox ul.recommendP .imgBox {display:flex; width:100%;margin: 0 0 0 0; padding: 0 0 0 0; flex-direction: column;justify-content: center;align-items: flex-start;} 
#stayplan .planBox ul.recommendP .imgBox img { width: 100%; } 
#stayplan .planBox ul.recommendP a.planWord {display: block; width: 61%;} 
#stayplan .planBox ul.recommendP .planTitle{ display:block; width:100%; padding: 3% 0; color:#333; } 
.osusume { font-size: 115%; font-weight: 700; line-height: 1.4;} 
.food-type01,.food-type02,.food-type03,.food-type04,.food-type05{width:100%;background: #942148; padding: 
1% ;text-align: center;color: #fff;}/*2食付　赤紫*/ 
.food-type02{background: #275201;}/*朝食付　緑*/ 
.food-type03{background: #403322;}/*素泊り　こげ茶*/ 
.food-type04{background: #db5402;}/*予備　橙*/ 
.food-type05{background: #fff; color: #000;}/*予備　白背景黒文字*/ 

/*TOPページ　プレミアムクラブ会員募集バナー-------------------------------------------------------------------------*/
.premiumPC{
display:none;}
}
.premiumSP{	
	position: relative;
	display: block;
}
#premium-banner{margin: 0 auto 3%;}
#premium-banner img{width: 100%;}

/*プレミアムクラブ会員募集ページ-------------------------------------------------------------------------*/
.premiumBox{display: flex; flex-direction: column; justify-content: center; width:100%; margin: 0 auto; }
.premiumBoxInner img{width: 100%;}
.premiumBoxInner02{ margin: 6% 0 15%;}
.premiumBtn{width: 100%; display: block; margin: 10% 0 ;}
.premiumBtn .catchphrase{color:#5d483f; width: 100%;display: block; font-size: 140%; text-align: center; margin: 0 auto;}
.pBtn-con{display: flex;flex-direction: column;justify-content: center;}
.pBtn-con div{color: #fff; background:#5d483f; margin:2% 5% 5%;text-align: center; font-size: 120%;}/*ボタン1つ*/
.pBtn-con div a{color: #fff;display:block; width:100%;padding:3%;}/*ボタン1つ*/
.pBtn-con div a:hover{background:#dcd5d7;color:#5d483f;}/*ボタン1つ*/
.pBtn-con02{display: flex;flex-direction: column;justify-content: center;}
.pBtn-con02 div{background:#9f978d; margin:0% 5% 5%;text-align: center; font-size: 120%;}/*ボタン2つ*/
.pBtn-con02 div a{color: #fff; display:block; width:100%;padding:3%;}/*ボタン2つ*/
.pBtn-con02 div a:hover{background:#dcd5d7; color:#5d483f;}/*ボタン2つ*/
.p-nav01{background:#dcd5d7;}
.p-nav02{margin:0 5% 5%;}
/*会員特典表組---------------*/
h2.TokutenTit{color: #222; font-size: 120%; font-weight: 600; margin-bottom: 2em;text-align: center; margin:0 0 1em; }
h2.TokutenTit .underColor{display: inline-block; background: linear-gradient(transparent 90%, #D8CC9C 90%); padding: 0 2em;}
#kaiinTokuten tr, #kaiinTokuten th, #kaiinTokuten td { border: 1px solid #888888; padding: 0.5em;}
#kaiinTokuten { width: 100%; text-align: center; line-height: 120%;}
#kaiinTokuten th { background-color: #01436f; text-align: center; white-space: normal; }/*元の紺色#172C68*/
#kaiinTokuten td { vertical-align:middle; text-align: center;background: #fffef9;}
#kaiinTokuten th.left , #kaiinTokuten td.left {text-align: left; }
.whiteTxt { color: #fff;}
.blackTxt { color: #000;}
.goldBack{
	background: linear-gradient(-20deg, #D3A900 0%, #D8CC9C 100%);
}
.diaBack{
  background: #E8B92F;/* 枠線の色*/
	background: linear-gradient(-20deg, #7A98D3 0%, #E5EBF9 100%);
}
/*会員ログインボタン追加---------------*/
.login_btn{width: 100%; position: relative; margin: 1em 0 0;}
.login_btn a {
	display: block;text-align: center; 
	padding: 0.5em; color: #fff;
	background: #0169ae;
	}
.login_btn a:hover{opacity: 0.5;}
.box942148 a{background:#942148; }
.boxc09 a{background:none; color: #333; border: 1px solid #c09c3b;}

@media (min-width: 470px) {
.onePiece .imgBox img { width: 100%; height: auto;}
.onePiece .imgBox_top img { width: 100%; height: auto;}
}

@media (min-width: 500px) {
.tab_item { padding: 3% 0; margin-bottom: 30px;}
.tab_item:hover { color: #fff;}
#tabs input:checked + .tab_item { color: #fff;}
}

@media (min-width: 600px) {
.threePiece .imgBox { height: 23vh;}
.tab_content {width: 98.5vw;}
.cp_arrows .cp_arrow {left: 43%;}
}

@media (min-width: 768px) {
h1 {
	margin: 5% 0 -30px -30px;
	font-size: 170%;
	letter-spacing: 0.1em;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	background-image:url(../img/common/h1_bg.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width:40%;
	min-height: 250px;
	min-width: 250px;
	color:#FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position:relative;
	z-index:2;
	line-height: 170%;
}
#h1Box { flex-direction:row;}
#h1-text { flex:60%; margin: 10% 0 20px 30px;}

.onePiece .imgBox { height: 45vh;}
.onePiece .imgBox_top { height: 45vh;}

.twoPiece { flex-direction: row;}
.twoPiece li { width:49%; margin: 1% 0 1%;}
.twoPiece li ul li { width: auto; margin:0;}

.threePiece { justify-content:flex-start;}
.threePiece li { width:31%; margin: 1% 1% 1%;}	
.threePiece .imgBox { height: 19vh;}

.fourPiece { justify-content:flex-start;}
.fourPiece li { width:32.6%; margin: 1% 0.32% 1%;}	
.fourPiece .imgBox { height: 20vh;}
.fourPiece .imgBox img { width: 100%; height: auto;}
.fourPiece p { margin: 2% 1% 1%; line-height: 140%;}

/*table*/
.table dl , .table-flex dl { flex-direction: row;} 
.table dt , .table-flex dt { width: 20%; margin-top: 0; }
.table dd { width: 80%;}
.table dt , .table dd { padding: 1% 0 1% 0; }

.w30 { width: 20% !important;}
.w70 { width: 80% !important;}
.w15 { width: 20% !important;}
.w85 { width: 80% !important;}
.f10 { flex: 10% !important;}
.f5 { flex: 5% !important;}

/*食事ページ*/

/*タブのスタイル*/
	
.tab_content {margin: 0 calc(50% - 50vw); padding: 5% 0 0;}
#oshinagakiNavi #innerTabs .innerTab_item { flex: 0 0 25%;}

/*タブ切り替えの中身のスタイル*/
.tab_item { font-size: 100%;}
.oshinagakiTitle {padding: 0 50px 0 50px;}
.oshinagakiImage { flex-direction:row;}
.oshinagakiImage .img { width: 60%;}
.oshinagakiImage .tategakiText { width: 40%; height: auto; padding: 25px 20px 0 40px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
.oshinagakiImage .tategakiText div {overflow-wrap: break-word; font-size: 95%;}
.oshinagakiImage .pointUp {display: block; font-size: 110%; margin: -5px 0 0 20px;}
.oshinagaki h4 { margin-left: 20px;}
.oshinagaki { padding: 40px 40px 20px; line-height: 150%; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; letter-spacing: 2px;}
.oshinagaki dl { font-size: 0.9em;  margin: 0 0 0 0;}
.oshinagaki dl dt { margin-right: 1%; margin-top: 0;}
.oshinagaki dl dd { margin-top: 1em; margin-right: 0; margin-left: 0;}
.oshinagaki p.pinkText { margin-right: 20px; line-height: 140%;}
.oshinagakiLink { flex-direction: row; padding: 0 50px 0 0;}
.oshinagakiLink div.o-Link { width:auto; margin: 0 0 50px 20px; padding: 2px 20px 4px; font-size: 0.9em;}
.oshinagakiLink div.o-Date p { width:auto; margin: 0 0 50px; padding: 2px 20px 4px; font-size: 0.9em;}
.cuisineDetail { margin-top: 50px;}

/*館内施設ページ*/
.aboutDetailUnder { flex-direction:row;}
.aboutDetailUnder .left { width: 40%;}
.aboutDetailUnder .right { width: 60%; margin-left: 5%;}
#aboutBnr li {flex-direction: row;}
#aboutBnr li#aboutBnr02 { flex-direction: row-reverse; margin-top: 20px;}
#aboutBnr li div.aboutBnr-img { height: 250px;}

/*客室ページ*/
.roomDetailUnder { display:flex; flex-direction:row;}
.roomDetailUnder .left { width: 60%;}
.roomDetailUnder .right { width: 40%; margin: 0 0 0;}

/*宴会ページ*/
.flex-2img { flex-direction:row;}
.flex-2img div { width:49%; margin-bottom:0;}
	
/*アクセスページ*/
#access-add {margin: 60px 0 10px;}
.dp-bnrArea li {width: 31%;}
.dp-bnrArea { margin-left: 1%;}
.dp-bnrArea li {width: 31%; margin-right: 1%;}
	
/*周辺スポット*/
.sightseeingBox dl dt.sightName { margin: 0 0 3%;}
.cp_arrows .cp_arrow {left: 45%;}

/* プラン一覧ページ */ 
#stayplan .planBox .imgBox{display:flex; width:100%;margin: 0 0 0 0;  padding: 0 0% 0 0;flex-direction: 
column;justify-content: center;align-items: center;} 
#stayplan .planBox .imgBox img { width: 100%; height: 100%; object-fit: cover;} 
#stayplan .planBox ul { width: 100%;} 
#stayplan .planBox ul.planInner{ width: 100%; display: flex; flex-direction: row; align-items: stretch;justify-content: flex-start; flex-wrap: wrap;} 
#stayplan .planBox ul.planInner li{ width: 24%; height: auto!important; display: flex; flex-direction: column; 
align-items:flex-start;background:url(../img/stay/beigeBg-stay.jpg);color:#333; overflow: hidden; margin: 0 1% 
5% 0;} 
#stayplan .planBox ul.planInner li a.planPhoto{ width:100%; margin-right: 0%;} 
#stayplan .planBox ul.planInner a.planWord { width: 100%; } 
#stayplan .planBox ul.planInner .planTitle { display: flex; justify-content: start;  margin: 0 0 0; color:#333; 
width:100%; padding: 5%; height: 120px;} 
/*最初のいちおしプラン3つ*/ 
#stayplan .planBox ul.recommendP{ flex-direction: row; justify-content: center;} 
#stayplan .planBox ul.recommendP li{ width:32%; margin: 1% 1% 1%; flex-direction:column; } 
#stayplan .planBox ul.recommendP li:first-child { width:32%; margin: 1% 1% 1% 0%; flex-direction:column;} 
#stayplan .planBox ul.recommendP li:last-child { width:32%; margin: 1% 0% 1% 1%; flex-direction:column;} 
 
#stayplan .planBox ul.recommendP li a.planPhoto{width:100%;margin-right: 0%;} 
#stayplan .planBox ul.recommendP .imgBox {width:100%; height: auto; display: flex;justify-content: center;align-items: center;padding: 0 0 0 0;} 
#stayplan .planBox ul.recommendP .imgBox img { width: 100%; height: 100%; object-fit: cover; } 
#stayplan .planBox ul.recommendP a.planWord{width:100%;} 
#stayplan .planBox ul.recommendP .planTitle {width:100%; padding: 3% 3%; text-align: center;} 
.osusume { font-size: 120%; font-weight: 700; padding: 3%;} 
	
/*TOPページ　プレミアムクラブ会員募集バナー-------------------------------------------------------------------------*/
#top-page #planBox{max-width: 1200px; margin: 0 auto;}
#premium-banner{max-width: 1200px; }
.premiumPC{
	position: relative;
	display: block;
}
.premiumSP{display:none;}
/*プレミアムクラブ会員募集ページ-------------------------------------------------------------------------*/
.premiumBox{max-width: 1000px;}
.premiumBoxInner02{ background: #fffef9; padding: 3%; margin: 0 0 10%;}
.premiumBtn{ max-width: 1000px; margin: 0 auto 5%;}
.pBtn-con{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; }
.pBtn-con div{width:48%; background:#5d483f; margin:1% 26% 2% 26%;text-align: center;}
.pBtn-con div a{color:#fff; display:block; width:100%;padding:3%;}
.pBtn-con02{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; }
.pBtn-con02 div{width:48%;background:#9f978d; margin:2% 0% 2% 0;text-align: center;}
.pBtn-con02 div a{color:#fff;display:block; width:100%;padding:3%;}
.pBtn-con02 .p-nav01{margin-right: 2%;}
.pBtn-con02 .p-nav02{margin:2% 0 2% 0;}
.premiumBtn .catchphrase{font-size: 200%; }
h2.TokutenTit{font-size: 140%; }
#kaiinTokuten tr, #kaiinTokuten th, #kaiinTokuten td { padding: 20px 10px;}
#kaiinTokuten th.left , #kaiinTokuten td.left {text-align: left; padding-left: 20px;}
	
}

@media (min-width: 870px) {
/*食事ページ*/
.tab_item {
	flex: 0 0 25%;
	width: 25%;
	padding: 1% 0;
	font-size: 90%;
}

label[for="tab01"], label[for="tab03"], label[for="tab05"], label[for="tab07"]{
	margin-right: 0;
}
label[for="tab02"], label[for="tab04"], label[for="tab06"], label[for="tab08"]{
	margin-left: 0;
}

/*タブ切り替えの中身のスタイル*/
.oshinagaki { padding: 50px 50px 20px;}
.oshinagaki dl dt { margin-right: 1%;}
.oshinagaki dl dd { margin-right: 1%;}
.oshinagakiImage .tategakiText div { line-height: 180%; margin: 20px 0 0 20px; letter-spacing: 3px;}
.oshinagakiImage .pointUp { line-height: 180%; font-size: 110%; margin: -20px 0 0 20px;}
}

@media (min-width: 890px) {
h1 {
	min-height: 250px;
	max-width:250px;
	min-width: 250px;
}
.iframe-wrapper { height: 1100px;}
.tab_item { padding: 1.25% 0;}
.tab_content {width: 99vw;}
}

@media (min-width: 960px) {
.oshinagakiImage .tategakiText { padding: 25px 20px 0 15px;}
.oshinagakiImage .tategakiText div {font-size: 100%;}
.oshinagakiImage .pointUp {line-height: 190%; font-size: 120%;  margin: -20px 0 0 20px;}
}

@media (min-width: 1010px) {
h1 {
	min-height: 300px;
	min-height: 250px;
}

.twoPiece .imgBox { height: 35vh;}
.threePiece .imgBox { height: 25vh;}
	
.fourPiece  { justify-content:flex-start;}
.fourPiece li { width:24%; margin: 1% 0.5% 1%;}
.fourPiece .imgBox { height: 20vh;}
.fourPiece .imgBox img { width: 100%; height: auto;}
.fourPiece p { margin: 2% 1% 1%; line-height: 140%;}

.oshinagaki dl dt { margin-right: 2%;}
.oshinagaki dl dd { margin-right: 2%;}
.oshinagakiImage .tategakiText { padding: 40px 40px 0 15px;}	
}

@media (min-width: 1150px) {
.threePiece .imgBox { height: 26.5vh;}
.oshinagakiImage .tategakiText div {line-height: 200%;}
}

@media (min-width: 1700px) {
.tab_content {width: 99.5vw;}
}