@charset "UTF-8";

/* INTERFACE */

body>header{
	margin:0 auto;
	position:relative;
	height:120px;
}

body>header h1{
	margin:0;
	line-height:1;
	position:absolute;
	top:25px;
	left:40px;
}

body>header>a{
	display:block;
	margin:0;
	line-height:1;
	position:absolute;
	top:25px;
	left:40px;
}

body>header img{
	width:300px;
	height:65px;
}

body>header nav ul{
	list-style-type:none;
	margin:0;
	padding:0;
	position:absolute;
	top:65px;
	right:40px;
}

body>header nav ul li{
	float:left;
	margin:0 0 0 40px;
}

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

/* メインコンテンツ */

#home_contents_area{
	margin:0;
	padding:0;
}

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

#home_contents_key_area{
	position:relative;
	padding:0 30px;
}

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

#home_contents_key_area img{
	width:100%;
}

#home_contents_key_area span{
	display:block;
	width:100%;
	height:0;
	padding:30% 0 0;
	background-image:url("../img/key_illust_.png");
	background-repeat:no-repeat;
	background-size:70%;
	background-position:center bottom;
	position:absolute;
	bottom:0;
	left:0;
}

/* mediaのmax-width数値は、HTMLの上にかいている数値(パソコン数値1024px、1023pxからタブ・タブ数値660px、659からスマホ)よりも刻んだ数値で縮小したいときに、その縮んだタイミングの画面の大きさを測って数値を入れる*/


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

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

#home_contents_main h2{
	margin:0 auto;
	padding:30px 0 100px;
	text-align:center;
	font-size:20px;
}

#home_contents_main_entrance{
	margin:0 auto;
	padding:0 0 104px;
	overflow:hidden;
}

#home_contents_main_entrance img.left{
	width:50%;
	margin:0;
	padding:0 40px 70px;
	box-sizing:border-box;
	float:left;
}

#home_contents_main_entrance img.right{
	width:50%;
	margin:0;
	padding:0 40px 70px;
	box-sizing:border-box; /*要素(padding)を内側に入れる*/
	float:right;
}

/* 地図紹介エリア */

#home_contents_map{
	margin:30px 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:8% 0 0;
	text-align:center;
	font-size:20px;
}

#home_contents_map_illust1{
	margin:0 auto;
	padding:0 30px;
}

#home_contents_map_illust1 img{
	width:50%;
	margin:0;
	padding:0 50px 40px;
	box-sizing:border-box;
	float:left;
}

#home_contents_map_illust1 p{
	width:50%;
	margin:0;
	padding:80px 50px;
	box-sizing:border-box;
	float:right;
	line-height:1.8rem;
	font-size:18px;
	text-align:left;
}

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

#home_contents_map_illust2 img{
	width:100%;
}

@media only screen and (max-width:765px){
#home_contents_map_illust1 p{
	width:50%;
	margin:0;
	padding:50px 30px;
	box-sizing:border-box;
	float:right;
	line-height:1.8rem;
	font-size:15px;
		text-align:left;
}

}

/* アクセスエリア */

.home_contents_access{
	max-width:800px;
	margin:30px auto 0;
	padding:0 60px;
	text-align:center;
	overflow:hidden;
}

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

.home_contents_access h2{
	margin:0 auto;
	padding:0;
	text-align:center;
}

.home_contents_access>div{
	width:50%;
	float:left;
	text-align:left;
}

.home_contents_access>div>h4{
	padding:0 0 0 20%;
}

.home_contents_access>div>p{
	margin:0 auto;
	padding:0 0 0 20%;
}

/* フッター */

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

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

body>footer nav ul li{
	float:left;
	margin:0 0 0 10%;
	text-align:center;
}

body>footer nav ul li a{
	padding:0 0 0 15px;
	font-size:15px;
	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:30%;
	margin:0 auto 5%;
}

#footer_home_contents_main_entrance{
	max-width:600px;
	margin:0 auto;
}

#footer_home_contents_main_entrance img.left{
	max-width:50%;
	margin:0;
	padding:0 3% 0 0;
	box-sizing:border-box;
	float:left;
}

#footer_home_contents_main_entrance img.right{
	max-width:50%;
	margin:0;
	padding:0 0 0 3%;
	box-sizing:border-box;
	float:right;
}

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


#footer_home_contents_main_entrance p{
	margin:0 auto;
	padding:30% 0 0 0;
}

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

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

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

#hatsudaihonmachi_contents_key_area{
	max-width:800%;
	height:0;
	margin:0 auto;
	position:relative;
	padding:50% 0 0;
}

#hatsudaihonmachi_contents_key_area picture img{
	margin:0;
	width:60%;
	position:absolute;
	top:0;
	right:40px;
}

#hatsudaihonmachi_contents_key_area h1{
	margin:0 0 50px;
		padding:15px 10px 30px 30px;
	display:block;
	font-size:40px;
	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:120px;
	left:40px;
}

#hatsudaihonmachi_contents_key_area p{
	font-size:17px;
	line-height:1.5em;
	position:absolute;
	top:200px;
	left:60px;
}

@media only screen and (max-width:810px){
	#hatsudaihonmachi_contents_key_area h1{
		font-size:34px;
		letter-spacing:0.5em;
		top:50px;
	}
	
	#hatsudaihonmachi_contents_key_area p{
		font-size:16px;
		line-height:1.5em;
		position:absolute;
		top:120px;
		left:60px;
	}
}

@media only screen and (max-width:760px){
	#hatsudaihonmachi_contents_key_area p{
		font-size:14px;
		line-height:1.5em;
		position:absolute;
		top:120px;
		left:60px;
	}
}

@media only screen and (max-width:715px){
	#hatsudaihonmachi_contents_key_area h1{
		padding:10px 15px 30px 20px;
		font-size:30px;
		letter-spacing:0.5em;
		top:40px;
	}
	
	#hatsudaihonmachi_contents_key_area p{
		font-size:14px;
		line-height:1.5em;
		position:absolute;
		top:110px;
		left:45px;
	}
}

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

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

.hatsudaihonmachi_contents_spot_area{
	max-width:500px;
	margin:0 auto 50px;
	padding:0;
	position:relative;
	overflow:hidden; /*下になにもないときfloatしたときに親要素に入れる*/
}

.hatsudaihonmachi_contents_spot_area h2{
	margin:0 auto;
	padding:0;
	font-size:36px;
	text-align:center;
	letter-spacing:0.5em;
}

.hatsudaihonmachi_contents_spot_area img{
	max-width:50%;
	margin:0 auto;
	padding:50px 0 0;
	float:left;
}

.hatsudaihonmachi_contents_spot_area p{
	margin:130px 0 0 0;
	padding:0;
	float:right;
	position:absolute;
	left:300px;
	bottom:30px;
}

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

.hatsudaihonmachi_contents_syoukai_area img{
	width:100%;
}

.illusthito{
	position:absolute;
	max-width:40%;
	margin:0 auto;
	bottom:150px;
	right:0;
}

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

.hatsudaihonmachi_contents_syoukai_area span{
	display:block;
	width:100%;
	height:0;
	padding:50% 0 0;
	background-image:url("../hatsudai/img/hatudai_hito_1.png");
	background-repeat:no-repeat;
	background-size:200px auto;
	background-position:right bottom;
	position:absolute;
	right:0;
	bottom:0;
}

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

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

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

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

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

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

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

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

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

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