@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      style.css
 Author:         A Matsubara
 Style Info:     デフォルトとプリント指定以外全て
 
 青系-> #356c92 #006699 
 緑系-> #008080 
 茶-> #6f5436
----------------------------------------------------------- */

/* ******************************* Reset ******************************* */

body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, 
brockquote, pre, table, caption, th, td, address, 
form, fieldset, legend, object {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

/* ******************************* Setting ******************************* */
/*--------------------------------------------------------------------------
	基本設定
--------------------------------------------------------------------------*/
/* html基本設定
/* 10px（ピクセル）＝7.5pt（ポイント）

/* rem指定を行う場合のptメモ
/* 10px×1.9 rem×0.75 = 14.25pt */
/* 10px×1.8 rem×0.75 = 13.5pt */
/* 10px×1.6 rem×0.75 = 12pt */
/* 10px×1.5 rem×0.75 = 11.25pt */

/* 10px×1.4 rem×0.75 = 10.5pt */
/* 10px×1.34 rem×0.75 = 10.05pt */
/* 10px×1.3 rem×0.75 = 9.75pt */






/********  デフォルトの16pxの代わりに、1emが10px=7.5ptになるように調整する (16px * 0.625 = 10px=7.5pt) 
remでタイトル等のフォントを設定する場合はここが起点 *******/

html {	
  font-size: 62.5%;
}

/********  bodyのfont-sizeを  10px×1.4 rem×0.75 = 10.5pt ★基本のフォントサイズ★ *******/  
body {
	zfont-size: 1.3em;
	font-size: 1.4em;
	margin: 0 auto;
	background: #FFF url(../images/bg_01.gif);
    font-family:"メイリオ","Meiryo","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック","MS P Gothic",Verdana, Arial, Helvetica, sans-serif;
}
p {
	margin: 0.5em;
	line-height: 1.8em;
	text-align:left;
}
img {
	vertical-align:middle;
}

a {
  text-decoration: none;
  color: #556B2F;
  color: #003366;	/* 紺系 */
  color: #6f5436;	/* 茶系 */
  color: #008080;	/* 緑系 */
  color: #000080;
  color: #2F4F4F ;
  color: #008080;	/* 緑系 */
}
.other a{
  color: #2f4f4f;	/* darkslategray */ 
}
#footer a{
  color: #2f4f4f;	/* darkslategray */ 
}
a:hover {
  text-decoration: underline;
  color: #000;
  color: #008080;	/* 緑系 */
}


/* --- 見出し --- */
/*1pt=0.75px*/

h1 {
	/* ページタイトル（化学物質のデータ検索 ＜カテゴリと名称・CAS番号＞、化学物質詳細情報 等) */
	padding:0 0 1em 0;
	font-size:1.9rem;	/* 10px×1.9rem×0.75=14.25pt */
}
h2 {
	/* 詳細画面 調査対象名（用途、PRTR制度、農薬出荷量 等) */
	margin: 35px 0 10px 0;
	font-size:1.9rem;	/* 10px×1.9rem×0.75=14.25pt */
	font-weight:  normal;
	color: #006e54;	/* 緑系 */
	text-shadow: 1px 1px 2px #000;
	box-shadow: 0 3px 1px -1px;	/* 緑系 */
	/* border-bottom: solid 2px #008080; ←罫線の指定、これでも同じ効果*/	/* 緑系 */
}
h3 {
	/* トップページ（Webkis-Plusの特徴 等） */
  margin: 25px 0 10px 0;
  font-size:1.8rem;	/* 10px×1.8rem×0.75=13.5pt */
  font-weight:bold; 
  color: #444444;
  text-shadow: none;
  padding: .75em;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
  box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}
