@charset "utf-8";
/* ===================================================================

 file name  :landscape.css
 style info :街づくり

=================================================================== */

/* =============================

	overwrite

=============================== */




/* =================================== */
#main img{
	width:100%;
	height:auto;
}

.f-left{
	float:left;
}
.f-right{
	float:right;
}


#main .section{
	position:relative;
	margin-bottom:100px;
}
#main .section .txt{
	font-size:125%;
	font-weight:bold;
}
#main .section .photo-caption{
	font-size:92%;
}
#main .section .photo-caption .blue{	color:#35438f;}
#main .section .photo-caption .green{ color:#3fa531; }
#main .section .photo-caption .red{ color:#e73828; }
#main .section .photo-caption .pink{ color:#dd688c; }
#main .section .photo-caption .rblue{ color:#036eb7; }


#main h2{
	width:437px;
	margin:0 auto 60px;
}



/* education */
#main #education{
}
#main #education .ttl{
	position:relative;
}
#main #education h3{
	width:266px;
	position:absolute;
	top:206px;
	left:36px;
	z-index:10;
}
#main #education figure{
	margin-bottom:54px;
} 
#main #education figure figcaption{
	position:absolute;
	right:0.5em;
	bottom:0.1em;
	font-size:84%;
}

#main #education .detail{
	overflow:hidden;
	height:auto;
	position:relative;
}
#main #education .detail .notes{
	width:267px;
	float:left;
}
#main #education .detail .notes .catch{
	margin:30px 0 25px;
}
#main #education .detail .notes .txt{
}
#main #education .detail .photos{
	float:right;
	width:688px;
}
#main #education .detail .photos .block{
	overflow:hidden;
	height:auto;
}
#main #education .detail .photos .block ul{
}
#main #education .detail .photos .block ul li{
	width:170px;
	margin:0 0 2px 2px;
}
#main #education .detail .photo-caption{
	clear:both;
	position:absolute;
	left:0;
	bottom:0;
	width:267px;
}

/* shopping */
#main #shopping{
}
#main #shopping .ttl{
	position:relative;
}
#main #shopping h3{
	width:266px;
	position:absolute;
	top:206px;
	right:36px;
	z-index:10;
}
#main #shopping figure{
	margin-bottom:64px;
} 
#main #shopping figure figcaption{
	position:absolute;
	left:0;
	bottom:-2em;
	font-size:84%;
}

#main #shopping .detail{
	overflow:hidden;
	height:auto;
	position:relative;
}
#main #shopping .detail .notes{
	width:270px;
	float:right;
}
#main #shopping .detail .notes .catch{
	width:238px;
	margin:18px 0 25px;
}
#main #shopping .detail .notes .txt{
}
#main #shopping .detail .photos{
	float:left;
	width:696px;
}
#main #shopping .detail .photos .block{
	overflow:hidden;
	height:auto;
}
#main #shopping .detail .photos .block.f-left ul{
	width:464px;
}
#main #shopping .detail .photos .block.f-right ul{
	width:232px;
}
#main #shopping .detail .photos .block ul li{
	width:230px;
	float:left;
	margin:0 2px 2px 0;
}
#main #shopping .detail .photo-caption{
	clear:both;
	position:absolute;
	right:0;
	bottom:0;
	width:270px;
}


#main .public-medical-wrap{
	border:1px solid #bdbdbd;
	padding:43px 29px 29px;
	margin-bottom:13px;
}


/* public */
#main #public{
}
#main #public h3{
	width:229px;
	position:absolute;
	top:0;
	left:-10px;
}
#main #public .notes{
	margin-left:245px;
}
#main #public .catch{
	width:437px;
	padding-top:12px;
}
#main #public .txt{
	margin:16px 0 18px;
}
#main #public ul{
	margin:-0 0 0 -2px;
	overflow:hidden;
	height:auto;
}
#main #public ul li{
	float:left;
	width:230px;
	margin:0 0 2px 2px;
}
#main #public ul li.wide{
	width:476px;
}
#main #public .photo-caption{
	clear:both;
	padding:0.5em 0 0;
}

