#header_sub, #brekkie, #facilities {
	background-color: #d5d2c7;
	padding: 50px 0;
}

#brekkie, #facilities {
	background-color: #d5d2c7;
	padding: 50px;
}

/* ---------------------------------------------------------------------------------------------

　   タイトル

--------------------------------------------------------------------------------------------- */
#rooms h2, #brekkie h2, #amenities h2, #facilities h2, #others h2 {
    width: 100%;
    text-align: left;
    font-size: 2em;
    font-family: pennsylvania, monospace;
    margin: 0 0 40px 0;
}

.hero_abt_inn h1 {
    font-size: 3em;
    font-family: pennsylvania, monospace;
    color: #f4f4f4;
    background: #6f8310;
    width: 300px;
    /*padding: 0 20px;*/
    text-align: center;
    position: relative;
    top: 60vh;	
}

/* ---------------------------------------------------------------------------------------------

　   ヒーロー

--------------------------------------------------------------------------------------------- */
#hero_abt {
	height: 70vh;
}

 .hero_abt_inn {
     background-image: url("../image/about/abt_hero.webp");
     background-position: center;
     background-size: cover;
     height: 70vh;
}

/* ---------------------------------------------------------------------------------------------

　   SUMMARY

--------------------------------------------------------------------------------------------- */
#header_sub a {
	color: #535761;
	font-size: 0.8em;
    letter-spacing: 0.1em;
}

.summary {
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.summary .l-box {
	padding-right: 10px;
	border-right: solid 1px #f4f4f4;
}

.summary .r-box ul {
	display: flex;
	justify-content: space-around;
	margin: 20px 0 0 0;
}

.summary .r-box ul li {
    width: 100%;
    text-align: center;
    border-right: solid 1px #535761;
	font-family: a-otf-ryumin-pr6n, serif;
	padding: 0 5px;
}

.summary .r-box ul li:nth-child(5n) {
    border-right: none;
}

.summary .l-box p,
.summary .r-box p {
	font-family: a-otf-ryumin-pr6n, serif;
}


/* ---------------------------------------------------------------------------------------------

　   ROOMS

--------------------------------------------------------------------------------------------- */
.df_box {
	display: flex;
}

.room_desc {
	float: right;
    padding: 30px;
    background: #6e8310;
	min-width: 240px;
}

.room_desc dl {
	color: #f4f4f4;
}

#rooms .df_box .l-box {
	flex: 1;
	border-right: solid 1px #6e8310;
	margin: -10px;
}

#rooms .df_box .r-box {
	flex: 2;
    margin-left: 70px;
    margin-bottom: 15vh;
}

#cabin, #tw, #dtw, #triple, #communal {
   margin-top:-110px;
  padding-top:110px;
}

