@charset "utf-8";

/* ----------------------------------------------------------------------------
	ロケーション
	location/
---------------------------------------------------------------------------- */
/* title image*/
#content #h_ttl_area{
	background: url( "../../location/img/title_img.jpg") bottom center/cover no-repeat;
}

#content h2{
	width: 100%;
	text-align: left;
	font-size: 1.812rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	padding: 0 0 1.5em 0;
}
#content h2.ttl{
	font-size: 1.625rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	padding: 0 0 1.0em 0;
	margin: 0 0 1.5em 0;
	position: relative;
}
#content h2.ttl::before{
	content: "";
	width: 60px;
	height: 3px;
	background: #B9B9B9;
	position: absolute;
	bottom: 0;
	left: 0;
}

#content .bg{
	width: 100%;
	position: relative;
	background: #efefef;
	padding: 120px 0;
}

#content #map{
	position: relative;
	padding: 0 0 0 0;
}

#content #place{
	width: 100%;
	position: relative;
	padding: 120px 0 0 0;
}
#content #place .unit{
	width: 100%;
	position: relative;
	padding: 0 0 50px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
}
#content #place .unit figure{
	width: 50%;
	position: relative;
}
#content #place .unit .txt_area{
	width: 50%;
	position: relative;
	padding: 30px 0 0 30px;
	box-sizing: border-box;
	border-top: #B1965B 1px solid;
}
#content #place .unit .txt_area h3{
	width: 100%;
	text-align: left;
	font-size: 1.250rem;
	line-height: 1.8;
	letter-spacing: 0.02em;
	padding: 0 0 1.0em 0;
}
@media only screen and (max-width: 999px) {	
	#content h2{
		font-size: 1.687rem;
	}
	#content h2.ttl{
		font-size: 1.500rem;
	}
	#content h2.ttl::before{
		content: "";
		width: 50px;
	}

	#content .bg{
		padding: 120px 0;
	}

	#content #place{
		padding: 120px 0 0 0;
	}
	#content #place .unit{
		padding: 0 0 50px 0;
	}
	#content #place .unit figure{
		width: 50%;
	}
	#content #place .unit .txt_area{
		width: 50%;
		padding: 30px 0 0 30px;
	}
	#content #place .unit .txt_area h3{
		font-size: 1.125rem;
	}
}
@media only screen and (max-width: 768px) {
	#content h2{
		font-size: 1.5rem;
		text-align: center;
	}
	#content h2.ttl{
		font-size: 1.375rem;
		text-align: left;
	}
	#content h2.ttl::before{
		content: "";
		width: 40px;
	}

	#content .bg{
		padding: 90px 0;
	}

	#content #place{
		padding: 90px 0 0 0;
	}
	#content #place .unit{
		padding: 0 0 40px 0;
	}
	#content #place .unit figure{
		width: 100%;
	}
	#content #place .unit .txt_area{
		width: 100%;
		padding: 20px 0 0 0;
	}
	#content #place .unit .txt_area h3{
		font-size: 1.000rem;
	}
}
@media only screen and (max-width: 480px) {
	#content h2{
		font-size: 1.475rem;
	}
	#content h2.ttl{
		font-size: 1.250rem;
	}
	#content h2.ttl::before{
		content: "";
		width: 40px;
	}

	#content .bg{
		padding: 60px 0;
	}

	#content #place{
		padding: 60px 0 0 0;
	}
	#content #place .unit{
		padding: 0 0 30px 0;
	}
	#content #place .unit figure{
		width: 100%;
	}
	#content #place .unit .txt_area{
		width: 100%;
		padding: 20px 0 0 0;
	}
	#content #place .unit .txt_area h3{
		font-size: 0.938rem;
	}
}


