@charset "UTF-8";

.material-tbl.index th, .material-tbl th {
	background-color: #069;
	color:#FFF;
}
.material-tbl th, .material-tbl td {
	padding:10px;
	box-sizing:border-box;
	text-align:center;
}
.material-tbl table {
	border-collapse:collapse;
	border-spacing:0;
}
.material-tbl, .material-tbl table {
	width:1000px;
	position:relative;
}
.material-tbl .tbl01-h {
	width:1000px;
	margin-bottom:1px;
}
.material-tbl thead, .material-tbl tbody {
	display:block;
	table-layout:fixed;
}
.material-tbl thead th {
	width:142px;
	border:1px #E7E7E7 solid;
}

.material-tbl tbody td {
	width:142px;
	border:1px #E7E7E7 solid;
}

.material-tbl.col5 thead th {
	width:200px;
}

.material-tbl.col5 tbody td {
	width:200px;
}

.material-tbl.page tbody {
	max-height: 300px;
	overflow-x: scroll; /* 横スクロール非表示 */
	overflow-y: scroll; /* 縦スクロール */
}
 @media screen and (min-width:660px) {
.material-tbl .tbl01-h {
	width:1000px;
}
.mac .material-tbl .tbl01-h {
	width:1000px; /* Mac OSのみ */
}
.material-tbl.page tbody {
	max-height: 1000px;
	overflow-x: hidden; /* 横スクロール非表示 */
	overflow-y: scroll; /* 縦スクロール */
}

/*スクロールバーの幅*/
::-webkit-scrollbar {
    width: 2px;
}
/*スクロールバーのレール*/
::-webkit-scrollbar-track {
  background: #eee;
}
/*スクロールバーのつまみ*/
::-webkit-scrollbar-thumb {
  background: #81D4FA;
}
}
.material-tbl.index {
	width:100%;
}
.material-tbl.index th {
	width:10%;
}
.material-tbl.index td:nth-child(1), .material-tbl.index td:nth-child(2) {
	white-space:nowrap;
}
.material-tbl.index tr:nth-child(even) td {
	background-color: #D7FAFF;
}
/*=============================================================
 下層共通
=============================================================*/	
.material-page {
	padding:20px 0;
!important
}
.material-page h2 {
	font-size:200%;
	text-align:center;
}
.material-page .lead {
	margin:20px 0 10px 0;
	font-size:140%;
}
.material-page .img img {
	width:100%;
}
.material-page .material-tbl {
	font-size:90%;
	margin-top:40px;
	text-align:center;
}
/*.material-page .material-tbl td:last-child {
	text-align:left;
	font-size:70%;
}*/
.material-page .material-tbl tr:nth-child(even) {
	background:none;
}
.material-page .material-tbl tr, .material-page .material-tbl td {
	background-color:#FFF;
}
.material-page .material-tbl tr.bg, .material-page .material-tbl tr.bg td {
	background-color: #D7FAFF;
}
.material-page .material-tbl td p {
	text-align:right;
}
.material-page .btn-pdf {
	display:block;
	margin-top:20px;
	background-color:#C61B1B;
	border-radius:15px;
	text-align:center;
}
.material-page .btn-pdf span {
	padding:20px 20px 20px 70px;
	background:url(../../img/material/ico_pdf.png) no-repeat 20px center;
	text-decoration:none;
	display: inline-block;
	color:#FFF;
	font-weight:bold;
	background-size:30px auto;
}
 @media screen and (min-width:660px) {
.material-page {
	padding:80px 0 !important;
}
.material-page h2 {
	text-align:left;
}
.material-page .lead {
	margin:20px 0 40px 0;
	font-size:120%;
}
.material-page .img img {
	width:auto;
}
.material-page .material-tbl {
	margin-top:80px;
}
.material-page .btn-pdf {
	display:inline-block;
	margin-top:80px;
}
.material-page .btn-pdf span {
	padding:30px 50px 30px 90px;
	background-size:auto auto;
}
}
/*=============================================================
 INDEX
=============================================================*/	

#material-index {
	padding:20px;
}
#material-index img {
	width:100%;
	height:auto;
}
#material-index nav {
	margin:0 0 40px 0;
}
#material-index nav li {
	width:31%;
	background-color:#0F95D9;
	text-align:center;
}
#material-index nav li a {
	font-size:120%;
	display:block;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	padding:15px 0;
}
#material-index nav li a:after {
	content:"▽";
	display:inline-block;
	margin-left:20px;
}
#material-index nav li:nth-child(3n-1) {
	margin:0 3.5%;
}
#material-index h2 {
	font-size:150%;
}
#material-index h3 {
	font-size:160%;
}
#material-index .lead {
	margin:20px 0 50px 0;
	font-size:140%;
}
#material-index .material-tbl {
	margin-top:10px;
}
#material-index .material-tbl th { white-space:nowrap;  }

