@charset "UTF-8";

/*-----------------
num03
------------------*/
@media only screen and (max-width: 768px) {
	.num03 .image--kouteisa img {
		width: 170%;
		max-width: 170%;
	}
}

/*-----------------
num05
------------------*/
.num05 {}
/* lifeinfoBox */
.lifeinfoBox {
	color: #fff;
	margin-top: 50px;
}
/* lifeinfoBox--nav */
.lifeinfoBox .lifeinfoBox--nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.lifeinfoBox .lifeinfoBox--nav .lifeinfoBox--nav__btn {
	width: 16.666666666670455%;
	outline: none;
	background: none;
	border:none;
	padding-bottom: 20px;
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.1em;
	font-family: "Noto Serif Japanese";
	text-align: center;
	position: relative;
	cursor: pointer;
}
.lifeinfoBox .lifeinfoBox--nav .lifeinfoBox--nav__btn:before {
	content: '';
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: 0;
	transition: .6s;
}
.lifeinfoBox .lifeinfoBox--nav .lifeinfoBox--nav__btn:hover:before,
.lifeinfoBox .lifeinfoBox--nav .lifeinfoBox--nav__btn.is-active:before {
	background: #fff;
}

/* lifeinfoBox--contents */
.lifeinfoBox .lifeinfoBox--contents {
	font-size: 12px;
	color:#cccccc;
	margin-top: 50px;
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel {
	line-height: 1;
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: left;
	position: relative;
	background: url(../imgs/line.png) repeat-x center;
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl:nth-child(n+2) {
	margin-top: 16px;
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dt {
	padding-right: 0.5em;
	line-height: 1.2;
	background: #222;
	position: relative;
	z-index: 2;
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dd {
	padding-left: 1em;
	background: #222;
	position: relative;
	z-index: 2;
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dd .meter {
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dd .meter:before {
	content: '約';
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dd .meter:after {
	content: 'm';
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dd .time {
	margin-left: -0.5em;
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dd .time:before {
	content: '／徒歩';
}
.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dd .time:after {
	content: '分';
}
@media only screen and (max-width: 768px) {
	.lifeinfoBox .lifeinfoBox--nav {
		display: none;
	}
	.lifeinfoBox .lifeinfoBox--nav .slick-track {
	}
	.lifeinfoBox .lifeinfoBox--nav .slick-slide{
		font-size: 12px;
	}
	.lifeinfoBox .lifeinfoBox--nav .slick-slide.slick-current {
	}
	.lifeinfoBox .lifeinfoBox--nav .lifeinfoBox--nav__btn:nth-child(n+2) {
		margin-left: 0;
	}
	.num05 .slick-list {
	    padding: 70px 20px 0 0 !important;
	}
	.num05 .clmBox.clmBox--clm2 .clmBox--content:nth-child(n+2) {
		margin: 18px 0 0;
	}
	.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl {
		background: none;
	}
	.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dt {
		width: 100%;
		background: #222;
	}
	.lifeinfoBox .lifeinfoBox--contents .lifeinfoBox--contents__panel dl dd {
		width: 100%;
		background: #222;
		padding-left: 0;
		margin-top: 5px;
	}
	.lifeinfoBox .slick-dots {
		height: 1em;
		white-space:nowrap;
		overflow-x: scroll;

		bottom:auto !important;
		top: 0 !important;
		height: 42px !important;
	}
	.lifeinfoBox .slick-dots li,
	.lifeinfoBox .slick-dots li button,
	.lifeinfoBox .slick-dots li button::before {
		width: 10em !important;
		height: 1em !important;
		margin: 0 !important;
	}
	.lifeinfoBox .slick-dots li {
		padding-bottom: 20px !important;
	}
	.lifeinfoBox .slick-dots li:nth-child(1) button::before {
		content: '商業施設';
	}
	.lifeinfoBox .slick-dots li:nth-child(2) button::before {
		content: '教育施設';
	}
	.lifeinfoBox .slick-dots li:nth-child(3) button::before {
		content: '医療施設';
	}
	.lifeinfoBox .slick-dots li:nth-child(4) button::before {
		content: '金融機関';
	}
	.lifeinfoBox .slick-dots li:nth-child(5) button::before {
		content: '公共施設';
	}
	.lifeinfoBox .slick-dots li:nth-child(6) button::before {
		content: '公園・スポーツ施設';
	}
	.lifeinfoBox .slick-dots li.slick-active button:before {
		color: #fff !important;
	}
	.lifeinfoBox .slick-dots li.slick-active {
		border-bottom: solid 2px #fff;		
	}
}