@charset "UTF-8";

@media screen and (min-width: 1000px) {

	main{
		width : 100%;
		height : auto;
		margin : 0 auto;
		padding-top : 80px;
	}
	
	.topImg{
		position: relative; /* 親要素にrelative */
	}
	
	.topImg h1{
		position: absolute; /* 重ねたい子要素にabsolute */
		top:50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%); /* ベンダープレフィックス */
		-webkit-transform: translate(-50%,-50%); /* ベンダープレフィックス */
		transform: translate(-50%,-50%); /* センター寄せの修正 */
		color: #fff;
	}

	.topImg img{
		width : 90%;
		margin : 0 5%;
		display: block;
		box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
	}

	/* フェードイン */
	/* 下から上にフェードイン */
	.fadeInUp {
		animation-name: fadeInUp; /* キーフレームアニメーションを指定 */
		animation-duration: 1.5s; /* アニメーションの時間を指定 */
		animation-fill-mode: forwards; /* アニメーション再生後のスタイルを指定 */
		transform: translateY(50px);
		opacity: 0;
	}
	@keyframes fadeInUp {
		0% {
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	/* フェードイン */
	.fadeIn {
		animation-name: fadeIn; /* キーフレームアニメーションを指定 */
		animation-delay: 0.5s; /* アニメーションの開始時間の遅延 */
		animation-duration: 1s; /* アニメーションの時間を指定 */
		animation-fill-mode: forwards; /* アニメーション再生後のスタイルを指定 */
		opacity: 0;
	}
	@keyframes fadeIn {
		0% {
		}
		100% {
			opacity: 1;
		}
	}
	
	.wrap1{
		width : 100%;
		height : auto;
		margin : -100px auto 0 auto;
		padding : 160px 0 60px 0;
		background-color :#E8ECEF;
	}

	/* 表 */
	.tablebox{
		width : 56%;
		min-width :800px ;
		margin : 0 auto;
		padding : 30px 2%;
		background-color :#fff;
		overflow: auto;
	}

	table{
		width : 100%;
		margin : 0 auto;
	}
	
	table,th,td{
		border: none;
		border-collapse : collapse;
	}
	
	tr{
		border-top: 1px solid #CFD3D6;
		border-bottom: 1px solid #CFD3D6;
	}
	
	th{
		text-align : left;
		font-weight: 500;
		padding : 20px 10px;
		line-height : 1.8;
	}

	.data{
		width : 20%;
	}
	.jigyo{
		width : 80%;
	}

	.tablebox img{
		width : 18px;
		vertical-align: middle;
	}

	.tablebox td>a:link{
		display: block; 
		padding : 20px 10px;
		line-height : 1.8;
		color : #000;
		border: none;
	}
	
	.notlink{
		padding : 20px 10px;
		line-height : 1.8;
		color : #000;
		border: none;
	}

	.tablebox a:visited{
		color : #000;
		border: none;
	}
}

/* ==================== */
/*        スマホ        */
/* ==================== */

@media screen and (max-width: 999px) {
	
	main{
		width : 100%;
		height : auto;
		margin : 0 auto;
		padding-top : 60px;
	}
	
	.topImg{
		position: relative; /* 親要素にrelative */
	}
	
	.topImg h1{
		position: absolute; /* 重ねたい子要素にabsolute */
		top:50%;
		left: 50%;
		-ms-transform: translate(-50%,-50%); /* ベンダープレフィックス */
		-webkit-transform: translate(-50%,-50%); /* ベンダープレフィックス */
		transform: translate(-50%,-50%); /* センター寄せの修正 */
		color: #fff;
	}

	.topImg img{
		width: 100%;
		height: 200px;
		object-fit: cover;
		margin : 0 auto;
		display: block;
		box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
	}

	/* フェードイン */
	.fadeIn {
		animation-name: fadeIn; /* キーフレームアニメーションを指定 */
		animation-duration: 1.5s; /* アニメーションの時間を指定 */
		animation-fill-mode: forwards; /* アニメーション再生後のスタイルを指定 */
		opacity: 0;
	}
	@keyframes fadeIn {
		0% {
		}
		100% {
			opacity: 1;
		}
	}
	
	.wrap1{
		width : 100%;
		height : auto;
		margin : 0 auto;
		padding : 30px 0;
		background-color :#E8ECEF;
	}
	
	/* 表 */
	.tablebox{
		width : 88%;
		padding: 15px 3%;
		margin : 0 auto;
		background-color :#fff;
		overflow: auto;
	}
		
	table{
		width : 100%;
		margin : 0 auto;
	}
	
	table,th,td{
		border: none;
		border-collapse : collapse;
	}
	
	tr{
		border-top: 1px solid #CFD3D6;
		border-bottom: 1px solid #CFD3D6;
	}
	
	th{
		font-weight: 500;
		padding :10px 0 10px 10px;
	}
	
	th,td{
		display: block;
		text-align:left;
		line-height : 1.8;
	}

	.data{
		width : 100%;
	}
	.history{
		width : 100%;
	}

	.tablebox img{
		width : 15px;
		vertical-align: middle;
	}

	.tablebox a:link{
		display: block;
		padding :0 0 10px 10px;
		color : #000;
		border: none;
	}
	
	.notlink{
		display: block;
		padding :0 0 10px 10px;
		color : #000;
		border: none;
	}

	.tablebox a:visited{
		color : #000;
		border: none;
	}
}

/* ==================== */
/*        ホバー        */
/* ==================== */

@media (hover: hover) {
	.tablebox a:hover{
		color : #000;
		opacity:0.5;
	}
}

@media (hover: none) {
	.tablebox a:active{
		color : #000;
		opacity:0.5;
	}
}