@charset "UTF-8";

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

	headline

-----------------------------------*/
#headline .hl_title h1 {
	width: 492px;
}
#headline .hl_image figure {
	position: relative;
}
#headline .hl_image figure img {
	width: 100%;
}
#headline .hl_image figure figcaption {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 10px;
	line-height: 1;
	color: #FFF;
	text-shadow: 1px 1px 0 #231815, -1px -1px 0 #231815,
	-1px 1px 0 #231815,  1px -1px 0 #231815,
	1px 0 0 #231815, -1px  0 0 #231815,
	0 1px 0 #231815,  0 -1px 0 #231815;
}
@media screen and (max-width: 1050px) {
	#headline .hl_title h1 {
		width: 369px;/* 75% */
	}
}
@media screen and (max-width: 640px) {
	#headline .hl_title h1 {
		width: 208px;
	}
}
/*-----------------------------------

	intro_block

-----------------------------------*/
#intro_block {
	padding: 65px 0 85px;
	text-align: center;
}
#intro_block .contents_inner {
	max-width: 980px;
}
#intro_block h2 {
	font-size: 29px;
	font-weight: 400;
	font-family: "Noto Serif JP", serif;
	line-height: 1.8;
	margin-bottom: 30px;
}
#intro_block p {
	max-width: 660px;
	width: 100%;
	margin: 0 auto 80px;
	text-align: left;
	letter-spacing: 0;
}
#intro_block figure figcaption {
	text-align: right;
	font-size: 10px;
}
@media screen and (max-width: 640px) {
	#intro_block {
		padding: 30px 0 0;
	}
	#intro_block h2 {
		font-size: 21px;
	}
	#intro_block p {
		margin: 0 auto 20px;
	}
	#intro_block figure {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
	}
	
}

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

	menu_block

-----------------------------------*/
#menu_block {
	background: #000000;
	padding: 30px 0;
}
#menu_block ul {
	display: flex;
}
#menu_block ul li {
	width: 25%;
}
@media screen and (max-width: 640px) {
	#menu_block {
		background: #FFF;
	}
	#menu_block.bottom {
		padding: 0;
	}	
	#menu_block ul {
		flex-wrap: wrap;
		gap: 10px 0;
	}
	#menu_block ul li {
		width: 50%;
	}
	
}

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

	main - common

-----------------------------------*/
.main .titleArea {
	background: #293855;
	padding: 70px 0;
}
.main .titleArea h2 {
	line-height: 0;
}
.main .contentsArea {
	padding: 80px 0 120px;
}
.main .contentsArea .copy {
	font-size: 29px;
	font-weight: 400;
	font-family: "Noto Serif JP", serif;
	line-height: 1.8;
	letter-spacing: 0;
	margin-bottom: 70px;
	text-align: center;
}
.main .contents_inner > p {
	max-width: 660px;
	width: 100%;
	margin: 0 auto 100px;
	text-align: left;
	letter-spacing: 0;
}
@media screen and (max-width: 840px) {
	.main .titleArea {
		padding: 50px 0;
	}	
}
@media screen and (max-width: 640px) {
	.main .titleArea {
		padding: 40px 0;
	}
	.main .titleArea h2 {
		margin: 0 auto;
	}
	.main .contentsArea {
		padding: 40px 0 60px;
	}
	.main .contentsArea .copy {
		font-size: 21px;
		margin-bottom: 30px;
	}
	.main .contents_inner > p {
		margin: 0 auto 50px;
	}
}

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

	future_block

