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

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

　   タイトル

--------------------------------------------------------------------------------------------- */
#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_faq_inn h1 {
    font-size: 3em;
    font-family: pennsylvania, monospace;
    color: #f4f4f4;
    background: #6f8310;
    width: 300px;
    text-align: center;
    position: relative;
    top: 60vh;	
}

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

　   ヒーロー

--------------------------------------------------------------------------------------------- */
 .hero_faq_inn {
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)), url("../image/faq/faq_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 {
	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;
}

.summary .r-box ul li {
    max-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;
}


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

　   faq

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

#faq h3 {
    font-family: a-otf-ryumin-pr6n, serif;
    font-weight: bold;
    border-bottom: solid 2px #6f8310;
    margin: 20px 0;
}

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

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

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

#faq .tbl dl dd.question {
	cursor: pointer;
}

#faq .tbl dl dd.question:hover {
	opacity: 0.5;
}

#faq .tbl dl dd.answer {
	display: none;
	color: #6e8310;
}

#faq .tbl dl dd.question::before {
	content: 'Q.';
	font-size: 2em;
	font-family: pennsylvania, monospace;
}

#faq .tbl dl dd.answer::before {
	content: 'A.';
	font-size: 2em;
	font-family: pennsylvania, monospace;
	color: #6f8310;
}

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

　  メディアクエリ

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

 @media only screen and ( max-width : 768px ) {
	#hero_abt {
    		height: 45vh;
	}
	 
	.hero_abt_inn {
		height: 45vh;
	}
	
	.hero_abt_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 .r-box ul {
		justify-content: left;
	}
	 
}

 @media only screen and ( max-width : 480px ) {
	 .hero_faq_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;
	}
	 
	 .summary .r-box ul li::before {
		content: '▷';
		margin-right: 0.6em;
	}
	 
	 #faq .tbl dd {
		 font-size: 0.8em;
	 }
	 
}


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

	 #header_sub {
		 padding: 30px;
	 }
	 	 	 
}
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 