#material-index .inner h3 {
	font-weight:bold;
	font-size:150%;
	margin-bottom:20px;
	margin-top:30px;	
}
#material-index .inner h3:before {
	background-color:#0F95D9;
	color:#FFF;
	width:1.5em;
	text-align:center;
	margin-right:0.8em;
}
#material-index .inner.vol01 h3:before {
	content:"1";
	display:inline-block;
}
#material-index .inner.vol02 h3:before {
	content:"2";
	display:inline-block;
}
#material-index .inner.vol03 h3:before {
	content:"3";
	display:inline-block;
}

#material-index .inner .left-box img {
	margin-bottom:1em;
}
#material-index .inner .right-box { margin-top:20px;}
#material-index .inner .right-box img {
	border:#F00 5px solid;
}
#material-index .inner h4 {
	border-bottom:1px #0F95D9 solid;
	font-weight:bold;
	font-size:150%;
	padding-bottom:0.5em;
	margin:1em 0 0.5em 0;
}
#material-index .inner li {
	color:#004F8E;
	font-weight:bold;
}
#material-index .inner .g-box {
	margin-top:20px;
	background-color:#EDEDED;
	border-radius:5%;
	padding:20px;
}
#material-index .inner .g-box h4 {
	border:none;
	padding:0;
	margin:0;
}
#material-index .inner .g-box p {
	margin-top:20px;
}
#material-index .inner .g-box p b {
	display:block;
	font-weight:bold;
	color:#0F95D9;
	font-size:120%;
}
 @media screen and (min-width:660px) {
#material-index {
	padding:80px 0 0;
}
#material-index nav {
	margin:0 0 80px 0;
}
#material-index .inner {
	margin-top:80px;
}
#material-index h2 {
	font-size:200%;
}
#material-index .inner h3 {
	margin-bottom:40px;
	margin-top:0;	
	font-size:200%;	
}
#material-index .inner .left-box {
	width:55%;
}
#material-index .inner .right-box {
	width:40%;
	margin-top:0;	
}
#material-index .inner .g-box {
	margin-top:50px;
	padding:40px;
}
}
/*=============================================================
 共通部分
=============================================================*/	

#data-list {
	background-color:#0F95D9;
	padding:40px 0 20px 0;
}
#data-list hr {
	margin:20px 0;
	height: 1px;
	background-color: #fff;
	border: none;
}
#data-list h2, #data-list h3, #data-list h4 {
	color:#FFF;
}
#data-list h2 {
	font-size:25px;
	margin-bottom:20px;
	text-align:center;
}
#data-list h3 {
	font-size:16px;
}
#data-list h4 {
	font-size:14px;
	margin-top:20px;
}
@media screen and (max-width:660px) {
#data-list ul {
	display: -webkit-box;
	/*--- Androidブラウザ用 ---*/
  display: -ms-flexbox;
	/*--- IE10 ---*/
  display: -webkit-flex;
	/*--- safari（PC）用 ---*/
  display: flex;
	-webkit-box-pack: justify;
	/*--- Androidブラウザ用 ---*/
  -ms-flex-pack: justify;
	/*--- IE10 ---*/
  -webkit-justify-content: space-between;
	/*--- safari（PC）用 ---*/
  justify-content: space-between;
}
}
#data-list li {
	background-color:#FFF;
	width:49%;
	margin-top:10px;
	font-size:80%;
	display: -webkit-box;
	/*--- Androidブラウザ用 ---*/
  display: -ms-flexbox;
	/*--- IE10 ---*/
  display: -webkit-flex;
	/*--- safari（PC）用 ---*/
  display: flex;
	-webkit-box-align: center;
	/*--- Androidブラウザ用 ---*/
  -ms-flex-align: center;
	/*--- IE10 ---*/
  -webkit-align-items: center;
	/*--- safari（PC）用 ---*/
  align-items: center;
}
#data-list li a {
	display:block;
	width:100%;
	box-sizing:border-box;
	background: url(../../img/material/ico_file.png) no-repeat 10px center;
	padding:10px 0 10px 40px;
	text-decoration:none;
	color:#000;
	font-weight:bold;
	background-size:20px auto;
}
#data-list li:hover {
	opacity:0.8;
}
 @media screen and (min-width:660px) {
#data-list {
	padding:100px 0;
}
#data-list hr {
	margin:40px 0;
}
#data-list h2 {
	font-size:40px;
	margin-bottom:40px;
	text-align:left;
}
#data-list h3 {
	font-size:20px;
	margin-bottom:20px;
}
#data-list h4 {
	font-size:16px;
	margin:20px 0 10px 0;
}
#data-list li {
	width:32%;
	font-size:16px;
	margin-top:0;
}
#data-list li:nth-child(3n-1) {
	margin:0 2%;
}
#data-list li a {
	display:block;
	width:100%;
	box-sizing:border-box;
	background: url(../../img/material/ico_file.png) no-repeat 20px center;
	padding:20px 0 20px 90px;
	background-size:auto auto;
}
}

/*=============================================================
　SPのみコンテンツ横スクロール
=============================================================*/	
@media screen and (max-width:660px) {
.scroll {
	overflow: auto;
}
.scroll::-webkit-scrollbar {
 height: 5px;
}
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}
}