/* medical */
#main #medical{
	margin-bottom:0;
}
#main #medical h3{
	width:229px;
	position:absolute;
	top:0;
	right:-10px;
}
#main #medical .notes{
}
#main #medical .catch{
	width:356px;
	padding-top:12px;
}
#main #medical .txt{
	margin:16px 0 18px;
}
#main #medical ul{
	margin:-0 0 0 -2px;
	overflow:hidden;
	height:auto;
}
#main #medical ul li{
	float:left;
	width:312px;
	margin:0 0 2px 2px;
}
#main #medical .photo-caption{
	clear:both;
	padding:0.5em 0 0;
}





.access-caption{
	margin-bottom:100px;
	font-size:84%;
	text-align:right;
}



/*station*/
#main #station{
	padding:30px;
	margin-bottom:52px;
	background:#e8e8e8;
	position:relative;
}
#main #station h3{
	width:202px;
	position:absolute;
	top:-39px;
	left:12px;
}
#main #station ul{
	width:424px;
	float:left;
	overflow:hidden;
	height:auto;
}
#main #station ul li{
	width:200px;
	float:left;
	margin:0 2px 2px 0;
}
#main #station ul li.wide{
	width:220px;
}
#main #station .notes{
	float:right;
	width:484px;
}
#main #station .notes .txt{
	margin:9px 0 29px;
	font-size: 150%;
}
#main #station .notes .detail{
	overflow:hidden;
	height:auto;
}
#main #station .notes .detail dl{
}
#main #station .notes .detail dl.f-left{
	width:274px;
	border-right:1px solid #c5c5c5;
	padding-right:18px;
	margin-right:20px;
}
#main #station .notes .detail dl.f-right{
	width:170px;
}
#main #station .notes .detail dl dt{
	margin-bottom:12px;
}
#main #station .notes .detail dl.f-left dt{
	width:108px;
}
#main #station .notes .detail dl.f-right dt{
	width:76px;
}
#main #station .notes .detail dl dd{
	margin-bottom:9px;
}



/* map */
#main #map{
	overflow:hidden;
	height:auto;
}

#main #map nav{
	margin-bottom:20px;
}
#main #map nav ul{
	overflow:hidden;
	height:auto;
	margin-left:-1px;
}
#main #map nav ul li{
	width:166px;
	float:left;
	margin:0 0 0 1px;
	font-size:18px;
	text-align:center;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#main #map nav ul li:last-child{
	width:165px;
}
#main #map nav ul li a{
	padding:0.5em 0;
	display:block;
	text-decoration:none;
	-webkit-transition:all ease .3s;
	-moz-transition:all ease .3s;
	transition:all ease .3s;
}
#main #map nav ul li.education a{	border:2px solid #1a2b88;	color:#1a2b88;}
#main #map nav ul li.shopping a{	border:2px solid #e73828;	color:#e73828;}
#main #map nav ul li.bank a{	border:2px solid #dd688c;	color:#dd688c;}
#main #map nav ul li.public a{	border:2px solid #81c81c;	color:#81c81c;}
#main #map nav ul li.leisure a{	border:2px solid #3c9031;	color:#3c9031;}
#main #map nav ul li.medical a{	border:2px solid #036eb7;	color:#036eb7;}

#main #map nav ul li.education a:hover,
#main #map nav ul li.education.current a{	background:#1a2b88;	color:#FFF;}
#main #map nav ul li.shopping a:hover,
#main #map nav ul li.shopping.current a{	background:#e73828;	color:#FFF;}
#main #map nav ul li.bank a:hover,
#main #map nav ul li.bank.current a{	background:#dd688c;	color:#FFF;}
#main #map nav ul li.public a:hover,
#main #map nav ul li.public.current a{	background:#81c81c;	color:#FFF;}
#main #map nav ul li.leisure a:hover,
#main #map nav ul li.leisure.current a{	background:#3c9031;	color:#FFF;}
#main #map nav ul li.medical a:hover,
#main #map nav ul li.medical.current a{	background:#036eb7;	color:#FFF;}