h4 {
	/* その他「更新履歴」（月 等） */
	margin: 25px 0 10px 0;
	font-size:1.8rem;	/* 10px×1.8rem×0.75=13.5pt */
	font-weight:  normal;
	color: #006e54;	/* 緑系 */
	text-shadow: 1px 1px 2px #000;
}
h5 {
	/* 詳細画面 選択対象名（化学物質名、分析法名 等） */
	margin: 25px 0 10px 0;
	font-size:1.5rem;	/* 10px×1.5 rem×0.75 = 11.25pt */
	border-left: solid thick #008080;	/* 緑系 */
	padding-left:8px;
}
h6{
	/* その他「カテゴリについて」 */
	margin: 20px 0 12px 30px;
	font-size:1.5rem;	/* 10px×1.5rem×0.75=11.25pt */
	border-left: solid thin #008080;	/* 緑系 */
	padding-left:8px;
}

/* other_pivotDsc「操作方法」 で使用 */
ol {
	position: relative;
	padding-top:0.5em;
	padding-bottom:1em;
	margin-left: 2em;
}
ol li {
	line-height:1.2em;
}

.margin60 ul{
	margin: 0px 0 15px 60px;
}

/* main_indexで使用 */
/* other_descriptionで使用 */
.margin40 p{
	margin: 0px 0 15px 40px;
}
/* other_pivotDsc「操作方法」 で使用 */
p .left {
  float: left;
  margin-right: 2em;
  margin-bottom: 1em;
}
p .right {
  float: right;
  margin-left: 2em;
  margin-bottom: 1em;
}



/* --- テーブル --- */

table {			/* 基本：罫線なし */
	margin:10px auto;
	border-collapse: collapse;
	word-break:break-all;	/* なぜかこれを入れないとFirefoxで、tableが親要素からはみ出る。*/
	}
	.odd{
		background:#444;
		/*background:#ADD8E6;*/
		}
	.even{
		background:#F2F2F2;
		}
	.hover {
		background:#339999;
		}
	
	th{
		text-align: center;
		background:#222;
		color:white;
		border: 1px solid #b9b9b9;
		}
		
	th,td{
		padding:5px;
		font-size:small;
		border: 1px solid #b9b9b9;
		}
		
	td{
		padding:5px;
		font-size:small;
		border: 1px solid #b9b9b9;
		}


.linkNext {
}
.linkNext:hover {
	text-decoration: underline;
	color: gray;
	cursor:pointer; 
}


/*--------------------------------------------------------------------------
	ページ構造
--------------------------------------------------------------------------*/
#page {
	/* → header.phpで開いて footer.phpで閉じる*/
	background: #FFF;
	width: 90%;
	max-width:1260px;
	min-width: 780px;
	margin: 0 auto;
	text-align: left;
}

#header {
}

	/* ------- サイトマップへのリンク（ページ右上） ------- */
	#helpNav {
		float: right;
		padding-right: 28px;
		padding-left: 28px;
		padding-top:3px;
		/* CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする */
	    position: relative;
	    z-index: 2;		
	}
	#helpNav li {
		display: inline;
		margin-left: 15px;
		background: #FFF url(../images/to_next.png) no-repeat left center;
		padding-left:23px;
		zfont-size: 1.2rem;	/* 10px×1.2 rem×0.75 = 9pt */
		font-size: 0.9em; /* 本文（body）より少し小さめ */
	}
	
	
	#header_top {	/* nies_logo helpNav */
		width:100%;
	}
		/* ------- NIESロゴ（ページ左上） ------- */
		.nies_logo {
			text-align: right;
			padding-right: 23px;
			padding-top:10px;
		}

	#header_middle {
		padding:0 20px;
		height: 90px;
	    position: relative;
	    }
		/* ------- タイトルロゴ ------- */
		.logo {
		  float: left;
		  width: 303px;
		  }
		/* ------- タイトルロゴ横のサイト説明 ------- */
		.site_description {
		  position: absolute;
		  left:340px;
		  bottom: 0;
		  }

