#direction {
	padding: 50px;
}

#header_sub {
	background-color: #d5d2c7;
	padding: 50px;
}

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

　   タイトル

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

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

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

　   ヒーロー

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

.hero_aces_inn {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)), url("../image/access/cocotto.webp");
     background-position: center;
     background-size: cover;
     height: 70vh;
}

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

　   SUMMARY

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

.summary {
	width: 90%;
    display: flex;
    justify-content: center;
    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,
.summary .l-box ul li {
    width: 100%;
	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;
}


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

　   Google maps

--------------------------------------------------------------------------------------------- */
#map iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

#direction .tbl .carpark {
	color: #6f8310;
}

#direction .tbl .carpark a {
	text-decoration: underline;
    color: #6f8310;	
}

.df_box {
	display: flex;
}


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

　   DIRECTIONS

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

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

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

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

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

　  メディアクエリ

--------------------------------------------------------------------------------------------- */
 @media only screen and ( max-width : 768px ) {
	 #header_sub, #rooms, #toiletaries, #direction, #facilities  {
        padding-bottom: 45vh;
        padding: 30px;
	}
     
	.hero_aces_inn h1 {
		font-size: 2em;
		position: relative;
		top: 35vh;
	 }
	 
	.summary {
		 display: block;
	}
	
	.summary .l-box {
		border-right: none;
		border-bottom: solid 1px #f4f4f4;
		padding-bottom: 5px;
	}
	
	.summary .l-box ul.info {
		font-size: 0.9em;
	}
	 
}

 @media only screen and ( max-width : 480px ) {
	.hero_abt_inn h1 {
		top: 40vh;
		width: 100%;
	}	
	 	 
	 .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;
	}
	 
	 #direction .tbl dl {
		display: block;
		font-size: 0.8em;
	}

	 #direction .tbl dl dd {
		min-width: 100%;
	}
	 
	 #direction .tbl dl dd:first-child {
		font-weight: bold;
	}
}

 @media only screen and ( max-width : 320px ) {
	 .summary {
		 width: 100%;
	 }
	 	 
	 	 	 
}