@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 :66%;
		min-width : 800px;
		margin : 30px auto 0 auto;
		padding : 0 2%;
		background-color : #fff;
		overflow: auto;
	}

	table{
		width : 100%;
		margin : 15px auto;
	}
	
	table,th,td{
		border: none;
		border-collapse : collapse;
	}
	
	tr{
		border-bottom: 1px solid #CFD3D6;
	}
	
	th{
		border-bottom: 3px solid #CFD3D6;
		text-align:left;
	}
	
	th,td{
		padding : 10px;
		white-space: nowrap; /* 改行禁止 */
		line-height : 1.8;
	}

	.jiki{
		width : 30%;
	}
	.jigyo{
		width : 70%;
	}
}

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

@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;
	}
	
	h2{
		text-align : center;
	}

	.table-container{
		position: relative;
		top : 0;
		left: 0;
	}
	
	/* 表 */
	.tablebox{
		width : 88%;
		padding: 15px 3%;
		margin : 30px auto 0 auto;
		background-color :#fff;
		overflow: auto;
		}
		
	table{
		width : 100%;
		margin : 0 auto;
	}
	
	table,th,td{
		border: none;
		border-collapse : collapse;
	}
	
	tr{
		border-bottom: 1px solid #CFD3D6;
	}
	
	th{
		border-bottom: 3px solid #CFD3D6;
	}
	
	th,td{
		padding : 10px;
		white-space: nowrap; /* 改行禁止 */
		line-height : 1.8;
	}
	
	th{
		text-align:left;
	}
	
	.jiki{
		width : 35%;
	}
	.jigyo{
		width : 65%;
	}
}


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

@media (hover: hover) {

	/* スクロールヒント非表示 */
	.scroll-indicator {
		display: none;
	}
}

@media (hover: none) {

	/* スクロールヒントのスタイル */
	.scroll-indicator {
		opacity: 0.7;

		/* absoluteを使用し、スクロールヒントを中央配置 */
		position: absolute;
		left: 50%;
		top: 19%;

		/* クリックを無効化
		スクロールヒントがクリックの邪魔になる可能性があるため */
		pointer-events: none; 

		/* transitionを指定し、ゆっくりと非表示にする */
		transition: opacity 0.3s ,visibility 0.3s;
	}

	/* ある程度スクロールされたら非表示にする */
	.scroll-indicator.is-scroll {
		visibility: hidden;
		opacity: 0;
	}

	.scroll-indicator-inr {
		font-size: 12px;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 15px 10px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		animation: fadeBlink 2s infinite ease-in-out;
	}

	.scroll-indicator-inr img {
		width: 50px;
	}

	/* スクロールヒントの点滅アニメーション */
	@keyframes fadeBlink {
		0% { opacity: 0.2; }
		50% { opacity: 1; }
		100% { opacity: 0.2; }
	}
}