@charset "utf-8";

/*北本市史用CSS*/
.sisi_fra{
	margin-left:1%;
	width:32%;
	float:left;
	text-align:center;
	font-size:140%;
	height:auto;
	border:1px solid #ccc;
}
.sisi_fra ul{
	margin-top:1%;
	margin-left:2%;
}
.history,
.document,
.folklore{
	border:1px solid #ccc;
	padding:5% 1%;
	background:#1e78c2;
	color:#fae955;
	font-weight:bold;
}
.sisi_fra ul li{
	float:left;
	width:45%;
	margin-right:1%;
	font-size:80%;
	border:1px solid #ccc;
	padding:1% 1%;
	margin-top:1%;
	height:40px;
}
.sisi_fra ul li.sisi_small_font{
	font-size:70%;
}
.sisi_fra ul li.width_90{
	width:94%;
}
.sisi_cate111 ul{
	float:left;
	width:30%;
	margin-left:1%;
	margin-top:1%;
}
/*章*/
.chapter{
	border-left:10px solid #25478f;
	border-top:1px solid #25478f;
	font-weight:bold;
	padding-left:1%;
	width:90%;
}
.indent1{
	margin-left:2%;
	background:#E0FFFF;
	width:90%;
	margin-bottom:1%;
}
.indent2{
	margin-left:4%;
}
.indent3{
	margin-left:8%;
}
.mar_top10{
	margin-top:5%;
}
.paging_right{
	text-align:right;
	margin-right:2%;
}
.sisi_cate1111{
	margin-left:10%;
}

.sample{
	margin:100px;
}
img.img_ichi{
	width:40%;
	float:right;
	margin-right:10%;
}
img.img_ichi2{
	width:60%;
	margin-left:15%;
}
img.img_ichi4{
	width:40%;
	float:right;
	margin-right:10%;
}

/*市史画像用スタイル*/
.image_position_center{
	margin:0 auto;
}
.image_position_left{
	float:left;
}
.image_position_right{
	margin:0 auto;
}
.caption_left{
	text-align:left;
}
.caption_center{
	text-align:center;
}
.caption_right{
	text-align:right;
}
.com_right{
	text-align:right;
}
.contents p.img_com_right{
	font-size:90%;
	color:navy;
	line-height:1.0em;
}
#menubar li a span.h_menu{
	font-size:120%;
}

/*20251215防災マップ*/
.top_bg{
	width:80%;
	margin-left:3%;
	padding:1% 5%;
	background-color: #e29190;
	background-image: url("../images/drr/disaster_prevention_map/figure1.png");
	background-position: 20% 30%;
	background-repeat: no-repeat;
	background-size: 890px auto;
	height: 1300px;
}
.top_title{
	display: inline-block;
	font-size:400%;
	color:#fff;
	letter-spacing : 10px;
	font-weight: bold;
	  text-shadow    : 
       5px  5px 2px #dd463a,
      -5px  5px 2px #dd463a,
       5px -5px 2px #dd463a,
      -5px -5px 2px #dd463a,
       5px  0px 2px #dd463a,
       0px  5px 2px #dd463a,
      -5px  0px 2px #dd463a,
       0px -5px 2px #dd463a;        /* 文字の影 */
}
.map_names{
	text-align:right;
	margin-right:2%;
	margin-top:73%;
}
.jisin_title,
.kouzui_title{
	font-size:200%;
	color:#fff;
	font-weight: bold;
	letter-spacing : 10px;
}
.jisin_title{
	  text-shadow    : 
       3px  3px 1px #6d522e,
      -3px  3px 1px #6d522e,
       3px -3px 1px #6d522e,
      -3px -3px 1px #6d522e,
       5px  0px 1px #6d522e,
       0px  3px 1px #6d522e,
      -3px  0px 1px #6d522e,
       0px -3px 1px #6d522e;        /* 文字の影 */
}
.kouzui_title{
	  text-shadow    : 
       3px  3px 1px #0f6277,
      -3px  3px 1px #0f6277,
       3px -3px 1px #0f6277,
      -3px -3px 1px #0f6277,
       5px  0px 1px #0f6277,
       0px  3px 1px #0f6277,
      -3px  0px 1px #0f6277,
       0px -3px 1px #0f6277;        /* 文字の影 */
}
.contents p.top_com_fr{
	padding:1% 2%;
	border:4px solid #ff0000;
	border-radius: 10px;
	background-color: #fff;
}
.center{
	text-align:center;
}
.bold_f15{
	font-weight: bold;
	font-size:120%;
}