#main #map .maps{
	width:738px;
	height:598px;
	float:left;
	position:relative;
	border:1px solid #bbbbbb;
}
#main #map .maps li{
	position:absolute;
	display:none;
	
}
#main #map .maps li.current{
	display:block;
}

#main #map .prots{
	width:200px;
	float:right;
}
#main #map .prots ul{
	display:none;
}
#main #map .prots ul.current{
	display:block;
}
#main #map .prots ul li{
	position:relative;
	font-size:14px;
	line-height:1.1;
	letter-spacing:-1px;
}
#main #map .prots ul li span{
	display:block;
	border-bottom:1px solid #bbbbbb;
	padding:0.5em 0;
}
#main #map .prots ul li:last-of-type{
	border-bottom:none;
}
#main #map .prots ul li:before{
	content:'';
	position:absolute;
	display:block;
	top:0.3em;
	left:-26px;
	width:22px;
	height:22px;
	border-radius:22px;
}
#main #map .prots ul.education li:before{	background:#1a2b88 url(../images/environment/ico_num.png) no-repeat 0 0;}
#main #map .prots ul.shopping li:before{	background:#e73828 url(../images/environment/ico_num.png) no-repeat 0 0;}
#main #map .prots ul.bank li:before{	background:#dd688c url(../images/environment/ico_num.png) no-repeat 0 0;}
#main #map .prots ul.public li:before{	background:#81c81c url(../images/environment/ico_num.png) no-repeat 0 0;}
#main #map .prots ul.leisure li:before{	background:#3c9031 url(../images/environment/ico_num.png) no-repeat 0 0;}
#main #map .prots ul.medical li:before{	background:#036eb7 url(../images/environment/ico_num.png) no-repeat 0 0;}
#main #map .prots ul li.num02:before{ background-position:0 -22px; }
#main #map .prots ul li.num03:before{ background-position:0 -44px; }
#main #map .prots ul li.num04:before{ background-position:0 -66px; }
#main #map .prots ul li.num05:before{ background-position:0 -88px; }
#main #map .prots ul li.num06:before{ background-position:0 -110px; }
#main #map .prots ul li.num07:before{ background-position:0 -132px; }
#main #map .prots ul li.num08:before{ background-position:0 -154px; }
#main #map .prots ul li.num09:before{ background-position:0 -176px; }
#main #map .prots ul li.num10:before{ background-position:0 -198px; }
#main #map .prots ul li.num11:before{ background-position:0 -220px; }
#main #map .prots ul li.num12:before{ background-position:0 -242px; }
#main #map .prots ul li.num13:before{ background-position:0 -264px; }



/* ==========================================================================
   smartPhone
   ========================================================================== */
