/*============  このCSS（index.css）は公開画面用の共通スタイルシート  ============

共通部品でないものは各PHPファイルに個別に書き込んである。

設定画面用の共通スタイルシートは setting.css のほう。

*/

body{
	margin : 0 ;
	word-break: break-all;
}
/******  　ヘッダーコンテンツの枠   ******************************/
#headerContentsFrame {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 auto ;
	margin-top: 5px ;
	width: 1130px;
	height: 69px;
	background: #fff;
	border:0px solid blue;
}

/******  　左上の「KYOTO OPEN DATA」の画像   *********************/
#headerLogoImg {display:inline-block; }

/******  　トップのナビゲーションメニュー   **********************/
ul#navMenu {
	display:inline-block; 
	list-style:none;
	text-align:center;
	margin:0 0 0 30px;
	padding:0 0 0 0;
}
ul#navMenu li {
	width:138px;
	float:left;
}
ul#navMenu li a {
	display:block; 
	padding:13px 0;
	text-decoration:none;
	background:#F5F5F5;
	color:#BB33CC;
	font-weight:bold;
}
ul#navMenu li a:hover , ul#navMenu li a#current { /* マウスON時 , カレント時 */
	background:#BB33CC;
	color:#fff;
}

/******  　ヘッダーやフッターの境目のボーダーライン   ***********/
.borderLine{
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 auto ;
	width: 100%;
	border-style:none;
	border-top:3px solid #BB33CC;
}

/******  　メインコンテンツの枠   *******************************/
#mainContentsFrame , #mainContentsFrame2 { /* インデックスと検索画面 */
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 auto ;
	margin-top: 10px ;
	margin-bottom: 5px ;
	padding: 30px 10px 0 10px ;
	width: 1130px;
	background: rgba(0,0,0, 0.0); /************************** 本番はここを削除 ***********************************************/
	line-height: 2;
}
#mainContentsFrame2 {  /* メールフォームや活用事例など */
	width: 950px;
}
#mainContentsFrame h1 , #mainContentsFrame2 h1 {
	margin: -10px 0 0 0;
}
#mainContentsFrame h1 {display:inline-block;} /* AND OR検索を横並びにするためのインラインブロック */

/******  　メインコンテンツの背景画像   *************************/
.mainBackImg {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	height: 400px;
	object-fit: cover;
	position: absolute;
	z-index: -10;
	margin-top: -1px ;
}

/******  検索フォーム＆６分野パネルの枠   ***********************/
#searchContentsFrame{
	width:500px;
	margin: 0 auto;
	margin-bottom: 30px;
	border: solid 0px black;
}

/******  検索フォーム   *****************************************/
#searchForm {
	width:100%;
	margin: 0 0 40px 0;
}
#seachTextBox {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:inline-block;
	width:430px;
	height:45px;
	border: 0px solid #000;
	margin: 0 ;
	padding-left:15px;
	border-radius:4px 0 0 4px;
	background: rgba(255,255,255, 1.0);
	font-size:100%;
	outline: 0;
}
#seachButton {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:absolute;
	display:inline-block;
	width:70px;
	height:45px;
	border: 0px solid #000;
	border-radius:0 4px 4px 0;
	background:#BB33CC;
	color:#F5F5F5; 
	font-size:100%;
	font-weight:bold;
}
#seachButton:hover {
	background:#660099;
	color:#fff;
	cursor : pointer;
}

/******  検索フォームのうちデータセット・データリソース検索画面用   ******/
#searchGropeFrame {
	border:0px solid #000;
	overflow: hidden;
}
#searchGropeLeft {
	float:left; 
	border:0px solid blue;
	width:718px;
}
#searchGropeRight {
	float: left; 
	border:0px solid red;
	width:355px;
	text-align:right;
}
#seachTextBox2 {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display:inline-block;
	width:465px;
	height:45px;
	border: 2px solid #bbb;
	border-right: 0;
	margin: 0 ;
	margin-right: -6px ;
	padding-left:15px;
	border-radius:4px 0 0 4px;
	background: rgba(255,255,255, 1.0);
	font-size:100%;
	outline: 0;
}
.selectBoxStyle , .selectBoxStyleR {
	width: 350px;
	height: 40px;
	font-size:100%;
	margin:0 ;
	padding:0 0 0 20px ;
	border: 0px solid #bbb;
	border-top: 2px solid #FFF;
	background: #F5F5F5 ;
}
.selectBoxStyle {height: 40px;}
.selectBoxStyleR {height: 55px;}


/******  「６分野」の選択パネル   *******************************/
ul#sixPanel{
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	margin:0;
	padding:0;
}
ul#sixPanel li{
	width:31.3%;
	margin:1%;
	height:110px;
	background: rgba(255,255,255, 0.9);
	text-align:center;
	line-height:0 ;
}
ul#sixPanel li:hover {
	background: rgba(255,255,255, 1.0);
	color:red;
}
ul#sixPanel li a{
	display: block;
	text-decoration:none;
	height: 100%;
	width: 100%
}
.sixPanelTxt{
	padding: 5px 0 0 0 ;
	font-weight:bold;
	color:black;
}
.sixPanelCount{
	font-weight:bold;
	font-size:300%;
	color:#BB33CC;
}