-----------------------------------*/
#future_block .titleArea h2 {
	width: 385px;
}
#future_block .contents_inner {
	max-width: 840px;
}
#future_block .future_wrap01 {
	max-width: 630px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto 50px;
}
#future_block .future_wrap01 figure {
	width: 38%;
}
#future_block .future_wrap01 .text {
	width: 54%;
}
#future_block .future_wrap02 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 60px;
}
#future_block .future_wrap02 figure {
	width: 49%;
}
#future_block .future_wrap02 figure figcaption {
	font-size: 15px;
	letter-spacing: 0;
}
#future_block .future_wrap03 {
	margin-bottom: 50px;
}
#future_block .contents_inner > p {
	max-width: none;
	width: 100%;
	font-size: 10px;
	letter-spacing: 0;
	line-height: 1.4;
	margin-bottom: 0;
}
@media screen and (max-width: 840px) {
	#future_block .titleArea h2 {
		width: 289px;/* 75% */
	}
}
@media screen and (max-width: 640px) {
	#future_block .titleArea h2 {
		width: 158px;
	}
	#future_block .future_wrap01 {
		max-width: none;
		flex-direction: column;
		gap: 30px;
		margin: 0 auto 30px;
	}
	#future_block .future_wrap01 figure {
		width: 122px;
	}
	#future_block .future_wrap01 .text {
		width: 100%;
		letter-spacing: 0;
	}
	#future_block .future_wrap02 {
		flex-direction: column;
		gap: 15px;
		margin-bottom: 30px;
	}
	#future_block .future_wrap02 figure {
		width: 100%;
	}
	#future_block .future_wrap02 figure figcaption {
		font-size: 13px;
	}
	#future_block .future_wrap03 {
		margin-bottom: 30px;
	}
}
/*-----------------------------------

	access_block

-----------------------------------*/
#access_block h2 {
	width: 373px;
}
#access_block .contentsArea {
	background: #eeebe0;
}
#access_block .contentsArea .contents_inner {
	max-width: 980px;
}
#access_block .access_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 100px 55px;
}
#access_block .access_wrap figure {
	width: calc((100% - 55px) / 2);
}
#access_block .img_wrap {
	width: 100%;
	max-width: 931px;
	margin: 130px auto 0;
}
#access_block .img_wrap figure .pc {
	display: block;
}
#access_block .img_wrap figure .sp {
	display: none;
}
@media screen and (max-width: 840px) {
	#access_block h2 {
		width: 280px;/* 75% */
	}
	#access_block .access_wrap {
		gap: 80px 30px;
	}
	#access_block .access_wrap figure {
		width: calc((100% - 30px) / 2);
	}
	#access_block .img_wrap {
		margin: 100px auto 0;
	}
}
@media screen and (max-width: 640px) {
	#access_block h2 {
		width: 153px;
	}
	#access_block .copy {
		font-size: 20px;
		letter-spacing: -0.08em;
	}
	#access_block .access_wrap {
		gap: 30px;
	}
	#access_block .access_wrap figure {
		width: 100%;
	}
	#access_block .img_wrap {
		margin: 35px auto 0;
	}
	#access_block .img_wrap figure .pc {
		display: none;
	}
	#access_block .img_wrap figure .sp {
		display: block;
	}	
}

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

	culture_block

