@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
@media all and (min-width: 481px) {
	.textBox a:hover {
		text-decoration: underline;
	}
}
#main {
	background-color: #fff;
}
.content {
	margin: 0 auto 359px;
	padding-top: 37px;
	width: 578px;
}
.topBox {
	background-color: #fff;
}
.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0;
}
.top p {
	margin-top: 13px;
	letter-spacing: -0.06em;
}
.top .image {
	width: 104px;
}
.top .image img {
	width: 100%;
}
.cityName {
	margin-bottom: 140px;
	text-align: right;
}
.oskashiBox .cityName {
  margin-bottom: 98px;
}
.higashiosakaBox .cityName {
  margin-bottom: -3px;
  text-align: right;
}
.imgBox {
	position: relative;
}
.photoBox {
	margin-left: 8px;
	width: 539px;
	position: relative;
}
.city li {
	position: absolute;
}
.city01 {
	width: 133px;
	top: 134px;
	right: 132px;
}
.city02 {
	width: 133px;
	top: 413px;
	right: 43px;
}
.city03 {
	width: 85px;
	top: 346px;
	right: 174px;
}
.city04 {
	width: 84px;
	top: 502px;
	right: 167px;
}
.city05 {
	width: 132px;
	top: 607px;
	right: 295px;
}
.photoBox img {
	width: 100%;
}
.textBox {
	margin-right: -80px;
	width: 212px;
	position: absolute;
	z-index: 1;
	top: 19px;
	left: 1px;
}
.textBox a {
	color: #241713;
	text-decoration: none;
}
.textBox .ttl {
	font-size: 19px;
	font-weight: 700;
}
.textBox .ttl span {
	margin-right: 6px;
	width: 16px;
	height: 16px;
	display: inline-block;
	border-radius: 50%;
}
.textBox .kitaosaka .ttl span {
	background-color: #f69bc5;
}
.textBox .higashiosaka .ttl span {
	background-color: #6ec687;
}
.textBox .oskashi .ttl span {
	background-color: #4fa0da;
}
.textBox .sakaishi .ttl span {
	background-color: #f2ed50;
}
.textBox .minamiosaka .ttl span {
	background-color: #fab956;
}
.textBox > div {
	margin-bottom: 13px;
}
.textBox ul {
	margin-top: -2px;
	display: flex;
	flex-wrap: wrap;
}
.textBox li a {
	color: #303333;
}
.mapImg {
	margin: 0 auto;
	width: 390px;
}
.kitaosakaBox .mapImg {
	margin-left: 68px;
	width: 394px;
}
.higashiosakaBox .mapImg {
	margin-left: 121px;
	width: 295px;
}
.oskashiBox .mapImg {
	margin-left: -5px;
	width: 542px;
}
.sakaishiBox .mapImg {
	width: 404px;
}
.minamiosakaBox .mapImg {
	margin-left: 25px;
	width: 483px;
}
.mapImg img {
	width: 100%;
}
.logoUl {
	max-width: 850px;
	margin: 0 auto;
	padding-bottom: 82px;
	display: flex;
	justify-content: space-between;
}
@media all and (max-width: 480px) {
	.content {
		margin: 0 14px 390px;
		padding-top: 12px;
		width: auto;
	}
	.top p {
		margin-top: 9px;
		font-size: 2.67vw;
		letter-spacing: -0.1em;
	}
	.top .image {
		width: 16.53vw;
	}
	.photoBox {
		margin: 0 19px 0 7px;
		width: auto;
	}
	.textBox {
		width: 34.4vw;
		top: 3.73vw;
	}
	.textBox .ttl {
		margin-bottom: 7px;
		font-size: 2.393vw;
		line-height: 1;
	}
	.textBox .ttl span {
		margin-right: 3px;
		width: 10px;
		height: 10px;
	}
	.textBox li {
		font-size: 2.4vw;
		line-height: 1.6;
		letter-spacing: -0.06em;
	}
	.textBox > div {
		margin-bottom: 2.93vw;
	}
	.city01 {
		width: 21.33vw;
		top: 21.33vw;
		right: 20.8vw;
	}
	.city02 {
		width: 21.2vw;
		top: 65.86vw;
		right: 6.67vw;
	}
	.city03 {
		width: 13.5vw;
		top: 55.2vw;
		right: 27.73vw;
	}
	.city04 {
		width: 13.5vw;
		top: 80vw;
		right: 26.4vw;
	}
	.city05 {
		width: 21.33vw;
		top: 96.8vw;
		right: 46.93vw;
	}
	.logoUl {
		padding-bottom: 5px;
		display: block;
	}
	.logoUl li {
		margin-top: 10px;
		text-align: center;
	}
	.cityName {
		margin-bottom: 60px;
	}
	.higashiosakaBox .cityName {
		margin-bottom: -27px;
	}
	.oskashiBox .cityName {
		margin-bottom: 35px;
	}
	.sakaishiBox .cityName {
		margin-bottom: 64px;
	}
	.minamiosakaBox .cityName {
		margin-bottom: 78px;
	}
	.cityName img {
		width: 26.4vw;
	}
	.oskashiBox .cityName img, .sakaishiBox .cityName img {
		width: 16.53vw;
	}
	.kitaosakaBox .mapImg {
		width: 81.5%;
		margin: 0 0 176px 15px;
	}
	.higashiosakaBox .mapImg {
		width: 61%;
		margin: 0 0 45px 45px;
	}
	.oskashiBox .mapImg {
		width: 99.8vw;
		margin: 0 0 146px -13px;
	}
	.sakaishiBox .mapImg {
		width: 83.5%;
		margin: 0 0 153px 20px;
	}
	.minamiosakaBox .mapImg {
		width: 100%;
		margin: 0 0 195px 0;
	}
	.cityList {
		margin: -4px -2px 0;
		display: flex;
		flex-wrap: wrap;
	}
	.cityList li {
		margin: 4px 2px 0;
		width: calc((100% - 16px)/4);
		height: 26px;
		border: 1px solid #E6E6E6;
		background: linear-gradient(0deg, rgb(230, 230, 230) 0%, rgb(255, 255, 255) 7.1%, rgb(255, 255, 255) 81.85%, rgb(242, 242, 242) 100%);
		box-shadow: 0px 0px 0.2px rgba(4, 0, 0, 0.2);
		box-sizing: border-box;
	}
	.cityList li a {
		padding: 2px 14px 2px 7px;
		display: block;
		height: 100% !important;
		font-size: 12px;
		text-align: center;
		text-decoration: none;
		color: #303333;
		background: url("../img/map_kitaosaka/icon.png") no-repeat right 3px top 8px / 8.5px auto;
	}
	.higashiosakaBox .cityList li a {
		background-image: url("../img/map_higashiosaka/icon.png");
	}
	.oskashiBox .cityList li a {
		background-image: url("../img/map_oskashi/icon.png");
	}
	.sakaishiBox .cityList li a {
		background-image: url("../img/map_sakaishi/icon.png");
	}
	.minamiosakaBox .cityList li a {
		background-image: url("../img/map_minamiosaka/icon.png");
	}
}
@media all and (max-width: 374px) {
	.cityList li {
		width: calc((100% - 16px)/3) !important;
	}
}