@charset "UTF-8";

/* INTERFACE */

body>header{
	margin:0 auto 20px;
}

body>header h1{
	margin:0 auto;
	line-height:1;
	text-align:center;
}

body>header>a{
	display:block;
	margin:0 auto;
	line-height:1;
	text-align:center;
}

body>header img{
	width:250px;
	margin:15px 0 0;
}

body>header nav ul{
	display:table;/*幅を決めてしまうとズレちゃう文字などがあるときにいれる。文字が増えても幅が勝手に伸びてくれる*/
	list-style-type:none;
	text-align:center;
	margin:0 auto;
	padding:0;
	overflow:hidden;
}

body>header nav ul li{
	display:inline;/* インライン要素にする。インライン要素にしたらtext-align:center;が効く */
	list-style:none;
	margin:0 20px;
}

body>header nav ul li a{
	padding:0 0 0 15px;
	font-size:12px;
	background-image:url(../img/interface/ico_arrow.svg);
	background-repeat:no-repeat;
	background-size:6px auto;
	background-position:left center;
}

/* キービジュアルエリア */

#home_contents_key_area{
	margin:0 auto;
	position:relative;
	padding:0 20px 80px;
}

#home_contents_key_area p{
	color:#fff;
	font-size:20px;
	line-height:1.5em;
	position:absolute;
	top:30px;
	left:45px;
}

#home_contents_key_area picture img{
	width:100%;
}

#home_contents_key_area span{
	display:block;/* block要素にする*/
	width:100%;
	height:0;/* spanは位置を決めないといけない*/
	padding:30% 0 0;
	background-image:url("../img/key_illust_.png");
	background-repeat:no-repeat;
	background-size:70% auto;
	background-position:center bottom;
	position:absolute;
	bottom:80px;
	left:0;
}

@media only screen and (max-width:400px){
	#home_contents_key_area p{
		font-size:16px;
		top:10px;
		left:45px;
	}

}

/* 紹介ページボタンエリア */

#home_contents_main{
	margin:0 auto;
	padding:0 50px;
	position:relative;
}

#home_contents_main h2{
	margin:0 auto;
	padding:0 0 50px;
	text-align:center;
	font-size:12px;
}

#home_contents_main_entrance{
	margin:0 auto;
	padding:0 20px 40px;
}

#home_contents_main_entrance img{
	width:100%;
	margin:0 auto;
	padding:20px 0;
}

/* 地図紹介エリア */

#home_contents_map{
	margin:50px auto 0;
	padding:0;
	position:relative;
	background-image:url("../img/map_picture.jpg");
	background-repeat:no-repeat;
	background-size:cover;
}

#home_contents_map span{
	display:block;
	width:100%;
	height:30%;
	padding:0;
	background-image:url("../img/interface/machi_illust.png");
	background-repeat:no-repeat;
	background-size:40% auto;
	background-position:center top;
	position:absolute;
	top:-5%;
	left:0;
}

#home_contents_map h2{
	margin:0 auto;
	padding:10% 0 0;
	text-align:center;
	font-size:15px;
}

#home_contents_map_illust1{
	width:100%;
	margin:0 auto;
	padding:0;
}

#home_contents_map_illust1 img{
	max-width:50%;
	margin:0;
	text-align:center;
}

#home_contents_map_illust1 p{
	width:100%;
	margin:0 0 30px;
	padding:30px 0;
	box-sizing:border-box;
	font-size:12px;
	line-height:1.3rem;
	text-align:center;
}

#home_contents_map_illust2{
	margin:0 auto;
	padding:0 10px 50px;
}

#home_contents_map_illust2 img{
	width:80%;
}

/* アクセスエリア */

.home_contents_access{
	width:90%;
	margin:0 auto;
	padding:5% 60px;
	text-align:center;
	box-sizing:border-box;
	border-bottom:solid 1px;
}

.home_contents_access img{
	max-width:40%;
	margin:0 auto;
	padding:5% 0;
}

.home_contents_access h2{
	margin:0 auto;
	padding:0;
	font-size:15px;
}

.home_contents_access>div{
	width:100%;
}

.home_contents_access>div>h4{
	margin:5% auto 2%;
	padding:0 0 0 10%;
	font-size:12px;
	text-align:left;
}

.home_contents_access>div p{
	margin:0 auto;
	padding:0 0 5% 10%;
	font-size:12px;
	text-align:left;
}

/* フッター */

body>footer{
	max-width:600px;
	margin:30px auto;
	padding:25% 30px;
	text-align:center;
	background-image:url("../img/interface/machi_illust.png");
	background-repeat:no-repeat;
	background-position:center top;
	background-size:60%;
}

body>footer nav ul{
	list-style-type:none;
	margin:0;
	padding:0 20px 0 0;
	text-align:center;
}

body>footer nav ul li{
	display:inline;
	list-style:none;
	margin:0 0 0 5%;
}

body>footer nav ul li a{
	padding:0 0 0 15px;
	font-size:12px;
	background-image:url(../img/interface/ico_arrow.svg);
	background-repeat:no-repeat;
	background-size:6px auto;
	background-position:left center;
}