/* --------------------------------------------------
　   スライダー（キャビン）
---------------------------------------------------- */
.room_slides ul li.cabin1 {
	background-image: url("../image/about/cabin1.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.cabin2 {
	background-image: url("../image/about/cabin2.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
	min-height: 500px;
}

/* --------------------------------------------------
　   スライダー（ツイン）
---------------------------------------------------- */
.room_slides ul li.tw1 {
	background-image: url("../image/about/tw1.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.tw2 {
	background-image: url("../image/about/tw2.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
	min-height: 500px;
}

/* --------------------------------------------------
　   スライダー（デラックスツイン）
---------------------------------------------------- */
.room_slides ul li.dtw1 {
	background-image: url("../image/about/dtw1.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.dtw2 {
	background-image: url("../image/about/dtw2.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
	min-height: 500px;
}

/* --------------------------------------------------
　   スライダー（トリプル）
---------------------------------------------------- */
.room_slides ul li.triple1 {
	background-image: url("../image/about/triple1.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}


/* --------------------------------------------------
　   スライダー（共用）
---------------------------------------------------- */
.room_slides ul li.shower1 {
	background-image: url("../image/about/shower_room.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.shower2 {
	background-image: url("../image/about/shower_booth.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.restroom1 {
	background-image: url("../image/about/restroom_3-4f.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.restroom2 {
	background-image: url("../image/about/restroom_5f.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.washroom {
	background-image: url("../image/about/washroom.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.laundry {
	background-image: url("../image/about/laundry_room.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.easy_pt {
	background-image: url("../image/about/easy_pt.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.smoking {
	background-image: url("../image/about/smoking_area.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

.room_slides ul li.corridor {
	background-image: url("../image/about/corridor.jpg");
	background-size: cover;
	background-position: center;
	margin: 0 auto;
    min-height: 500px;
}

/* ---------------------------------------------------------------------------------------------

　   BREAKFAST

--------------------------------------------------------------------------------------------- */
#brekkie .df_box .l-box {
	flex: 1;
}

#brekkie .df_box .r-box {
	flex: 2;
    margin-left: 30px;
}

#brekkie .menu_list .l-box,
#brekkie .menu_list .r-box {
	flex: 1;
	padding: 20px;
}

#brekkie .menu_list .l-box dl dt,
#brekkie .menu_list .r-box dl dt {
	border-bottom: solid 2px #6f8310;
	width: fit-content;
}

#brekkie .menu_list .l-box dl dd:last-child,
#brekkie .menu_list .r-box dl dd:last-child {
	text-align: right;
}

#brekkie .menu_list .l-box dl dd,
#brekkie .menu_list .r-box dl dd {
	display: flex;
}

#brekkie .menu_list .l-box dl dd span.dots,
#brekkie .menu_list .r-box dl dd span.dots {
	flex: 1;
    border-bottom: dotted 2px #535761;
    margin-left: 15px;
    margin-right: 15px;
    height: 12px;
}

/* ---------------------------------------------------------------------------------------------

　   AMENITIES

--------------------------------------------------------------------------------------------- */
#amenities .df_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 60%;
    margin: 0 auto;
}

#amenities .df_box .icons {
	flex: 1;
    margin: 20px;
    text-align: center;
}

#amenities .df_box .icons p {
	font-size: 0.9em;
    text-align: center;
    margin-top: 20px;
}

#amenities .df_box .icons img {
	max-width: 100px;
}

/* ---------------------------------------------------------------------------------------------

　   FACILITIES

--------------------------------------------------------------------------------------------- */
#facilities p {
	margin: 10px;
}

/* ---------------------------------------------------------------------------------------------

　   OTHERS

--------------------------------------------------------------------------------------------- */
#others h3 {
    font-family: a-otf-ryumin-pr6n, serif;
    font-weight: bold;
    border-bottom: solid 2px #6f8310;
    width: fit-content;
    margin: 20px 0;
}

#others .tbl {
	width: 100%;
    margin: 0 auto;
    font-size: 1em;
    margin-bottom: 50px;	
}

#others .tbl dl {
	display: flex;
    font-family: inherit;
    margin: 15px 0;
    padding-bottom: 5px;
    border-bottom: dotted 1px #6e8310;
}

#others .tbl dl dd {
	min-width: 300px;
}

/* ---------------------------------------------------------------------------------------------

　  メディアクエリ

--------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1440px){
}

 @media only screen and ( max-width : 768px ) {
	.hero_abt_inn {
		background-size: cover;
	}
	
	.hero_abt_inn h1 {
		font-size: 2em;
		position: relative;
		top: 60vh;
	 }
	 
	.summary {
		 display: block;
	}
	
	.summary .l-box {
		border-right: none;
		border-bottom: solid 1px #f4f4f4;
		padding-bottom: 5px;
	}
	 
	 #rooms .df_box {
		 display: block;
	 }
	 
	 #rooms .room_desc {
		min-width: 90%;
		float: none;
	 }
	 
	 #rooms .df_box .r-box {
	    margin-left: 10px;
		margin-bottom: 0;
    	height: 70vh;
	}

	 #rooms .df_box .l-box {
		margin: 10px;
	 }
	 
	 #brekkie .df_box {
		 display: block;
	 }

	 #brekkie .df_box .r-box {
		 margin: 20px 0;
	 }
	 
	 #brekkie .df_box .r-box {
		 display: flex;
		 justify-content: center;
	 }
	 
	 #brekkie .df_box .l-box img {
		width:100%;
	 }

	 #amenities .df_box {
		max-width: 100%;
	}
}

 @media only screen and ( max-width : 480px ) {
	 #hero_abt {
		height: 70vh;
	}
	 
	.hero_abt_inn {
		position: relative;
		height: 70vh;
        background-size: cover;    
	}
	 
	 .hero_abt_inn h1 {
        top: 55vh;
        width: 100%;
        font-size: 1.5em;
     }	
	 	 
	 .summary .l-box p, .summary .r-box p {
		font-size: 0.8em;
	}
			 
	 .summary .r-box ul {
		flex-wrap: wrap;
		justify-content: center;
		margin: 20px 0 0 0;
	}

	 .summary .r-box ul li {
		width: 100%;
		text-align: left;
		border-right: none;
		padding: 0 5px;
   		margin: 5px;
	}
	 
	 .summary .r-box ul li::before {
		content: '▷';
		margin-right: 0.6em;
	}
	 
	 #rooms h2, #brekkie h2, #amenities h2, #facilities h2, #others h2 {
		width: 100%;
		text-align: center;
		font-size: 2em;
		font-family: pennsylvania, monospace;
		margin: 0 0 40px 0;
	}

	 #rooms .sub-t,
	 #brekkie .sub-t,
	 #amenities .sub-t,
	 #facilities .sub-t,
	 #others .sub-t {
		padding-right: 10px;	 
	 }
	 
	 #brekkie, #facilities {
		padding: 50px 20px;
	}
	 .room_desc {
		 padding: 0 1px 0 0;
		 width: 100%;
	 }
	 
	 .room_desc dl {
    	font-size: 0.8em;
		padding: 18px;
	}
	 
    .room_slides ul li.cabin1,
    .room_slides ul li.cabin2,
    .room_slides ul li.tw1,
    .room_slides ul li.tw2,
    .room_slides ul li.dtw1,
    .room_slides ul li.dtw2,
    .room_slides ul li.triple1,
    .room_slides ul li.shower1,
    .room_slides ul li.shower2,
    .room_slides ul li.restroom1,
    .room_slides ul li.restroom2,
    .room_slides ul li.washroom,
    .room_slides ul li.laundry,
    .room_slides ul li.easy_pt,
    .room_slides ul li.smoking,
    .room_slides ul li.corridor {
        min-height: 200px;
	}
     
     

	.room_slides ul li.own1,
	.room_slides ul li.own2,
	.room_slides ul li.own3,
	.room_slides ul li.own4,
	.room_slides ul li.own5 {
		min-height: 220px;
	}
	 
	 #rooms .df_box .r-box {
		 height: 32vh;
		 margin: 0 0 15vh 0;
	 }
	 
	 #rooms .df_box .r-box p {
	 	font-size: 0.8em;
	}
	 
	#rooms, #amenities, #others {
		padding: 50px 20px;
	}
	 
	#rooms .df_box .l-box {
		margin: 0 0 10px 0;
        padding: 0;    
	}
	 
	 #brekkie .df_box .l-box,
	 #brekkie .df_box .r-box {
		 margin: 0 auto;
		 margin-top: 20px;
		 text-align: center;
		 display: block;
	 }
	 
	 #brekkie .df_box .r-box dl {
		font-size: 0.8em;
	}
	 
	 #brekkie .menu_list .l-box,
	 #brekkie .menu_list .r-box {
			padding: 0;
		}
	 #brekkie .df_box .l-box img {
		 max-width: 200px;
	 }
	 
	 #brekkie .df_box .r-box .df_box {
		 display: block;
		 margin-top: 20px;
	 }
	 
	 #amenities .df_box {
		flex-wrap: wrap;
	    max-width: 100%;	 
	}

	 #amenities .df_box .icons {
		margin: 0;
	}
	 #amenities .df_box .icons img {
		min-width: 100px;
	}
	 
	 #facilities p {
		 font-size: 0.8em;
	 }
	 
	 #others .tbl dl {
		display: block;
		font-size: 0.8em;
	}

	 #others .tbl dl dd {
		min-width: 100%;
	}
	 
	 #others .tbl dl dd:first-child {
		font-weight: bold;
	}
     
	 #rooms, #amenities, #others, #header_sub, #facilities {
		 padding-bottom: 45vh;
		 padding: 30px;
	 }

}


 @media only screen and ( max-width : 320px ) {
	 #hero_abt {
		height: 70vh;
	 }
	 
	 .hero_abt_inn {
		position: relative;
		height: 70vh;
		background-size: cover; 
	}

	 .hero_abt_inn h1 {
        top: 55vh;
        width: 100%;
        font-size: 1.5em;
     }
	 
	 .summary {
		 width: 100%;
	 }

	 #brekkie {
		padding-bottom: 45vh;
		padding: 30px;
		margin-top: 40px;
		}
	 
	 #rooms .df_box .r-box {
		margin: 0px 0 30vh 0;
	}
	 	 
	 .room_desc dl {
    	font-size: 0.8em;
		padding: 18px;
	}
	 
}