#contents {
	zmargin: 0 20px;
}
	#main {
		padding: 50px 30px;
		padding: 50px 25px;
		visibility:hidden;		
		/* データ数が多いため最終レイアウト表示前に乱れた画面が表示されてしまう。
		対応策として、読み込み時は非表示→読み込み完了後、表示する。 */
	}
	#main_left {
		float: left;
		width: 350px;
		width: 330px;
		width: 310px;
	}
	#main_right {
		margin-left: 360px;
		margin-left: 340px;
		margin-left: 325px;
	}

#footer {	
	width:100%;
	height:150px;
	margin:0 auto;
	padding: 0;
	background-color: #FFF;
	border-top:1px solid #E1EAFF;
}	


/* floatクリア */
.clear {
	clear:both;
}
.padding5 {
	padding-top:5px;
}

/*----------------------------------------------------
	ヘッダ内の要素
----------------------------------------------------*/

/* ------- ヘッダナビゲーション ------- */
/* 20180206アクセシビリティ対応完了。タブにてフォーカス可能 */

.menu{
  clear:both;
  margin:0;
  font-size:1.4rem;	/* 10px×1.4 rem×0.75 = 10.5pt */
}
/*親メニュー*/
.menu ul{
  margin: 0 auto; 	/* センターに配置 */
  padding:0;
  width:98%;
}
.menu ul li {
  margin:0;
  padding:0;
  position: relative;
  float: left;
  list-style: none;
  width: 14%;			/幅 98÷7=14*/
  font-size:1.4rem;	/* 10px×1.4 rem×0.75 = 10.5pt */
  text-align:center;
  line-height: 30px;
  border:#E1EAFF solid;
  border-width: 1px;
}
.menu ul li a {
  color: #000;
  display: block;
  text-decoration: none;
}
.menu ul li:hover, .menu ul li a:hover {
  background:#696969;	/*ホバー時の背景色*/
  color:#fff;			/*ホバー時の文字色*/
}
/*子メニュー*/
/*.menu ul li ul { ←これでも同じ*/
.menu .menu-item-has-children ul{
  position: absolute;
  top: 30px;			/*親メニューの高さと同じ*/
  width: 170px;
  z-index: 100;
  display: none;
}
/*.menu ul li ul li {←これでも同じ*/
.menu .menu-item-has-children li{
  width: 170px;
  background:#DDDDDD;
  font-size:1.4rem;	/* 10px×1.4 rem×0.75 = 10.5pt */
}
.menu .menu-item-has-children:hover ul,
.menu .menu-item-has-children ul.focused {
  display: block;
}

.menu li.menu-item-has-children li a:hover,
.menu li.menu-item-has-children li a:focus {
  background: #0090aa;	/*ホバー時の背景色*/
  color:#fff;			/*ホバー時の文字色*/
}

.menu li.selected_menu {
  background: #DCDCDC;
  background: #5F9EA0;
  background: #CCCCCC;
}

/*----------------------------------------------------
	フッタ内の要素
----------------------------------------------------*/
/*----	フッダ内リンクMENU ------*/
.fNav {
	padding-top:20px;
	text-align: center;
}

.fNav li {
	display: inline;
	margin-left: 10px;
	margin-right: 10px;
	zfont-size:1.4rem;	/* 10px×1.4 rem×0.75 = 10.5pt */
  font-size: 1.1em; /* 本文（body）より少し大き目 */
}
/*----	フッダ内 sitepolicy ------*/
.sitepolicy {
	padding-top:5px;
	text-align: center;
}

.sitepolicy li {
	display: inline;
	margin-left: 10px;
	margin-right: 10px;
	padding-left:16px;
  	background: #FFF url(../images/arrow035_01.gif) no-repeat left center;
	
}
/*----	著作権表示 ------*/
.Copyright {
	clear:both;
	text-align:center;
	font-size: 0.9em; /* 本文（body）より少し小さめ */
}
/*----------------------------------------------------
	contents内の要素
----------------------------------------------------*/
/* トップへのリンク（footer前）*/
.pageTop {
  clear:both;
  margin:0 0 10px 20px;
  background: #FFF url(../images/to_top.png) no-repeat left center;
  padding-left:23px;
  font-size: 0.9em; /* 本文（body）より少し小さめ */
  }