-----------------------------------*/
#culture_block h2 {
	width: 462px;
}
#culture_block > figure img {
	width: 100%;
}
#culture_block > figure figcaption {
	width: fit-content;
	margin: 0 4% 0 auto;
	font-size: 14px;
}
#culture_block .contentsArea .contents_inner {
	max-width: 1000px;
}
#culture_block .culture_wrap01 {
	margin-bottom: 90px;
}
#culture_block .culture_wrap01 figure {
	max-width: 968px;
	width: 90%;
	margin: 0 auto;
}
#culture_block .culture_wrap02 {
	display: flex;
	justify-content: space-between;
}
#culture_block .culture_wrap02 figure {
	width: 32.7%;
}
#culture_block .culture_wrap02 figure figcaption {
	font-size: 14px;
	line-height: 1.4;
}
@media screen and (max-width: 840px) {
	#culture_block h2 {
		width: 347px;/* 75% */
	}
}
@media screen and (max-width: 640px) {
	#culture_block h2 {
		width: 190px;
	}	
	#culture_block > figure figcaption {
		font-size: 10px;
	}
	#culture_block .culture_wrap01 {
		margin-bottom: 30px;
	}
	#culture_block .culture_wrap01 figure {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
	}	
	#culture_block .culture_wrap02 {
		flex-direction: column;
		gap: 15px;
	}
	#culture_block .culture_wrap02 figure {
		width: 100%;
	}
	#culture_block .culture_wrap02 figure figcaption {
		font-size: 10px;
	}
}
/*-----------------------------------

	lifestyle_block

-----------------------------------*/
#lifestyle_block h2 {
	width: 490px;
}
#lifestyle_block > figure {
	position: relative;
}
#lifestyle_block > figure img {
	width: 100%;
}
#lifestyle_block > figure figcaption {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-size: 10px;
	line-height: 1;
	color: #FFF;
	text-shadow: 1px 1px 0 #231815, -1px -1px 0 #231815,
	-1px 1px 0 #231815,  1px -1px 0 #231815,
	1px 0 0 #231815, -1px  0 0 #231815,
	0 1px 0 #231815,  0 -1px 0 #231815;
}
#lifestyle_block ul.lifestyle_point {
	max-width: 737px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 75px 50px;
}
#lifestyle_block ul.lifestyle_point li {
	width: calc((100% - 50px) / 2);
	padding-left: 115px;
	position: relative;
}
#lifestyle_block ul.lifestyle_point li .number {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 92px;
	height: 92px;
	background: #eeebe0;
	border-radius: 50%;
	color: #766d63;
	font-size: 38px;
	font-weight: 400;
	font-family: "Noto Serif JP", serif;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	padding-top: 26px;
}
#lifestyle_block ul.lifestyle_point li .number::before {
	content: "";
	width: 64px;
	height: 16px;
	background: url(../img/location/lifestyle_point.svg) no-repeat center/contain;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#lifestyle_block .lifestyle02 {
	background: #eeebe0;
	padding: 80px 0 0 0;
}
#lifestyle_block .lifestyle02 .lifestyle02_wrap {
	padding-bottom: 80px;
}
#lifestyle_block .lifestyle02 h3 {
	margin: 0 auto 40px;
	line-height: 0;
}
#lifestyle_block .lifestyle02 p {
	font-size: 21px;
	font-weight: 400;
	font-family: "Noto Serif JP", serif;
	text-align: center;
	margin-bottom: 50px;
}
#lifestyle_block .lifestyle02 .image_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 50px 10px;
}
#lifestyle_block .lifestyle02 .image_wrap figure {
	width: calc((100% - 20px) / 3);
}
#lifestyle_block .lifestyle02 .image_wrap figure img {
	margin-bottom: 5px;
}
#lifestyle_block .lifestyle02 .image_wrap figure figcaption {
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0;
}
#lifestyle_block .lifestyle02 .shopping {
	width: 333px;
}
#lifestyle_block .lifestyle02 .park {
	width: 161px;
}
#lifestyle_block .lifestyle02 .medical {
	width: 288px;
}
#lifestyle_block .lifestyle02 .education {
	width: 383px;
}
#lifestyle_block .lifestyle03 h3 {
	max-width: 623px;
	width: 100%;
	line-height: 0;
	margin: 0 auto 90px;
}
#lifestyle_block .lifestyle03 .lifestyle03_wrap {
	display: flex;
	justify-content: space-between;
}
#lifestyle_block .lifestyle03 .lifestyle03_wrap .map {
	width: calc(100% - 423px);
}
#lifestyle_block .lifestyle03 .lifestyle03_wrap .info_text {
	width: 378px;
	height: 652px;
	overflow-y: scroll;
	padding: 0 20px 0 0;
}
.info_text::-webkit-scrollbar {
    width: 7px;
}
.info_text::-webkit-scrollbar-thumb {
    background-color: #747374;
} 
.info_text::-webkit-scrollbar-track {
    background-color: #cdcece;
}
#lifestyle_block .lifestyle03 .info_text h4 {
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	padding-bottom: 10px;
	border-bottom: 1px solid #231815;
	margin-bottom: 15px;
}
#lifestyle_block .lifestyle03 .info_text dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	margin-bottom: 30px;
}
#lifestyle_block .lifestyle03 .info_text dl dt {
	width: calc(100% - 120px);
}
#lifestyle_block .lifestyle03 .info_text dl dd {
	width: 120px;
}

