@charset 'utf8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

*:not(i){
	font-family: "Noto Sans JP", sans-serif;
}


a{
	text-decoration:none;
}

body{
	overflow-x: hidden;
	background-color:#FFF9BB;
}

main .container{
	margin:5vh auto;
	padding:5vh 1vw 2vh 1vw;
	m
	border:5px solid #eee;
	border-radius:15px;
}



.map{
}

h1{
	text-align:center;
	font-weight:700;
}
h1 img{
	display:block;
	margin:auto auto 3vh auto;
	max-width:400px;
}

.area_detail{
	margin:3vh auto;
	text-align:center;
}
.area_detail span{
	display:block;
	font-size:85%;
}

.area_wrap{
	margin:0.5vh 0.5vw;
	padding:2vh 1vw;
	background-color:#fff;
	text-align:center;
	border-radius:10px;
}
.area_parent{
	margin-bottom:1vh;
	padding:1vh 5px;
	color:#fff;
	border-radius:10px;
}
.area_child > div{
	padding:5px;
}
.area_child > div > a{
	display:block;
	width:100%;
	padding:5px;
	color:#000 !important;
	font-size:80%;
	border:1px solid #ccc;
	border-radius:10px;
}


div.area_osaka{
	background-color:#3342CB;
	border:1px solid #3342CB;
}
div.area_sakai{
	background-color:#339DCB;
	border:1px solid #339DCB;
}
div.area_nakakawachi{
	background-color:#33CB42;
	border:1px solid #33CB42;
}
div.area_minamikawachi{
	background-color:#7FCB33;
	border:1px solid #7FCB33;
}
div.area_kitakawachi{
	background-color:#CBBB33;
	border:1px solid #CBBB33;
}
div.area_toyono{
	background-color:#CB6033;
	border:1px solid #CB6033;
}
div.area_mishima{
	background-color:#CB3360;
	border:1px solid #CB3360;
}
div.area_sennan{
	background-color:#CB33BB;
	border:1px solid #CB33BB;
}
div.area_senboku{
	background-color:#7F33CB;
	border:1px solid #7F33CB;
}

a.area_osaka:hover{
	background-color:#3342CB;
	border:1px solid #3342CB;
}
a.area_sakai:hover{
	background-color:#339DCB;
	border:1px solid #339DCB;
}
a.area_nakakawachi:hover{
	background-color:#33CB42;
	border:1px solid #33CB42;
}
a.area_minamikawachi:hover{
	background-color:#7FCB33;
	border:1px solid #7FCB33;
}
a.area_kitakawachi:hover{
	background-color:#CBBB33;
	border:1px solid #CBBB33;
}
a.area_toyono:hover{
	background-color:#CB6033;
	border:1px solid #CB6033;
}
a.area_mishima:hover{
	background-color:#CB3360;
	border:1px solid #CB3360;
}
a.area_sennan:hover{
	background-color:#CB33BB;
	border:1px solid #CB33BB;
}
a.area_senboku:hover{
	background-color:#7F33CB;
	border:1px solid #7F33CB;
}
.area_child a:hover{
	color:#fff !important;
}


.modal_content img{
	width:100%;
	max-width:100%;
}

.area_text{
	display:none;
}
.area_text div{
	text-align:center;
}


.modal {
	width: 100%;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}
.modal_body {
	width: calc(100% - 40px);
	max-width: 1000px;
	max-height: 95%;
	padding: 40px 30px;
	margin: 0 auto;
	border-radius: 6px;
	background-color: #FFF;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%,-50%);
	overflow: auto;
}
button.modal_close {
	color:#666;
	border:1px solid #666;
	border-radius:5px;
	background-color:#fff;
}
.modal_bg {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.modal_btn_wrap{
	margin-top:3vh;
	text-align:right;
}
.modal_urls{
	font-size:80%;
}



.back{
	margin-top:3vh;
	text-align:right;
}
.back a{
	display:inline-block;
	padding:10px;
	border:1px solid #666;
	border-radius:10px;
}



@media screen and (max-width:768px)  {
	main .container{
		margin:2vh auto;
		padding: 5vh 5vw;
		max-width:90%;
	}
}