/* タイトル下説明分（現在、「トップ」と「カテゴリについて」にのみ要素あり */
.title_sub{
  zfont-size:1.5rem;	/* 10px×1.4 rem×0.75 = 10.5pt */
  font-size: 1.1em; /* 本文（body）より少し大き目 */
  margin: 15px 20px 15px 20px;
  }

/*----------------------------------------------------
	トップページ
----------------------------------------------------*/
.jmp {
  	background: #FFF url(../images/arrow035_06.gif) no-repeat left center;
	padding-left:16px;
}

div.toppage{
  padding: 0 20px;
  }
div.top_description1 h4{
	font-size: 1.5rem !important;	/* 10px×1.5 rem×0.75 = 11.25pt */
	text-shadow: none;
}
div.top_description2 h4{
	font-size: 1.5rem !important;	/* 10px×1.5 rem×0.75 = 11.25pt */
	text-shadow: none;
}
.toppage li{
  position: relative;
  margin-left: 3em;
  line-height:2em;
  list-style-type: disc;
  list-style-image: url(../images/point016_02.gif);
  }
.toppage ul.style1 li{
  position: relative;
  margin-left: 3em;
  line-height:2em;
  list-style-type: disc;
  list-style-image: url(../images/point036_03.png);
  }
.toppage ul.style2 li{
  position: relative;
  margin-left: 3em;
  line-height:2em;
  list-style-type: disc;
  list-style-image: url(../images/point036_09.png);
  }

.toppage_t2_1 {
  width: 44%;
  width: 49%;
  float: left;
  }
.toppage_t2_2 {
  width: 32%;
  width: 49%;
  float: left;
  padding-left:2%;
  }
.under {
  zpadding: 0 1.5em;
  background: #FFF url(../images/arrow07.png) no-repeat left center;
  padding: .25em 1.38em;
  background-color: #f6f6f6;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  }
.under2 {
  zpadding: 0 1.5em;
  background: #FFF url(../images/yajirushi_01.gif) no-repeat left center;
  padding: .25em 1.38em;
  border-bottom: 1px solid #ccc;
  }
.top_new{
  background: #FFF url(../images/new.gif) no-repeat left center;
  color:#000080;
  padding: .18em 3.5em;
  }
  
/*----------------------------------------------------
	検索画面
----------------------------------------------------*/
.search_form {
	padding:0 20px 40px 0;
	line-height: 2em;
	}
/*formのkey_category_kaisoのフォントサイズ指定 （type="hidden"のため不要）
#key_category_kaiso,#key_category_kaiso2 {
	font-size:1em;
}
*/

/*検索条件表示部分*/
.search_form_cnd {
	color: #000080;
	}

/*検索ページトップの説明*/
.src_description{
  position: relative;
  margin: 1em 0;
  line-height:1.8em;
  list-style-type: none;
  list-style-image: url(../images/point016_02.gif);
  padding: .25em 1.38em;
  border-bottom: dashed 1px #B0C4DE;/*点線*/
  }
    
p.message {
    padding: 5em 1em;
	margin: 150px 50px;
    border-bottom: dashed 1px #B0C4DE;/*点線*/
}

#main_left_src p{
	font-size:0.9em;
}

/*----------------------------------------------------
	検索結果一覧画面
----------------------------------------------------*/
/* 次ページへのリンク用 （chem_idをPOSTで渡すためのform）*/
#jump_form {	
	display: none;
	visibility: hidden;
}	

/*----------------------------------------------------
	物質詳細
----------------------------------------------------*/
/* 詳細画面トップの情報 */
.top_dtl{
	margin: 0 0 20px 0;
	text-align:left;
	zfont-size: 1.4rem;
	line-height:2.4rem;
}