@media screen and (max-width: 768px){

	/* =============================
	
		overwrite
	
	=============================== */
	
	
	/* =================================== */

	#main .section{
		margin-bottom:11%;
	}
	#main .section .txt{
		font-size:13px;
	}
	#main h2{
		width:266px;
		margin:0 auto 24px;
	}



	/* education */
	#main #education h3{
		width:49%;
		top:36%;
		left:0;
	}
	#main #education figure{
		margin:0 -10px 14%;
	} 
	#main #education figure figcaption{
		font-size:9px;
	}

	#main #education .detail{
	}
	#main #education .detail .notes{
		width:100%;
		float:none;
	}
	#main #education .detail .notes .catch{
		width:268px;
		margin:0 0 13px;
	}
	#main #education .detail .photos{
		float:none;
		width:100%;
		padding-top:20px;
	}
	#main #education .detail .photos .block{
	}
	#main #education .detail .photos .block ul.f-left{
		width:49.6666%;
	}
	#main #education .detail .photos .block ul.f-right{
		width:49.6666%;
	}
	#main #education .detail .photos .block ul li{
		width:100%;
		margin:0 0 1.2% 0;
	}
	#main #education .detail .photo-caption{
		position:static;
		width:100%;
		padding-top:0.5em;
	}

	/* shopping */
	#main #shopping h3{
		width:49%;
		top:36%;
		right:0;
	}
	#main #shopping figure{
		margin:0 -10px 14%;
	} 
	#main #shopping figure figcaption{
		font-size:9px;
	}

	#main #shopping .detail{
	}
	#main #shopping .detail .notes{
		width:100%;
		float:none;
	}
	#main #shopping .detail .notes .catch{
		width:236px;
		margin:0 0 13px;
	}
	#main #shopping .detail .photos{
		float:none;
		width:100%;
		padding-top:20px;
	}
	#main #shopping .detail .photos .block.f-left ul,
	#main #shopping .detail .photos .block.f-right ul{
		width:100%;
	}
	#main #shopping .detail .photos .block ul li{
		width:49.6666%;
		margin:0 0 0.5% 0;
		float:left;
	}
	#main #shopping .detail .photos .block.f-left ul li:nth-of-type(2),
	#main #shopping .detail .photos .block.f-left ul li:nth-of-type(3),
	#main #shopping .detail .photos .block.f-right ul li:nth-of-type(2){
		float:right;
	}
	#main #shopping .detail .photo-caption{
		position:static;
		width:100%;
		padding-top:0.5em;
	}


	#main .public-medical-wrap{
		padding:10px;
		margin-bottom:8px;
	}


	/* public */
	#main #public{
	}
	#main #public h3{
		width:46%;
		position:static;
	}
	#main #public .notes{
		margin-left:0;
	}
	#main #public .catch{
		position:absolute;
		top:0;
		left:49%;
		width:129px;
	}
	#main #public .txt{
		margin:8px 0 18px;
	}
	#main #public ul{
		margin:0;
	}
	#main #public ul li{
		width:49.6666%;
		margin:0 0 0.6% 0;
	}
	#main #public ul li:nth-of-type(odd){
		float:right;
	}
	#main #public ul li.wide{
		width:100%;
	}

	/* medical */
	#main #medical h3{
		width:46%;
		top:110px;
		right:0;
		margin-top:5%;
	}
	#main #medical .catch{
		width:271px;
		padding-top:0;
	}
	#main #medical ul{
		margin:0;
	}
	#main #medical ul li{
		float:left;
		width:49.6666%;
		margin:0 0 0.6% 0;
	}
	#main #medical ul li:nth-of-type(2){
		clear:both;
	}
	#main #medical ul li:nth-of-type(3){
		float:right;
	}




	.access-caption{
		text-align:left;
		font-size:9px;
		margin-bottom:18%;
	}



	/*station*/
	#main #station{
		padding:10px;
		margin-bottom:30px;
	}
	#main #station h3{
		width:43.57%;
		top:-35px;
		left:-4px;
	}
	#main #station ul{
		width:100%;
		float:none;
	}
	#main #station ul li{
		width:46.8%;
		margin:0 0 1.1% 0;
		float:right;
	}
	#main #station ul li.wide{
		width:52%;
		float:left;
	}
	#main #station .notes{
		float:none;
		width:100%;
	}
	#main #station .notes .txt{
		margin:9px 0 16px;
		font-size: 9px;
	}
	#main #station .notes .detail dl.f-left{
		width:52%;
		padding-right:10px;
		margin-right:0;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	#main #station .notes .detail dl.f-right{
		width:48%;
		padding-left:10px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	#main #station .notes .detail dl dt{
		margin-bottom:7px;
		line-height:1;
		font-size:0;
	}
	#main #station .notes .detail dl.f-left dt{
		width:54px;
	}
	#main #station .notes .detail dl.f-right dt{
		width:38px;
	}
	#main #station .notes .detail dl dd{
		margin-bottom:6px;
	}
	#main #station .notes .detail dl dd img{
		max-width:137px;
	}
	#main #station .notes .detail dl:last-child dd img{
		max-width:85px;
	}




	/* map */
	#main #map{
	}

	#main #map nav{
		margin-bottom:5px;
	}
	#main #map nav ul{
		margin-left:0;
	}
	#main #map nav ul li,
	#main #map nav ul li:last-child{
		width:30%;
		margin:0 5% 5% 0;
		font-size:10px;
	}
	#main #map nav ul li:nth-of-type(3n){
		margin-right:0;
	}
	#main #map nav ul li a{
		padding:0.7em 0;
		-webkit-transition:none;
		-moz-transition:none;
		transition:none;
	}
	#main #map nav ul li.education a:hover{	background:#FFF;	color:#1a2b88;}
	#main #map nav ul li.shopping a:hover{	background:#FFF;	color:#e73828;}
	#main #map nav ul li.bank a:hover{	background:#FFF;	color:#dd688c;}
	#main #map nav ul li.public a:hover{	background:#FFF;	color:#81c81c;}
	#main #map nav ul li.leisure a:hover{	background:#FFF;	color:#3c9031;}
	#main #map nav ul li.medical a:hover{	background:#FFF;	color:#036eb7;}
	#main #map nav ul li.education.current a{	background:#1a2b88;	color:#FFF;}
	#main #map nav ul li.shopping.current a{	background:#e73828;	color:#FFF;}
	#main #map nav ul li.bank.current a{	background:#dd688c;	color:#FFF;}
	#main #map nav ul li.public.current a{	background:#81c81c;	color:#FFF;}
	#main #map nav ul li.leisure.current a{	background:#3c9031;	color:#FFF;}
	#main #map nav ul li.medical.current a{	background:#036eb7;	color:#FFF;}


	#main #map .maps{
		width:100%;
		height:auto;
		padding-bottom:80.8%;
		margin-bottom:15px;
		float:none;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		overflow:hidden;
	}

	#main #map .prots{
		width:100%;
		float:none;
	}
	#main #map .prots ul li{
		font-size:9px;
		padding-left:18px;
		width:44.5%;
		margin-right:5.5%;
		float:left;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	#main #map .prots ul li:nth-of-type(odd){
		clear:both;
	}
	#main #map .prots ul li span.line03{
		padding:0.5em 0 1.5em;
	}
	#main #map .prots ul li:before{
		left:0;
		width:15px;
		height:15px;
	}
	#main #map .prots ul.education li:before{	background:#1a2b88 url(../images/environment/ico_num.png) no-repeat right 0; background-size:50px 200px;}
	#main #map .prots ul.shopping li:before{	background:#e73828 url(../images/environment/ico_num.png) no-repeat right 0; background-size:50px 200px;}
	#main #map .prots ul.bank li:before{	background:#dd688c url(../images/environment/ico_num.png) no-repeat right 0; background-size:50px 200px;}
	#main #map .prots ul.public li:before{	background:#81c81c url(../images/environment/ico_num.png) no-repeat right 0; background-size:50px 200px;}
	#main #map .prots ul.leisure li:before{	background:#3c9031 url(../images/environment/ico_num.png) no-repeat right 0; background-size:50px 200px;}
	#main #map .prots ul.medical li:before{	background:#036eb7 url(../images/environment/ico_num.png) no-repeat right 0; background-size:50px 200px;}
	#main #map .prots ul li.num02:before{ background-position:right -15px; }
	#main #map .prots ul li.num03:before{ background-position:right -30px; }
	#main #map .prots ul li.num04:before{ background-position:right -45px; }
	#main #map .prots ul li.num05:before{ background-position:right -59px; }
	#main #map .prots ul li.num06:before{ background-position:right -74px; }
	#main #map .prots ul li.num07:before{ background-position:right -89px; }
	#main #map .prots ul li.num08:before{ background-position:right -103px; }
	#main #map .prots ul li.num09:before{ background-position:right -118px; }
	#main #map .prots ul li.num10:before{ background-position:right -133px; }
	#main #map .prots ul li.num11:before{ background-position:right -148px; }
	#main #map .prots ul li.num12:before{ background-position:right -163px; }
	#main #map .prots ul li.num13:before{ background-position:right -178px; }







}