@charset "utf-8";
/* CSS Document */
.fv{
	width: 100%;
	height: 100vh;
	position: fixed;
}

.sp_img_box li{
	height: 100vh;
}
.pc_fv{
	display: none;
}

.fv h2{
	font-size: clamp(28px,calc(64 / 1920 * 100vw),64px);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
}

@media screen and (min-width:960px){
	.sp_fv{
		display: none;
	}
	.pc_fv{
		display: block;
		background: #333;
	}
	
	.pc_img_box{
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: space-between;
		opacity: 0.8;
	}
	
	.pc_img_box li{
		width: 25%;
	}
}

.sns_icon{
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	height: 90px;
	width: 20px;
	position: absolute;
	top: 82.45877061469265%;
	right: 20px;
	z-index: 999;
}

.sns_icon li{
	transition: all 0.5s;
}

.sns_icon li:hover{
	opacity: 0.5;
}

@media screen and (min-width:960px){
.sns_icon{
	top: 76.2962962962963%;
	right: 80px;
	height: 130px;
	width: 30px;
}
}


/*about===================*/
.stay_about{
	position: relative;
}
.stay_about_bg{
	height: 100vh;
}
.stay_about_bg::after{
	content: "";
	background: rgba(255, 255, 255, 0.7);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.stay_about_text{
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 89.33333333333333%;
}
.stay_about_text h2{
	font-size: 24px;
	color: #302E26;
	font-weight: 500;
	position: relative;
	padding-top: 40px;
}

.stay_about_text h2::before{
	content: "月霞のお部屋について";
	font-size: 20px;
	color: #302E26;
	position: absolute;
	top:0;
	left: 0;
	z-index: 10;
}
.stay_about_text p{
	font-family: "Noto Serif JP", serif;
	font-size: clamp(16px,calc(20/1920 * 100vw),20px);
	color: #302E26;
	padding-top: 40px;

}
.stay_about_dis{
	display: flex;
	flex-flow: column;
}
.stay_about_dis span{
	line-height: 1.5em;
}
.stay_about_dis span:nth-child(4){
	display: block;
	padding-top: 10px;
}

@media screen and (min-width:960px){
	.stay_about_text{
	width: 38.22916666666667%;
}

	.stay_about_text p{
		padding-top: 70px;
	}
}
/*main 共通=========================*/
h2{
	letter-spacing: 0.05em
}
main dd,dl,dt{
	letter-spacing: 0.05em;
}

main{
	margin-top: 100vh;
	position: relative;
}
@media screen and (min-width:960px){
	.room_wrap{
	position: relative;
}
}

.room_name{
	color: #333;
	display: flex;
	text-align: center;
	font-size: clamp(20px,calc(20/375 * 100vw),32px);
}
.room_name_main{
	position: relative;
}

.room_name_sub{
	font-size: clamp(16px,calc(16/375 * 100vw),20px);
	margin-left: 10px;
}
.room_consept{
	margin-top: 30px;
}
.room_consept_title{
	font-size: clamp(16px,calc(16/375 * 100vw),24px);
}
.room_consept_description{
	font-size: clamp(14px,calc(16/375 * 100vw),20px);
	margin-top: 20px;
}
.room_detail{
	display: flex;
	justify-content: space-between;
	width: 130px;
	margin-top: 30px;
}
.room_reservation{
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	background: #B2AA8D;
	padding: 20px 40px;
	margin: 0 auto;
	margin-top: 70px;
	transition: all 0.6s;
}
.room_reservation::after{
	content: "→";
	position: absolute;
	top: 35%;
	left: 70%;;
	transform:rotate(-45deg);
}

.room_reservation:hover{
	background: #fff;
	color: #B2AA8D;
}

/*共通レスポンシブ=====================*/
@media screen and (min-width:960px){
	.room_consept{
		margin-top: 70px;
}
	.room_consept_description{
		margin-top: 30px;
}
	.room_detail{
		margin-top: 70px;
	}
	.room_reservation{
		margin:  70px 0 0 0; 
 	}
}
/*waori==========================*/
.waori_wrap{
	width: 100%;
	padding: 100px 0;
	font-family: "Noto Serif JP", serif;
	color: #333;
	background: url("../img/のいず.jpg");
}

.waori_description{
	width: 89.06666666666667%;
	margin: 0 auto;
	margin-top: 100px;
}

@media screen and (min-width:960px){
	.waori{
		z-index: 1;
		position: sticky;
		top: 0;
		margin-bottom: 10vh;
	}
	.waori_wrap{
		display: flex;
		justify-content: space-between;
		padding: 0;
	}
	.waori_img{
		width: 50%;
		height: 100vh;
	}
	
	.waori_description{
		width: 50%;
		position: relative;
		margin-top: 50px;
	}
	.description_wrap{
		width: 61.875%;
		position: absolute;
		top: 23.88888888%;
		left: 50%;
		transform: translateX(-50%);
	}
}

/*tsukiakari====================*/
.tsukiakari_wrap{
		width: 100%;
	background: url("../img/のいず.jpg");
	background-attachment: fixed;
	padding: 100px 0;
	font-family: "Noto Serif JP", serif;
	color: #333;
}
.tsukiakari_img{}
.tsukiakari_description{
	width: 89.06666666666667%;
	margin: 0 auto;
	margin-top: 100px;
}
@media screen and (min-width:960px){
	.tsukiakari{
		z-index: 1;
		position: sticky;
		top: 0;
		margin-bottom: 10vh;
	}
	.tsukiakari_wrap{
		display: flex;
		justify-content: space-between;
		padding: 0;
	}
	.tsukiakari_img{
		width: 50%;
		height: 100vh;
	}
	
	.tsukiakari_description{
		width: 50%;
		position: relative;
		margin-top: 50px;
	}
}
/*yoinone====================*/
.yoinone_wrap{
	width: 100%;
	background: url("../img/のいず.jpg");
	background-attachment: fixed;
	padding: 100px 0;
	font-family: "Noto Serif JP", serif;
	color: #333;
}

.yoinone_description{
	width: 89.06666666666667%;
	margin: 0 auto;
	margin-top: 100px;
}
@media screen and (min-width:960px){
	.yoinone{
		z-index: 1;
		position: sticky;
		top: 0;
		margin-bottom: 10vh;
	}
	.yoinone_wrap{
		display: flex;
		justify-content: space-between;
		padding: 0;
	}
	.yoinone_img{
		width: 50%;
		height: 100vh;
	}
	
	.yoinone_description{
		width: 50%;
		position: relative;
		margin-top: 50px;
	}
}
/*tsumugi====================*/
.tsumugi_wrap{
		width: 100%;
	background: url("../img/のいず.jpg");
	background-attachment: fixed;
	padding: 100px 0;
	font-family: "Noto Serif JP", serif;
	color: #333;
}

.tsumugi_description{
	width: 89.06666666666667%;
	margin: 0 auto;
	margin-top: 100px;
}
@media screen and (min-width:960px){
		.tsumugi{
			z-index: 1;
			position: sticky;
			top: 0;
			margin-bottom: 10vh;
	}
	.tsumugi_wrap{
		display: flex;
		justify-content: space-between;
		padding: 0;
	}

	.tsumugi_img{
		width: 50%;
		height: 100vh;
	}

	.tsumugi_description{
		width: 50%;
		position: relative;
		margin-top: 50px;
	}
}
/*yugakure====================*/
.yugakure_wrap{
		width: 100%;
	background: url("../img/のいず.jpg");
	background-attachment: fixed;
	padding: 100px 0;
	font-family: "Noto Serif JP", serif;
	color: #333;
}

.yugakure_description{
	width: 89.06666666666667%;
	margin: 0 auto;
	margin-top: 100px;
}
@media screen and (min-width:960px){
	.yugakure{
		z-index: 1;
		position: sticky;
		top: 0;
	}
	.yugakure_wrap{
		display: flex;
		justify-content: space-between;
		padding: 0;
	}
	.yugakure_img{
		width: 50%;
		height: 100vh;
	}

	.yugakure_description{
		width: 50%;
		position: relative;
		margin-top: 50px;
	}
}

/*設備=====================================*/
.equipment{
	background: #fff;
	padding-top: 150px;
}
.equipment h2,h3 .amenities h2,h3{
	color: #302E26;
}

.equipment h3{
	font-size: clamp(18px,calc(18/ 375 * 100vw),24px);
}

.detail_h2{
	font-size: clamp(20px,calc(20 / 375 * 100vw),24px);
	margin-left: 5.33333333333333%;
	margin-bottom: 30px;
	color: #302E26;
}
@media screen and (min-width:960px){
	.detail_h2{
		margin-left: 27.86458333333333%;
		margin-bottom: 50px;
	}
}

.equipment_pc_wrap li{
	font-size: 14px;
	font-family: "Noto Sans JP", sans-serif;
	color: #444;
}
@media screen and (min-width:960px){
	.equipment_pc_wrap li{
		font-size: 16px;
	}
}
.equipment_room_wrap, .equipment_kitchen_wrap{
	width: 84%;
	margin: 0 auto;
}
.equipment_room_title,.equipment_kitchen_title{
	padding-left: 35px;
	position: relative;
}
.equipment_room_title::before{
	content: "";
	background: url("../img/宿泊アイコン1.svg");
	background-position: center center;
	background-size: cover;
	width: 20px;
	height: 20px;
	position: absolute;
	top: -1px;
	left: 0;
}
.equipment_kitchen_title::before{
	content: "";
	background: url("../img/冷蔵庫アイコン2.svg");
	background-position: center center;
	background-size: cover;
	width: 20px;
	height: 20px;
	position: absolute;
	top: -1px;
	left: 0;
}

@media screen and (min-width:960px){
	.equipment_room_title,.equipment_kitchen_title{
		padding-left: 45px;
	}
	
	.equipment_room_title::before{
		width: 30px;
		height: 30px;
		top: -5px;
	}
.equipment_kitchen_title::before{
		width: 30px;
		height: 30px;
		left: 0;
	}
}

.equipment_kitchen_wrap{
	margin-top: 40px;
}

.equipment_room_all li{
	margin-top: 20px;
}

.equipment_kitchen_all li{
	margin-top: 20px;
}



@media screen and (min-width:960px){
	.equipment{
		padding-top: 200px;
}
	
	.equipment_kitchen_wrap{
		margin-top: 0;
	}
	.equipment_pc_wrap{
		display: flex;
		width: 44.58333333333333%;
		margin: 0 auto;
		justify-content: space-between;
	}
	

}
/*アメニィティ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.amenities{
	background: #fff;
	padding-top: 100px;
}

.amenities h3{
	font-size: clamp(18px,calc(18/ 375 * 100vw),24px);
}

.amenities_pc_wrap li{
	font-size: 14px;
	font-family: "Noto Sans JP", sans-serif;
	color: #444;
}
@media screen and (min-width:960px){
	.amenities_pc_wrap li{
		font-size: 16px;
	}
}

.amenities_sink_wrap, .amenities_kitchen_wrap{
	width: 84%;
	margin: 0 auto;
}
.amenities_sink_title,.amenities_bath_title{
	padding-left: 35px;
	position: relative;
}
.amenities_sink_title::before{
	content: "";
	background: url("../img/蛇口アイコン4.svg");
	background-position: center center;
	background-size: cover;
	width: 20px;
	height: 20px;
	position: absolute;
	top: -1px;
	left: 0;
}
.amenities_bath_title::before{
	content: "";
	background: url("../img/お風呂の無料アイコン3.svg");
	background-position: center center;
	background-size: cover;
	width: 25px;
	height: 25px;
	position: absolute;
	top: -1px;
	left: 0;
}

@media screen and (min-width:960px){
	.amenities_sink_title,.amenities_bath_title{
		padding-left: 45px;
	}
	.amenities_sink_title::before{
		width: 30px;
		height: 30px;
		top: -5px;
	}
	.amenities_bath_title::before{
		width: 30px;
		height: 30px;
		left: 0;
	}
}

.amenities_sink_all li{
	margin-top: 20px;
}

.amenities_kitchen_wrap{
	margin-top: 40px;
}

.amenities_bath_all li{
	margin-top: 20px;
}

@media screen and (min-width:960px){
	.amenities_pc_wrap{
		display: flex;
		width: 44.58333333333333%;
		margin: 0 auto;
		justify-content: space-between;
	}
	
	
	.amenities_kitchen_wrap{
		margin-top: 0;
	}
	
}
 /*注意事項========================*/
.caution{
	background: #fff;
	padding-top: 100px;
	padding-bottom: 100px;
}


.caution_all{
	width: 84%;
	margin: 0 auto;
}
.caution_all li{
	margin-top: 20px;
	color: #444;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 14px;
}
@media screen and (min-width:960px){
	.caution_pc_wrap{
		width: 44.58333333333333%;
		margin: 0 auto;
	}
	.caution h2{
		margin-left: 0;
	}
	.caution_all{
		margin: 0;
		width: 100%;
	}
	.caution_all li{
		font-size: 16px;
	}
	.caution{
		padding-bottom: 200px;
	}
}