#content #ph_area{
	width: 100%;
	position: relative;
	padding: 120px 0 0 0;
}
#content #ph_area ul.ph{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#content #ph_area ul.ph li{
	width: calc((100% / 4) - 15px);
	position: relative;
	margin: 0 20px 30px 0;
}
#content #ph_area ul.ph li:nth-child(4n + 4){
	margin: 0 0 30px 0;
}
#content #ph_area ul.ph li figure{
	margin: 0 0 0 0;
}
#content #ph_area ul.ph li h4{
	font-size: 1.000rem;
	text-align: left;
	line-height: 1.4;
	padding: 0.9em 0 0.9em 0;
}
#content #ph_area ul.ph li p{
	font-size: 0.875rem;
	text-align: left;
	line-height: 1.6;
}
@media only screen and (max-width: 999px) {	
	#content #ph_area{
		padding: 120px 0 0 0;
	}
	#content #ph_area ul.ph{
	}
	#content #ph_area ul.ph li{
		width: calc((100% / 4) - 15px);
		margin: 0 20px 30px 0;
	}
	#content #ph_area ul.ph li:nth-child(4n + 4){
		margin: 0 0 30px 0;
	}
	#content #ph_area ul.ph li h4{
		font-size: 0.938rem;
	}
	#content #ph_area ul.ph li p{
		font-size: 0.813rem;
	}
}
@media only screen and (max-width: 768px) {
	#content #ph_area{
		padding: 90px 0 0 0;
	}
	#content #ph_area ul.ph{
	}
	#content #ph_area ul.ph li{
		width: calc((100% / 3) - 15px);
		margin: 0 20px 30px 0;
	}
	#content #ph_area ul.ph li:nth-child(4n + 4){
		margin: 0 20px 30px 0;
	}
	#content #ph_area ul.ph li:nth-child(3n + 3){
		margin: 0 0 30px 0;
	}
	#content #ph_area ul.ph li h4{
		font-size: 0.875rem;
	}
	#content #ph_area ul.ph li p{
		font-size: 0.750rem;
	}
	
}
@media only screen and (max-width: 480px) {
	#content #ph_area{
		padding: 60px 0 0 0;
	}
	#content #ph_area ul.ph{
		justify-content: space-between
	}
	#content #ph_area ul.ph li{
		width: calc((100% / 2) - 10px);
		margin: 0 0 25px 0;
	}
	#content #ph_area ul.ph li:nth-child(4n + 4){
		margin: 0 0 25px 0;
	}
	#content #ph_area ul.ph li:nth-child(3n + 3){
		margin: 0 0 25px 0;
	}
}


#content #lifeinformation{
	position: relative;
	padding: 120px 0 90px 0;
}
#content #lifeinformation .unit{
	width: 100%;
	position: relative;
	padding: 0 0 60px 0;
}
#content #lifeinformation .unit h3{
	width: 100%;
	text-align: left;
	font-size: 1.250rem;
	line-height: 1.8;
	letter-spacing: 0.02em;
	color: #B1965B;
	padding: 0 0 0.3em 0;
	margin: 0 0 1.5em 0;
	border-bottom: #B1965B 1px solid;
}
#content #lifeinformation .unit dl{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#content #lifeinformation .unit dl dt{
	width: 60%;
	text-align: left;
	font-size: 0.875rem;
	line-height: 1.4;
	padding: 0.8em 0;
	border-bottom: #efefef 1px solid;
}
#content #lifeinformation .unit dl dd{
	width: 40%;
	font-size: 0.875rem;
	line-height: 1.4;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.8em 0;
	border-bottom: #efefef 1px solid;
}
#content #lifeinformation .unit dl dd .building{
	width: 50%;
	padding: 0 0 0 0;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
}
#content #lifeinformation .unit dl dd .building i{
	width: auto;
	font-size: 0.75rem;
	color: #FFF;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.3em 1em;
	background: #2e627f;
}
#content #lifeinformation .unit dl dd .building:nth-child(2) i{
	background: #527349;
}
#content #lifeinformation .unit dl dd .building p{
	font-size: 0.875rem;
	line-height: 1.4;
	padding: 0 0 0 0.8em;
}
@media only screen and (max-width: 999px) {	
	#content #lifeinformation{
		padding: 120px 0 90px 0;
	}
	#content #lifeinformation .unit{
		padding: 0 0 60px 0;
	}
	#content #lifeinformation .unit h3{
		font-size: 1.125rem;
	}

	#content #lifeinformation .unit dl dt{
		width: calc(100% - 200px);
		text-align: left;
		font-size: 0.875rem;
		padding: 0.8em 0;
		border-bottom: #efefef 1px solid;
	}
	#content #lifeinformation .unit dl dd{
		width: 200px;
		font-size: 0.875rem;
		padding: 0.8em 0;
		border-bottom: #efefef 1px solid;
	}
	#content #lifeinformation .unit dl dd .building{
		width: 100%;
		padding: 0 0 15px 0;
	}
	#content #lifeinformation .unit dl dd .building i{
		font-size: 0.75rem;
	}
	#content #lifeinformation .unit dl dd .building p{
		font-size: 0.875rem;
	}
}
@media only screen and (max-width: 768px) {
	#content #lifeinformation{
		padding: 90px 0 60px 0;
	}
	#content #lifeinformation .unit{
		padding: 0 0 40px 0;
	}
	#content #lifeinformation .unit h3{
		font-size: 1.125rem;
	}

	#content #lifeinformation .unit dl dt{
		width: 100%;
		font-size: 0.813rem;
		padding: 1em 0 0 0;
		border-bottom: none;
	}
	#content #lifeinformation .unit dl dd{
		width: 100%;
		font-size: 0.813rem;
		padding: 0.4em 0 1em 0;
		border-bottom: #efefef 1px solid;
		justify-content: flex-start;
	}
	#content #lifeinformation .unit dl dd .building{
		width: auto;
		padding: 0 10px 10px 0;
		justify-content: flex-start;
	}
	#content #lifeinformation .unit dl dd .building i{
		font-size: 0.688rem;
	}
	#content #lifeinformation .unit dl dd .building p{
		font-size: 0.813rem;
	}
}
@media only screen and (max-width: 480px) {
	#content #lifeinformation{
		padding: 60px 0 40px 0;
	}
	#content #lifeinformation .unit{
		padding: 0 0 30px 0;
	}
	#content #lifeinformation .unit h3{
		font-size: 1.000rem;
	}

	#content #lifeinformation .unit dl dt{
		width: 100%;
		font-size: 0.813rem;
	}
	#content #lifeinformation .unit dl dd{
		width: 100%;
		font-size: 0.813rem;
		border-bottom: #efefef 1px solid;
	}
	#content #lifeinformation .unit dl dd .building{
		padding: 0 10px 10px 0;
	}
	#content #lifeinformation .unit dl dd .building i{
		font-size: 0.625rem;
	}
	#content #lifeinformation .unit dl dd .building p{
		font-size: 0.750rem;
	}
}