/******  「京都市からのお知らせ」「新着データセット」
          「アクセスランキング」「ダウンロードランキング」   *********/
.infoFrameOuter {
	display:block; 
	width:100%;
	border: solid 0px #000 ;
}
.infoFrameLeft , .infoFrameRight {
	display:inline-block; 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width:49%;
	border: solid 0px red ;
	line-height:1.5 ;
	font-size:90% ;
}
.infoFrameLeft  {padding: 0 25px 0 0 ; margin-right:15px; }
.infoFrameRight {padding: 0 0 0 25px ;  }
.infoIcon{ width:40px; margin-top:50px; }
.infoIconBox {
	text-align:center;
	border: solid 0px blue ;
	margin : 0 0 20px 0;
	font-size:120%;
	font-weight:bold;
	line-height:1.5;
}
.infoBox {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
.infoBox td{
	padding: 5px 0;
}
#infoBoxleft1{width: 105px;}
#infoBoxleft2{width: 135px;}
#infoBoxleft3{width: 45px;}

/******  　検索結果のテーブル等   ******************************/
#countText {
	border-top: 1px solid #8c8b8b; 
	border-bottom: 1px solid #8c8b8b; 
	margin:20px 0; 
	padding:8px 0;
}
.resultTable {
	width:100%;
	border-bottom: 1px dashed #8c8b8b; 
	padding:15px 0;
}
.resultLeft {
	vertical-align:top; 
	width:47px;
}
.resultLeft img {width:45px;}
.resultRightFrame {padding:5px 0 5px 10px;}
.resultRight1 {font-size:115%;}
.resultRight2 {
	font-size:85%;
	color:#800080; 
	margin:7px 0;
}
.resultRight2 a {text-decoration:none;}
.resultRight2 a:link {color:#800080;}
.resultRight2 a:visited {color:#800080;}
.resultRight2 a:hover {
	color:#800080;
	text-decoration:underline;
}
.resultRight2 a:active {color:#800080;}
.resultRight3 {
	font-size:85%;
	color:#666;
}

/******  　ページ番号   ******************************/
#pageMenu {
	width:90%;
	text-align:center;
	margin: 40px 0 ;
}
#pageMenu a {
	display:inline-block; 
	padding:1px 10px;
	margin:3px 0;
	text-decoration:none;
	background:#F5F5F5;
	color:#BB33CC;
	border: 1px solid #8c8b8b; 
}
#pageMenu a:hover , #pageMenu a#currentPage { /* マウスON時 , カレント時 */
	background:#BB33CC;
	color:#fff;
}
#pageMenu a#currentPage { /* カレント時 */
	font-weight:bold;
}

/******  　バナーコンテンツの枠   ******************************/
#bannerContentsFrame {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: solid 0px #000 ;
	margin: 0 auto ;
	margin-top: 10px ;
	margin-bottom: 10px ;
	padding: 10px 20px 20px 20px;
	width: 1130px;
	line-height: 2;
}
#bannerContentsFrame img {
	max-width:100%;
	margin-right:15px;
}
/******  　フッターコンテンツの枠   ******************************/
#footerContentsFrame {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0 auto ;
	margin-top: 10px ;
	margin-bottom: 10px ;
	padding: 30px 20px ;
	width: 1130px;
	line-height: 2;
}
#footerContentsFrame h3 {
	margin:-20px 0 5px 0;
}
#footerTextFrame {
	display:inline-block; 
	margin-right:20px;
}
#footerTextFrame span {
	display:block;
}
#footerToukeiImg {
	display:inline-block; 
	margin-top:20px; 
}

/******  　メールフォーム用   ******************************/
.mailFormText{
	font-size:93%;
	border-top: 1px solid #BBB; 
	border-bottom: 1px solid #BBB; 
	margin:0 0 20px 0 ; 
	padding:6px 0;
}
.textBox500 {width: 500px; height: 30px;}
.textBoxArea {width: 100%; height: 150px; font-size:large;}
.button_A {
	display: block;
	min-width: 350px;
	border: 0;
	border-radius: 5px;
	background: #A16EFF;
	color: #fff;
	padding: 10px 60px;
	font-size: large;
	cursor: pointer;
	margin: 15px 0 0 0 ;
}
.button_A:hover {
	background: #BB33CC;
}
.button_A:focus {
	outline: none;
	box-shadow: 0 0 0 4px #cbd6ee;
}

