#rooms, #toiletaries, #others {
	padding: 50px;
}

#off_type, #eo_fllow, .sign {
	background-color: #d5d2c7;
	padding: 50px;
}

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

　   タイトル

--------------------------------------------------------------------------------------------- */
#rooms h2, #brekkie h2, #toiletaries 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_work_logo {
	max-width: 500px;
    margin: 0 auto;
    position: relative;
    top: 16vh;
}

.hero_work {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.1)), url("../image/easy_work/easy_work_hero.webp");
}

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

　   EASY WORK

--------------------------------------------------------------------------------------------- */
#about_eo, #off_type, #conference {
	padding: 50px;
}

.eo_desc {
	width: 90%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.eo_desc .l-box {
	padding-right: 10px;
	border-right: solid 1px #6e8310;
	flex: 1;
}

.eo_desc .r-box {
	flex: 1;
}

.eo_desc .l-box img {
    width: 100%;	
	max-width: 500px;
}

#about_eo .tbl dl {
    display: flex;
    font-family: inherit;
    margin: 15px 0;
}

#about_eo .tbl dl dd {
    min-width: 100px;
}

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

　   OFFICE TYPE

--------------------------------------------------------------------------------------------- */
/*#off_reserve, #off_contact, #eo_fllow, #eo_fllow .contact {
	width: 100%;
} */

#off_reserve .reserve,
#off_contact .reserve,
#eo_fllow .contact {
	text-align: center;
    padding: 50px 0;
}

#off_reserve .reserve a,
#off_contact .reserve a {
	font-size: 1.2em;
	color: #fff;
	padding: 30px 40px;
	background-color: #6f8310;
}

.df_box {
	display: flex;
}

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

.off_desc dl {
	color: #f4f4f4;
}

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

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

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

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

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

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

.room_slides ul li.a_office5 {
	background-image: url("../image/easy_work/off_1.jpg");
	background-size: contain;
	background-position: center;
	margin: 0 auto;
	min-height: 500px;
}

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

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

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

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

.room_slides ul li.b_office5 {
	background-image: url("../image/easy_work/off_2.jpg");
	background-size: contain;
	background-position: center;
	margin: 0 auto;
	min-height: 500px;
}

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

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

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

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

.room_slides ul li.c_office5 {
	background-image: url("../image/easy_work/off_3.jpg");
	background-size: contain;
	background-position: center;
	margin: 0 auto;
	min-height: 500px;
}


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

　   CONFERENCE ROOMS

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

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

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

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

.room_slides ul li.a_confe5 {
	background-image: url("../image/easy_work/conference1.jpg");
	background-size: contain;
	background-position: center;
	margin: 0 auto;
	min-height: 500px;
}

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

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

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

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

.room_slides ul li.b_confe5 {
	background-image: url("../image/easy_work/conference2.jpg");
	background-size: contain;
	background-position: center;
	margin: 0 auto;
	min-height: 500px;
}

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

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

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

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

.room_slides ul li.c_confe5 {
	background-image: url("../image/easy_work/conference3.jpg");
	background-size: contain;
	background-position: center;
	margin: 0 auto;
	min-height: 500px;
}

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

　   FLLOW

--------------------------------------------------------------------------------------------- */
#eo_fllow h3 {
	font-family: a-otf-ryumin-pr6n, serif;
    font-weight: bold;
    background:linear-gradient(transparent 60%, #f4f4f4 0%);
    margin: 20px 0;
}

#eo_fllow h4 {
	font-family: pennsylvania, monospace;
	font-size: 2em;
    border-bottom: solid 1px #6f8310;
    margin: 20px 0;
}

#eo_fllow .df_box {
    display: flex;
    justify-content: center;
    max-width: 90%;
    margin: 0 auto;
}

#eo_fllow .df_box .steps {
	flex: 1;
    margin: 20px;
    text-align: center;
}
#eo_fllow .step_box {
	border-bottom: solid 1px #f4f4f4;
	padding-bottom: 20px;
}

#eo_fllow .step_box-last {
	border-bottom: none;
}

#eo_fllow .step_box .r-box,
#eo_fllow .step_box-last .r-box {
	flex: 3;
}

#eo_fllow .df_box .allow::after {
    content: '▶︎';
    color: #6f8310;
    font-size: 3em;
    position: relative;
    top: 3vh;
    text-align: center;
}

#eo_fllow .df_box .steps p {
	font-size: 0.9em;
}

#eo_fllow .step_box .r-box .img_box,
#eo_fllow .step_box-last .r-box .img_box {
	max-width: 100%;
}

#eo_fllow .step_box .r-box .img_box img,
#eo_fllow .step_box-last .r-box .img_box img {
	max-width: 100%;
}

#eo_fllow .r-box .reserve {
	text-align: center;
	padding-top: 30px;
}

#eo_fllow .r-box .reserve a {
	font-size: 1em;
	color: #fff;
	padding: 20px 30px;
	background-color: #6f8310;
}

#eo_fllow .r-box .step_icon {
	font-size: 6em;
    text-align: center;
    color: #f4f4f4;
}

#eo_fllow .r-box .step_2-5 {
	flex: 30%;
	margin: 15px;
}

#eo_fllow .r-box .step_2-5 p {
	font-size: 0.9em;
	margin-top: 30px;
}