#content #access{
	position: relative;
}
#content #access .access_time{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 0 30px 0;
}
#content #access .access_time .tenjin{
	width: 42.8%;
	margin: 0 30px 0 0;
}
#content #access .access_time .hakata{
	width: 42.4%;
}

#content #access .access_teriha{
	width: 100%;
	padding: 43px 58px;
	margin: 0 0 30px 0;
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	background: #93785e;
}

#content #access .access_map{
	width: 100%;
	padding: 90px 0 0 0;
	box-sizing: border-box;
	position: relative;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}

#content #access .access_map h3{
	width: 100%;
	text-align: left;
	font-size: 1.250rem;
	line-height: 1.8;
	letter-spacing: 0.02em;
	padding: 0 0 0.3em 0;
	margin: 0 0 1.5em 0;
	border-bottom: #B1965B 1px solid;
}
#content #access .access_map figure{
	width: 100%;
	padding: 0 0 30px 0;
}


@media only screen and (max-width: 999px) {	
	#content #access{
	}
	#content #access .access_time{
		padding: 0 0 30px 0;
	}
	#content #access .access_time .tenjin{
		width: 42.8%;
		margin: 0 3% 0 0;
	}
	#content #access .access_time .hakata{
		width: 42.4%;
	}

	#content #access .access_teriha{
		padding: 33px 48px;
		margin: 0 0 30px 0;
	}

	#content #access .access_map{
		padding: 90px 0 0 0;
	}

	#content #access .access_map h3{
		font-size: 1.125rem;
	}
	#content #access .access_map figure{
		padding: 0 0 30px 0;
	}
}
@media only screen and (max-width: 768px) {
	#content #access{
	}
	#content #access .access_time{
		padding: 0 0 20px 0;
	}
	#content #access .access_time .tenjin{
		width: calc(42.8% * 1.5);
		margin: 0 0 15px 0;
	}
	#content #access .access_time .hakata{
		width: calc(42.4% * 1.5);
	}

	#content #access .access_teriha{
		padding: 25px 35px;
		margin: 0 0 20px 0;
	}

	#content #access .access_map{
		padding: 70px 0 0 0;
	}

	#content #access .access_map h3{
		font-size: 1.000rem;
	}
	#content #access .access_map figure{
		padding: 0 0 20px 0;
	}
}
@media only screen and (max-width: 480px) {
	#content #access{
	}
	#content #access .access_time{
		padding: 0 0 20px 0;
	}
	#content #access .access_time .tenjin{
		width: calc(42.8% * 1.5);
		margin: 0 0 15px 0;
	}
	#content #access .access_time .hakata{
		width: calc(42.4% * 1.5);
	}

	#content #access .access_teriha{
		padding: 15px 15px;
		margin: 0 0 20px 0;
	}

	#content #access .access_map{
		padding: 50px 0 0 0;
	}

	#content #access .access_map h3{
		font-size: 1.000rem;
	}
	#content #access .access_map figure{
		padding: 0 0 20px 0;
	}
}