/*情報の入手先*/
.bg_beige{
	background:#fffac5;
}
.bg_beige h1{
	padding-left:2%;
}
.bg_green{
	background:#3eab61;
	color:#fff;
}
.f200{
	font-size:200%;
	letter-spacing:0.5em;
	width:100%;
}
.f150{
	margin:0 auto;
	margin-top:1%;
	width:90%;
	font-size:150%;
	letter-spacing:1.0em;
}
.f120{
	font-size:120%;
}
.kadomaru1{
	border-radius: 10px;
}
.center{
	text-align:center;
}

ul.detail1{
	width:90%;
	margin-left:5%;
}
ul.detail1 li{
	float:left;
	width:70%;
	margin-left:1%;
}
ul.detail1 li.s_title{
	width:15%;
	padding:1% 2%;
	margin-left:0%;
}
.green{
	color:#3eab61;
}
.orange_fr{
	padding:3% 2% 1%;
	border:2px solid #f4684e;
	border-radius: 10px;
}
.orange_bg1,
.orange_bg2{
	background:#f4684e;
	font-size:120%;
	font-weight:bold;
	color:#fff;
}
.orange_bg2{
	font-size:100%;;
}
.bousai ul.bousai_l,
.bousai ul.bousai_r{
	float:left;
	width:30%;
	margin-right:1%;
}
.bousai ul.bousai_r{
	width:60%;
}


/*画面幅1500px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1500px){
	.top_bg{
		background-size:1000px auto;
		height:1400px;
	}
	.map_names{
		margin-top:82%;
	}
}

/*画面幅1600px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1600px){
	.top_bg{
		height:1450px;
	}
	.map_names{
		margin-top:80%;
	}
}
/*画面幅1700px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1700px){
	.top_bg{
		height:1400px;
	}
	.map_names{
		margin-top:70%;
	}
}
/*画面幅1900px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:1900px){
	.top_bg{
		height:1350px;
	}
	.map_names{
		margin-top:60%;
	}
}



/*画面幅1360px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1360px){
	.map_names{
		margin-top:80%;
		
	}
}
/*画面幅1260px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1260px){
	.map_names{
		margin-top:85%;
		
	}
}
/*画面幅1160px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1160px){
	.map_names{
		margin-top:90%;
		
	}
}
/*画面幅1100px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1100px){
	.top_bg{
		background-size:800px auto;
	}
	.map_names{
		margin-top:95%;
		
	}
}
/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){
	.top_bg{
		background-size:700px auto;
		background-position:20% 20%;
		height:1200px;
	}
	.map_names{
		margin-top:90%;
		
	}
}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	.sisi_fra{
		margin-left:5%;
		width:90%;
		height:auto;
		margin-top:10px;
		padding-bottom:10px;
	}
	.sisi_cate111 ul{
		width:45%;
	}
	.image_style{
		width:90%;
	}
	.contents p.img_com_right{
		text-align:left;
		margin-top:0px;
		font-size:90%;
	}
	.sisi_fra ul li.sisi_small_font{
		margin-top:0%;
	}
	.top_title{
		font-size:350%;
	}
	.top_bg{
		background-size:600px auto;
		background-position:20% 20%;
		height:1100px;
	}
	.map_names{
		margin-top:85%;
		
	}
	.jisin_title, .kouzui_title{
		font-size:150%;
	}

}

/*画面幅720px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:720px){
	.top_title{
		font-size:300%;
	}
	.top_bg{
		background-size:500px auto;
		background-position:20% 20%;
		height:1000px;
	}
	.map_names{
		margin-top:85%;
		
	}
}



/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){
	.top_bg{
		background-size:450px auto;
		background-position:20% 12%;
		height:1100px;
	}
	.top_title{
		font-size:200%;
	}
	.map_names{
		margin-top:110%;
		
	}
	.jisin_title, .kouzui_title{
		font-size:120%;
	}
}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
	.sisi_cate111 ul{
		width:90%;
		margin-top:5%;
	}
	div.sisi_cate111 ul li div.display_none480{
		display:none;
	}
	.sisi_fra ul li.sisi_small_font{
		margin-top:5px;
	}
	.top_bg{
		background-size:400px auto;
		background-position:20% 10%;
		height:1000px;
	}
	.top_title{
		font-size:180%;
	}
	.map_names{
		margin-top:110%;
		
	}
	.jisin_title, .kouzui_title{
		font-size:110%;
	}
}

/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){
	.top_bg{
		background-size:300px auto;
		background-position:20% 5%;
		height:1000px;
	}
	.top_title{
		font-size:150%;
	}
	.map_names{
		margin-top:100%;
		
	}
	.jisin_title, .kouzui_title{
		font-size:100%;
	}

}