@charset "UTF-8";

/* INTERFACE */

body>header{
	max-width:1600px;
	margin:30px auto 0;
	position:relative;
	height:160px;
}

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

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

body>header img{
	width:360px;
	height:78px;
}

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

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

body>header nav ul li a{
	padding:0 0 0 15px;
	font-size:18px;
	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 auto;
	padding:0;
}

/* キービジュアルエリア */
#home_contents_key_area{
	margin:0 auto;
	position:relative;
	padding:0 60px 110px;
}

#home_contents_key_area p{
	color:#fff;
	font-size:40px;
	line-height:1.5em;
	position:absolute;
	top:80px;
	left:94px;
}

#home_contents_key_area picture img{
	width:100%;
}

#home_contents_key_area span{
	display: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:1200px){
	#home_contents_key_area p{
		font-size:35px;
		top:60px;
		left:74px;
	}

}

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

#home_contents_main{
	max-width:1300px;
	margin:0 auto;
	padding:0;
	position:relative;
}

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

#home_contents_main_entrance{
	max-width:1300px;
	margin:0 auto;
	padding:0 0 104px;
	overflow:hidden;
}

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

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

/* 地図紹介エリア */

#home_contents_map{
	margin:30px auto;
	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:-8%;
	left:0;
}

#home_contents_map h2{
	margin:0 auto;
	padding:8% 0 0;
	text-align:center;
}

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

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

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

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

#home_contents_map_illust2 img{
	width:100%;
}

@media only screen and (max-width:1130px){
#home_contents_map_illust1 p{
	width:50%;
	margin:0;
	padding:50px 50px;
	box-sizing:border-box;
	float:right;
	font-size:15px;
	line-height:1.8rem;
	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 80px;
}

.home_contents_access>div>p{
	margin:0 auto;
	padding:0 0 0 80px;
}

/* フッター */

body>footer{
	max-width:800px;
	margin:30px auto;
	padding:200px 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%;
}

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:18px;
	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:45%;
	margin:0;
	padding:0;
	box-sizing:border-box;
	float:left;
	background-color:red;
}

#footer_home_contents_main_entrance img.right{
	max-width:45%;
	margin:0;
	padding:0;
	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:1600px;
	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:60px;
}

#hatsudaihonmachi_contents_key_area h1{
	margin:0 0 50px;
	padding:20px 5px 30px 30px;
	display:block;
	font-size:55px;
	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:60px;
}

#hatsudaihonmachi_contents_key_area p{
	font-size:25px;
	line-height:1.5em;
	position:absolute;
	top:230px;
	left:80px;
}

@media only screen and (max-width:1165px){
#hatsudaihonmachi_contents_key_area p{
	font-size:20px;
	line-height:1.5em;
	position:absolute;
	top:230px;
	left:80px;
}
}

@media only screen and (max-width:1120px){
#hatsudaihonmachi_contents_key_area h1{
	font-size:50px;
	letter-spacing:0.7em;
	top:120px;
	left:60px;
}

#hatsudaihonmachi_contents_key_area p{
	font-size:20px;
	line-height:1.5em;
	top:230px;
	left:80px;
}
}

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

#hatsudai_contents_syoutengai_area{
	margin:0 auto;
	padding:20% 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:700px;
	margin:0 auto 50px ;
	padding:0;
	position:relative;
	overflow:hidden; /*下になにもないときfloatしたときに親要素に入れる*/
}

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

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

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

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

.hatsudaihonmachi_contents_syoukai_area img{
	width:100%;
}

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

.hatsudaihonmachi_contents_syoukai_area p{
	max-width:400px;
	margin:0 ;
	padding:30px 0 0;
	text-align:left;
}

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

#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:20% 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:25% 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%;
}