/* ----------------------------------------------------------------------------
	アクティブ＆リゾート
	location/active_resort.html
---------------------------------------------------------------------------- */
/* title image*/
#content #h_ttl_area.a_r{
	background: url( "../../location/img/title_img2.jpg") bottom center/cover no-repeat;
}


#content #island_map_area{
	width: 100%;
	background: #a0cbed;
	position: relative;
}
#content #island_map_area .in-box{
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -500px;
	padding: 60px 0 0 0;
}
#content #island_map_area figure{
	line-height: 0;
}
@media only screen and (max-width: 1250px) {	
	#content #island_map_area{
	}
	#content #island_map_area .in-box{
		width: 700px;
		margin: 0 0 0 -500px;
		padding: 50px 0 0 0;
	}
	#content #island_map_area figure{
		padding: 100px 0 0 0;
	}
}
@media only screen and (max-width: 999px) {	
	#content #island_map_area{
	}
	#content #island_map_area .in-box{
		width: 94%;
		margin: 0 0 0 -47%;
		padding: 50px 0 0 0;
	}
	#content #island_map_area figure{
		padding: 250px 0 0 0;
	}
}
@media only screen and (max-width: 768px) {
	#content #island_map_area{
	}
	#content #island_map_area .in-box{
		position: relative;
		margin: 0 auto 0 auto;
		top: auto;
		left: auto;
		padding: 40px 0 40px 0;
	}
	#content #island_map_area figure{
		padding: 0 0 0 0;
	}
}
@media only screen and (max-width: 480px) {
	
}


#content #map_ph{
	position: relative;
	padding: 120px 0 0 0;
}
#content #map_ph ul.ph{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#content #map_ph ul.ph li{
	width: calc((100% / 4) - 4px);
	position: relative;
	margin: 0 5px 30px 0;
}
#content #map_ph ul.ph li:nth-child(4n + 4){
	margin: 0 0 30px 0;
}
#content #map_ph ul.ph li figure{
	margin: 0 0 0 0;
}
#content #map_ph ul.ph li h4{
	font-size: 1.000rem;
	text-align: left;
	line-height: 1.4;
	padding: 0.9em 0 0.9em 0;
}
#content #map_ph ul.ph li p{
	font-size: 0.875rem;
	text-align: left;
	line-height: 1.6;
}
@media only screen and (max-width: 999px) {	
	#content #map_ph{
		padding: 120px 0 0 0;
	}
	#content #map_ph ul.ph{
	}
	#content #map_ph ul.ph li{
		width: calc((100% / 4) - 4px);
		margin: 0 5px 30px 0;
	}
	#content #map_ph ul.ph li:nth-child(4n + 4){
		margin: 0 0 30px 0;
	}
	#content #map_ph ul.ph li h4{
		font-size: 0.938rem;
	}
	#content #map_ph ul.ph li p{
		font-size: 0.813rem;
	}
}
@media only screen and (max-width: 768px) {
	#content #map_ph{
		padding: 90px 0 0 0;
	}
	#content #map_ph ul.ph{
	}
	#content #map_ph ul.ph li{
		width: calc((100% / 3) - 4px);
		margin: 0 5px 30px 0;
	}
	#content #map_ph ul.ph li:nth-child(4n + 4){
		margin: 0 5px 30px 0;
	}
	#content #map_ph ul.ph li:nth-child(3n + 3){
		margin: 0 0 30px 0;
	}
	#content #map_ph ul.ph li h4{
		font-size: 0.875rem;
	}
	#content #map_ph ul.ph li p{
		font-size: 0.750rem;
	}
	
}
@media only screen and (max-width: 480px) {
	#content #map_ph{
		padding: 60px 0 0 0;
	}
	#content #map_ph ul.ph{
		justify-content: space-between
	}
	#content #map_ph ul.ph li{
		width: calc((100% / 2) - 4px);
		margin: 0 0 25px 0;
	}
	#content #map_ph ul.ph li:nth-child(4n + 4){
		margin: 0 0 25px 0;
	}
	#content #map_ph ul.ph li:nth-child(3n + 3){
		margin: 0 0 25px 0;
	}
}