@media screen and (max-width: 1170px) {
	#lifestyle_block .lifestyle03 .lifestyle03_wrap .info_text {
		height: 55.55vw;
	}	
}
@media screen and (max-width: 840px) {
	#lifestyle_block h2 {
		width: 368px;/* 75% */
	}	
	#lifestyle_block ul.lifestyle_point {
		max-width: 640px;
		gap: 50px 30px;
	}
	#lifestyle_block ul.lifestyle_point li {
		width: calc((100% - 30px) / 2);
		padding-left: 75px;
	}
	#lifestyle_block ul.lifestyle_point li .number {
		width: 61px;
		height: 61px;
		font-size: 26px;
		padding-top: 18px;
	}
	#lifestyle_block ul.lifestyle_point li .number::before {
		width: 42px;
		height: 11px;
	}
	#lifestyle_block .lifestyle02 .image_wrap figure {
		width: calc((100% - 10px) / 2);
	}
	#lifestyle_block .lifestyle03 h3 {
		margin: 0 auto 20px;
	}
	#lifestyle_block .lifestyle03 .lifestyle03_wrap {
		flex-direction: column;
		align-items: center;
		gap: 50px;
	}
	#lifestyle_block .lifestyle03 .lifestyle03_wrap .map {
		width: 100%;
	}
	#lifestyle_block .lifestyle03 .lifestyle03_wrap .info_text {
		width: 90%;
		height: auto;
		overflow-y: auto;
		padding: 0;
	}
	#lifestyle_block .lifestyle03 .info_text h4 {
		font-weight: 700;
		padding: 20px 0;
		border-bottom: none;
		background: #163259;
		color: #FFF;
		text-align: center;
		position: relative;
	}
	#lifestyle_block .lifestyle03 .info_text h4::before {
		content: "";
		width: 10px;
		height: 10px;
		background: url(../img/location/sp/lifestyle_arrow.svg) no-repeat center/contain;
		position: absolute;
		top: 22px;
		right: 20px;
		transition: 0.5s;
	}
	#lifestyle_block .lifestyle03 .info_text h4.active::before {
		transform: rotate(-180deg);
	}
	#lifestyle_block .lifestyle03 .lifestyle03_wrap .info_text .text_wrap {
		display: none;
	}
}
@media screen and (max-width: 640px) {
	#lifestyle_block h2 {
		width: 201px;
	}
	#lifestyle_block > figure img {
		margin-bottom: 5px;
	}
	#lifestyle_block > figure figcaption {
		position: static;
		color: #000;
		text-shadow: none;
		text-align: right;
	}	
	#lifestyle_block ul.lifestyle_point {
		max-width: 380px;
		gap: 20px;
	}
	#lifestyle_block ul.lifestyle_point li {
		width: calc((100% - 20px) / 2);
		padding-left: 50px;
	}
	#lifestyle_block ul.lifestyle_point li .number {
		width: 40px;
		height: 40px;
		font-size: 16px;
		padding-top: 13px;
	}
	#lifestyle_block ul.lifestyle_point li .number::before {
		width: 28px;
		height: 7px;
	}
	#lifestyle_block .lifestyle02 {
		padding: 40px 0 0 0;
	}
	#lifestyle_block .lifestyle02 .lifestyle02_wrap {
		padding-bottom: 40px;
	}
	#lifestyle_block .lifestyle02 h3 {
		margin: 0 auto 15px;
	}
	#lifestyle_block .lifestyle02 p {
		font-size: 15px;
		margin-bottom: 20px;
	}	
	#lifestyle_block .lifestyle02 .image_wrap {
		gap: 25px;
	}
	#lifestyle_block .lifestyle02 .image_wrap figure {
		width: 100%;
	}
	#lifestyle_block .lifestyle02 .image_wrap figure figcaption {
		font-size: 11px;
	}
	#lifestyle_block .lifestyle02 .shopping {
		width: 190px;
	}
	#lifestyle_block .lifestyle02 .park {
		width: 92px;
	}
	#lifestyle_block .lifestyle02 .medical {
		width: 164px;
	}
	#lifestyle_block .lifestyle02 .education {
		width: 218px;
	}
	#lifestyle_block .lifestyle03 h3 {
		max-width:  288px;
	}	
	#lifestyle_block .lifestyle03 .lifestyle03_wrap {
		gap: 30px;
	}
	#lifestyle_block .lifestyle03 .info_text h4 {
		font-size: 13px;
	}
	#lifestyle_block .lifestyle03 .info_text h4::before {
		width: 8px;
		height: 8px;
		top: 23px;
	}
	#lifestyle_block .lifestyle03 .info_text dl {
		font-size: 10px;
	}
	#lifestyle_block .lifestyle03 .info_text dl dt {
		width: calc(100% - 100px);
	}
	#lifestyle_block .lifestyle03 .info_text dl dd {
		width: 100px;
	}
}
/*-----------------------------------

	bottom_text

-----------------------------------*/
#bottom_text {
	padding: 20px 0 40px;
}
#bottom_text p {
	font-size: 10px;
	line-height: 1.4;
}