body>footer p{
	max-width:400px;
	margin:0 auto;
	padding:50px 0;
	font-size:10px;
	text-align:center;
}

body>footer img{
	max-width:40%;
	margin:0 auto 5%;
}

#footer_home_contents_main_entrance{
	margin:0 auto;
	padding:0 20px 40px;
}

#footer_home_contents_main_entrance img{
	display:block;
	max-width:50%;
	margin:0 auto;
	padding:20px 0;
}

#footer_home_contents_main_entrance a{
	margin:0 auto;
	padding:50% 0 0 0;
}


#footer_home_contents_main_entrance p{
	margin:0 auto;
	padding:0;
	font-size:8px;
}

/* 初台エリアページ */

header>img{
	margin:0 auto;
	text-align:center;
}

#hatsudaihonmachi_contents_area{
	margin:0 auto;
	padding:0;
}

/* キービジュアルエリア */

#hatsudaihonmachi_contents_key_area{
	max-width:600%;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align:center;
}

#hatsudaihonmachi_contents_key_area picture img{
	margin:0;
	width:80%;
}

#hatsudaihonmachi_contents_key_area h1{
	margin:0 0 50px;
	padding:10px 5px 30px 15px;
	display:block;
	font-size:25px;
	line-height:1em;
	letter-spacing:0.7em;
	text-align:left;
	background-image:url("../img/interface/h1_kakomi.png");
	background-repeat:no-repeat;
	background-size:95%;
	position:absolute;
	top:5%;
	left:5%;
}

#hatsudaihonmachi_contents_key_area p{
	margin:0 0 50px;
	padding:10px 0 0;
	font-size:15px;
	line-height:1.5em;
	left:30px;
}

/* 写真紹介商店街エリア */

#hatsudai_contents_syoutengai_area{
	margin:0 auto;
	padding:40% 0 0; /* h2の始まりの位置をきめてる */
	background-image:url("../img/syoutengai_top_sp.png");
	background-repeat:no-repeat;
	background-color:#f6e9d6;
	background-size:100%;
}

.hatsudaihonmachi_contents_spot_area{
	max-width:700px;
	margin:0 auto;
	padding:0;
	text-align:center;
}

.hatsudaihonmachi_contents_spot_area h2{
	margin:0 auto;
	padding:0;
	font-size:25px;
	letter-spacing:0.3em;
}

.hatsudaihonmachi_contents_spot_area img{
	max-width:60%;
	margin:0;
	padding:30px 0 0;
}

.hatsudaihonmachi_contents_spot_area p{
	margin:0 auto;
	padding:30px 0;
}

.hatsudaihonmachi_contents_syoukai_area{
	max-width:700px;
	margin:0 auto;
	padding:0 0 30px;
	text-align:center;
	position:relative;
}

.hatsudaihonmachi_contents_syoukai_area img{
	width:80%;
}

.illusthito{
	position:absolute;
	max-width:30%;
	margin:0 auto;
	bottom:140px;
	right:50px;
}

.hatsudaihonmachi_contents_syoukai_area p{
	margin:0 ;
	padding:30px 0 0;
	font-size:15px;
}

@media only screen and (max-width:330px){
	.illusthito{
	position:absolute;
	max-width:30%;
	margin:0 auto;
	bottom:100px;
	right:50px;
}
	.hatsudaihonmachi_contents_syoukai_area p{
	max-width:400px;
	margin:0 ;
	padding:10% 0 0;
	font-size:10px;
	}
}


/* 写真紹介八幡宮エリア地図 */

#hatsudai_contents_yahata_area{
	margin:0 auto;
	padding:40% 0 0; /* h2の始まりの位置をきめてる */
	background-image:url("../img/yahata_top_sp.png");
	background-repeat:no-repeat;
	background-color:#e5dde0;
	background-size:100%;
}

/* 写真紹介暗渠エリア地図 */

#hatsudai_contents_ankyo_area{
	margin:0 auto;
	padding:40% 0 0; /* h2の始まりの位置をきめてる */
	background-image:url("../img/ankyo_top_sp.png");
	background-repeat:no-repeat;
	background-color:#f6e9d6;
	background-size:100%;
}

/* 写真紹介不動通りエリア地図 */

#honmachi_contents_syoutengai_area{
	margin:0 auto;
	padding:40% 0 0; /* h2の始まりの位置をきめてる */
	background-image:url("../img/hudou_top_sp.png");
	background-repeat:no-repeat;
	background-color:#f6e9d6;
	background-size:100%;
}

/* 写真紹介氷川地図 */

#honmachi_contents_hikawa_area{
	margin:0 auto;
	padding:40% 0 0; /* h2の始まりの位置をきめてる */
	background-image:url("../img/hikawa_top_sp.png");
	background-repeat:no-repeat;
	background-color:#f6e9d6;
	background-size:100%;
}

/* 写真紹介本町暗渠地図 */

#honmachi_contents_ankyo_area{
	margin:0 auto;
	padding:40% 0 0; /* h2の始まりの位置をきめてる */
	background-image:url("../img/honmachiankyo_top_sp.png");
	background-repeat:no-repeat;
	background-color:#f6e9d6;
	background-size:100%;
}