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


/* プラン一覧ページ*/ 
#stayplan section h2 { margin: 12% 0 0 ; z-index: 2;} /* margin: 10% 0 3%から変更 */
#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/white.jpg); color:#333; overflow: hidden; margin: 0 0 5%; } /*beigeBg-stay.jpg変更*/
#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/white.jpg) ; color:#333; overflow: hidden; margin: 0 0 /*beigeBg-stay.jpg変更*/
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: 5% 2%; 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: #b7282e; padding: 
1% ;text-align: center;color: #fff;}/*2食付　赤*/ 
.food-type02{background: #c8a063;}/*朝食付　金*/ 
.food-type03{background: #403322;}/*素泊り　こげ茶*/ 
.food-type04{background: #275201;}/*予備　深緑*/ 
.food-type05{background: #fff; color: #000;}/*予備　白背景黒文字*/ 
 
#premium-bnrSpace li img { width: 100%; margin-top: 12%; }
 
@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%;}
}

/* ↓画面サイズが768px以上の場合の設定 */
@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;}*/

/* プラン一覧ページ */ 
#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/white.jpg);color:#333; overflow: hidden; margin: 0 1% 
5% 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;} /*beigeBg-stay.jpg変更、border-radius: 10px;を追加*/
#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: center;  margin: 0 0 0; color:#333; /*startをcenterに変更*/
width:100%; padding: 5%; height: 120px; text-align: center;} /*text-align: center;を追加*/
/*最初のいちおしプラン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; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;} /*border-radius: 10px;を追加*/
#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%;} 
	
}