#eo_fllow .r-box .step_2-5 dl dt {
	font-family: a-otf-ryumin-pr6n, serif;
	font-size: 3em;
	text-align: center;
}

#eo_fllow .r-box .step_2-5 dl dd {
	font-size: 0.9em;
	text-align: center;
}

#eo_fllow .contact a {
	font-size: 1.2em;
	color: #fff;
	padding: 30px 40px;
	background-color: #6f8310;
}

#eo_fllow .contact .reserve {
	text-align: center;
    margin-top: 50px;
    padding-bottom: 50px;
    border-bottom: solid 1px #f4f4f4;
}


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

　  メディアクエリ

--------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1440px){
    	.hero_work_logo {
		max-width: 400px;
		top: 10vh;
	}

}

 @media only screen and ( max-width : 768px ) {
	.eo_desc {
		width: 100%;
		display: block;
	}

	 .eo_desc .l-box {
		padding-right: 0;
		border-right: none;
		text-align: center;
		margin-bottom: 40px;
	}
	 	 
	 #eo_fllow .df_box {
		display: block;
	}
	 
	 #eo_fllow h3 {
		 margin: 0;
	 }
	 
	 #eo_fllow .df_box .steps {
		margin: 0 20px;
	}
	 
	 #eo_fllow .df_box .allow::after {
		content: '▼';
		position: initial;
		top: 0;
		text-align: center;
	}
	 
	 #eo_fllow .allow {
		 text-align: center;
	 }
	 
	 #eo_fllow .r-box .step_2-5 dl dt {
		 font-size: 2.5em;
	 }
	 
	.df_box {
    display: block;
	} 
	
	 .off_desc {
		 min-width: 90%;
		 float: none;
	 }
	 
	 #off_type .df_box .r-box, #conference .df_box .r-box {
		margin-bottom: 10vh;
		height: 50vh;
		margin-left: 10px;
	}
	 
	 #off_type .df_box .l-box, #conference .df_box .l-box {
		margin: 10px;
	}
	 
	 .off_desc dl dt, .off_desc dl dd {
		font-size: 0.9em; 
	 }
	 
	 off_type, #eo_fllow {
		padding: 50px 20px;
	}
	 
	 .sign {
		padding: 0 50px;
	}
}

 @media only screen and ( max-width : 480px ) {
	 #about_eo .eo_desc .r-box p {
		 font-size: 0.9em;
	 }	 
	 
	 #about_eo .eo_desc .r-box .tbl dl dd {
		 font-size: 0.9em;
	 }	 
	 
	 #about_eo, #off_type, .sign, #conference {
		padding: 50px 20px;
	}

	 #off_type .df_box .l-box, #conference .df_box .l-box {
		margin: 0;
	}
	 
	 #eo_fllow {
		padding: 50px 20px 0 20px;
	}
	 
	 .off_desc {
		min-width: 80%;
		padding: 20px;
	}
	 
    .hero_work {
		height: 50vh;
	}

    .hero_work_logo {
		max-width: 200px;
		top: 13vh;
	}

	 .room_slides ul li.a_office1,
	 .room_slides ul li.a_office2,
	 .room_slides ul li.a_office3,
	 .room_slides ul li.a_office4,
	 .room_slides ul li.a_office5,
	 .room_slides ul li.b_office1,
	 .room_slides ul li.b_office2,
	 .room_slides ul li.b_office2,
	 .room_slides ul li.b_office3,
	 .room_slides ul li.b_office4,
	 .room_slides ul li.b_office5,
	 .room_slides ul li.c_office1,
	 .room_slides ul li.c_office2,
	 .room_slides ul li.c_office3,
	 .room_slides ul li.c_office4,
	 .room_slides ul li.c_office5,
	 .room_slides ul li.a_confe1,
	 .room_slides ul li.a_confe2,
	 .room_slides ul li.a_confe3,
	 .room_slides ul li.a_confe4,
	 .room_slides ul li.a_confe5,
	 .room_slides ul li.b_confe1,
	 .room_slides ul li.b_confe2,
	 .room_slides ul li.b_confe3,
	 .room_slides ul li.b_confe4,
	 .room_slides ul li.b_confe5,
	 .room_slides ul li.c_confe1,
	 .room_slides ul li.c_confe2,
	 .room_slides ul li.c_confe3,
	 .room_slides ul li.c_confe4,
	 .room_slides ul li.c_confe5 {
		min-height: 250px;
	}

	#off_type .df_box .r-box {
		height: 34vh;
		padding-bottom: 50px;
		border-bottom: solid 1px #f4f4f4;
		margin: 10px 0;
	}
	
	#conference .df_box .r-box {
		height: 34vh;
		padding-bottom: 50px;
		border-bottom: solid 1px #ddd;
		margin: 10px 0;
	}
	
	#off_reserve .reserve a, #off_contact .reserve a, #eo_fllow .contact a {
		font-size: 0.9em;
    	padding: 20px;
	}
	 
	 #eo_fllow .df {
		 display: block;
	 }
	 
	 #eo_fllow .r-box .step_2-5 dl dt {
		font-size: 2em;
	}
	 
	  #eo_fllow .contact {
		 padding: 0;
	 }

}


 @media only screen and ( max-width : 320px ) {
	 #off_type .df_box .r-box,
	 #conference .df_box .r-box {
		height: 40vh;
	}
	 
	 #eo_fllow .r-box .step_2-5 {
		margin: 10px;
	}
}