/* 詳細画面 各データの出典表示用ボタン 
および モニタリングデータのpivotへのリンクボタンの文字サイズ指定 */
.form_button {
  zfont-size:1.34rem;
  padding-bottom:8px;
}

/* 詳細画面 印刷用ボタン */
div.print_button{
	margin: 0 20px 0 0;
	text-align:right;
}
#print_button{
    clear:both;
    margin:0.5em 0;
    padding: 0.2rem 2em;
    border:solid 1px #808080;
    border-radius:5px;
}
#print_button:hover{
    background-color:#CCCCCC;
}

/* 詳細画面 各データの出典表示用ボタン */

.buttonV {
    float:right;
    margin-bottom:10px;
    border:solid 1px #006e54;
    border-radius:14px;
    padding: 3px 20px;
    background-color:#669999;
    color: #fff;
}
.buttonV:hover {
    border:solid 1px #006e54;
    border-radius:14px;
    padding: 3px 20px;
    background-color:#fff;
    color:  	#006e54;
}


/*----------------------------------------------------
	分析法詳細
----------------------------------------------------*/
/*分析法詳細情報 PDFへのリンク*/
.square_btn {
    display: inline-block;
    margin-top:0.5em;
    padding: 0.3em 1em;
    text-decoration: none;
    background: #4682B4;	
    background: #e2e2e2;
    color: #008BBB;
    border: solid 1px #008BBB;
    border-radius: 3px;
    transition: .4s;

    background: #5DA3BA;
    color: white;
}

.square_btn:hover {
    background: #e2e2e2;
    background: #008BBB;
    color: white;

    background: #e2e2e2;
    color: #008BBB;
}

/*----------------------------------------------------
	other データ以外（other)の際に使用
----------------------------------------------------*/
div.other {
	padding: 0 20px;
}
div.other p {
	padding: 0 20px;
}

.other ul li {
	position: relative;
	margin-left: 3em;
	line-height:2em;
	list-style-type: disc;
	list-style-image: url(../images/point036_09.png);
}

/* other_description その他「カテゴリについて」で使用 */
.description a{
	background: #FFF url(../images/arrow07.png) no-repeat left center;
	border-left-style: none;
	border-left-color: #008080;
	padding-left:20px;
}

/* other_linklist その他「リンク」で使用 */
.link_lvl2{
	margin: 0 0 0 50px;
	font-size:1.4rem;	/* 10px×1.4 rem×0.75 = 10.5pt */
	line-height:2.3em;
}
.link_name{
	margin: 0px 0 0 60px;
	font-weight:  normal;
	font-size:1.4rem;	/* 10px×1.4 rem×0.75 = 10.5pt */
	line-height:2em;
	background: #FFF url(../images/point037_03.gif) no-repeat left center;
	padding-left:20px;
}

/* other_sitemap「サイトマップ」 設定は「サイトマップ」にまとめて記載 */
.sitemap h6{
	margin: 20px 0 7px 30px;
	font-weight:  bold;
	font-size:1.5rem;	/* 10px×1.5rem×0.75=11.25pt */
	background: #FFF url(../images/arrow035_10.gif) no-repeat left center;
	padding: 0px 0px 0px 500px;
	border-left-style: none;
	border-left-color: #008080;
	padding-left:20px;
}


.dec_none ul li{
	list-style-type: none;
}

/* other_pivotDsc「操作方法」 で使用 */
.box {
    background-color: #fff;
    border: 1px dashed #008080;
    border-radius: 8px;
    zwidth:200px;
    font-size:1.4rem;
    margin: 1em 0;
    padding: 0.5em 1em;
}

.big {
    font-size:2rem;
	vertical-align:middle;
	padding-right:0.25em;
}
p.resizable img {
    width: 100%; 
}

.strong {
	font-size:1.6rem;	/* 10px×1.6 rem×0.75 = 12pt */
	font-size:1.1em;
	color:#0000CD;
}