/******  　データセット＆リソースのページ用   ******************************/
.dsName {
	color:#777;
	margin-bottom:12px;
}
.dsTitle {display:block;}
.dsTitle img {
	vertical-align:-9px; 
	width:40px; 
	margin-right:12px;
}
#dsPageFrame {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin:10px 0 25px 0;
	border:0px solid #000;
	overflow: hidden;
	width:100%;
}
#dsPageLeft {
	float:left; 
	border:0px solid blue;
	width:520px;
	font-size:90%;
	line-height:1.5;
	padding-right:10px;
}
#dsPageRight {
	width:390px;
	float: left; 
	border:0px solid red;
}
#dsPageFrame table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
#dsPageFrame table td{
	font-size:small;
	line-height:1.5;
	border: 1px #BBB solid;
	padding: 5px 0 5px 8px;
	text-align: left;
}
#dsPageFrame table tr:nth-child(odd){
	background-color: #eee
}
.tdWidth {width: 145px;}
.licenseImg {
	width:86px;
	vertical-align:-9px;
}

/******  アプリ一覧等のコンテンツ表示ページ用   *****************************/
.contentsBox{
	background:#F5F5FF; 
	padding:20px 70px; 
	margin-bottom:50px;
}
.contentsBoxDate {text-align:right}
.contentsBox img{max-width:100%;}

/******  メディアクエリ   *******************************************/
@media only screen and (max-width:1150px){
	#headerLogoImg {display:block; }
	#headerContentsFrame {height: 110px;width: 100%; }
 	#mainContentsFrame , #mainContentsFrame2 , #bannerContentsFrame {
		width: 100%;
		padding: 30px 40px 0 40px ;
	}
 	#footerContentsFrame {
		width: 100%;
		padding: 30px 5px 30px 40px ;
	}
 	ul#navMenu {display:block; margin:0;}
	ul#navMenu li {width:20%;}
	ul#navMenu li a { padding:9px 0 9px 0;}
	.infoFrameLeft , .infoFrameRight {
		display:block;
		width:100%;
		padding: 0 25px ;
		margin:0;
	}
	#searchGropeLeft {width:60%;}
	#searchGropeRight {width:39.5%;}
	#dsPageLeft {width:55%;}
	#dsPageRight {width:43%;}
}
@media only screen and (max-width:1000px){
	#searchGropeLeft {width:100%;}
	#searchGropeRight {
		width:100%;
		margin-top:15px;
	}
	.selectBoxStyle , .selectBoxStyleR {width:50%;}
	.selectBoxStyleR {height: 40px;}
	#dsPageLeft {width:100%; margin-bottom:20px;}
	#dsPageRight {width:100%;}
}
@media only screen and (max-width:705px){
	ul#navMenu li {width:33.3%;font-size:95%;}
 	#mainContentsFrame , #mainContentsFrame2 , #bannerContentsFrame , #footerContentsFrame {
		font-size:95%;
		padding: 30px 7px 0 10px ;
	}
	#searchContentsFrame { width:100%; }
	.sixPanelCount{font-size:280%;}
	#seachTextBox { width:82%; }
	.infoFrameLeft , .infoFrameRight {
		padding: 0 10px ;
	}
	#footerTextFrame span {display:inline;}
	#searchGropeLeft h1 {font-size:180%;}
	#seachTextBox2 {width:80%;}
	.selectBoxStyle , .selectBoxStyleR {width:100%;}
	.resultLeft {width:40px;}
	.resultLeft img {width:35px;}
	.resultRightFrame {padding:5px 0 5px 2px;}
	.resultRight1 {font-size:100%;line-height:1.5 ;}
	.resultRight3 {line-height:1.5 ;}
	#pageMenu {
		width:100%;
		margin: 30px 0 0 0 ;
	}
	.textBox500 ,.textBoxArea{
		width: 95%;
		display:block;
		margin: 0;
	}
	.button_A {
		min-width: 0;
		width:97%;
	}
	.dsTitle {font-size:130%;}
	.contentsBox{padding:20px 30px; }
	#bannerContentsFrame img {margin-right:0;}
}
@media only screen and (max-width:490px){
	#footerToukeiImg { width:100%; }
	#footerContentsFrame h3 { font-size:110%; }
	#seachTextBox2 {width:78%;}
	#searchGropeLeft h1 {display:block;}
	#dsPageFrame table td{padding: 5px 0 5px 3px;}
	.tdWidth {width: 110px;	}
	.contentsBox{
		padding:20px 8px; 
		font-size:85%;
		line-height:1.7;
	}
	#infoBoxleft1{width: 83px;}
	#infoBoxleft2{width: 108px;}
	#infoBoxleft3{width: 32px;}
}
@media only screen and (max-width:426px){
	#headerLogoImg { width:95%; }
	.sixPanelTxt{font-weight:medium;font-size:80%;}
	.sixPanelCount{font-size:250%;padding: 12px 0 0 0 ;}
	#seachTextBox { width:78%; }
	#footerContentsFrame h3 { font-size:105%; }
}