@charset "utf-8";
/* テーブルを包んでいるラッパーに横スクロールを許可する設定を追加 */
.kakono-kiroku-base-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする */
}
.page_common_inner .kkk_wrap .kkk_h2 {
	margin-bottom: 3.84%;
	border-bottom: 4px solid #275AF2;
	color: #275AF2;
	font-size: 32px;
	width: fit-content;
	padding-bottom: 16px;
}

.kakono-kiroku-base-wrap table {
	width: 100%;
/*	background-color: #DBDBDB;*/
	border-collapse: collapse;
	min-width: 960px;
}
.kakono-kiroku-base-wrap table td {
	padding-top: 12px;
	padding-bottom: 12px;
	font-size: 13px;
	padding-left: 8px;
	padding-right: 8px;
	border-left: 1px solid #C4C4C4;
	line-height: 1.3em;
}
.kakono-kiroku-base-wrap table tr .kakokkk_num {
	width: 40px;
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
	font-weight: bold;
	background-color: rgba(218,228,242,0.17);
}

.kakono-kiroku-base-wrap table .tr1 .kakokkk_num {
	background-color: rgba(247,247,155,1.00);
}
.kakono-kiroku-base-wrap table .tr2 .kakokkk_num {
	background-color: rgba(233,233,233,0.54);
}

.kakono-kiroku-base-wrap table th {
	color: #275AF2;
	line-height: 1.3em;
	width: 110px;
}

.kakono-kiroku-base-wrap table tr .kakokkk_daigaku {
	width: 130px;
}

.kakono-kiroku-base-wrap table .tr1 {
	background-color: #FEFEF1;
/*	border-bottom: 3px solid #545454;*/
}
.kakono-kiroku-base-wrap table .tr2{
	background-color: #FFFFFF;
}
.kakono-kiroku-base-wrap table tr{
	border-bottom: 1px solid #C4C4C4;
}
/* ========================================================
   テーブルの上にバーンと出す横スクロール案内
======================================================== */
@media screen and (max-width: 960px) {
	/* テーブルを包む要素の基準位置を設定 */
	.kkk_wrap {
		position: relative;
	}

	/* テーブルの上に被せる黒板（背景） */
	.scroll-hint-overlay {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		
		top: 20px; 
		left: 5%;
		width: 90%;
		height: 180px; 
		
		background-color: rgba(0, 0, 0, 0.75); 
		border-radius: 8px; 
		z-index: 100;
		
		/* 【変更】5秒間表示して、0.6秒かけてフワッと消えるアニメーションを指定 */
		animation: fadeOutOverlay 0.6s ease 5.0s forwards;
	}

	/* 中央のコンテンツ */
	.scroll-hint-overlay .hint-content {
		text-align: center;
		color: #ffffff;
		padding-top: 10px; 
	}

	/* アイコンを右から左へ動かすスワイプアニメーション（1秒のループ） */
	.scroll-hint-overlay .hint-icon {
		font-size: 48px;
		display: inline-block;
		animation: yuraYuraLarge 1.0s infinite ease-in-out;
		margin-bottom: 5px;
	}

	/* 案内テキスト */
	.scroll-hint-overlay .hint-text {
		font-size: 15px;
		font-weight: bold;
		letter-spacing: 0.05em;
		margin: 0;
		text-shadow: 0 2px 4px rgba(0,0,0,0.6);
	}
}

/* PCサイズ（961px以上）では非表示 */
@media screen and (min-width: 961px) {
	.scroll-hint-overlay {
		display: none !important;
	}
}

/* 指の動き（右から左へ引っ張る） */
@keyframes yuraYuraLarge {
	0% { transform: translateX(20px); opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { transform: translateX(-20px); opacity: 0; }
}

/* 【新しく追加】5秒後に全体をフワッと消して、触れるようにするアニメーション */
@keyframes fadeOutOverlay {
	0% {
		opacity: 1;
		pointer-events: auto;
	}
	99% {
		opacity: 0;
		pointer-events: auto; /* 消えかけている間は後ろのテーブルを触らせない */
	}
	100% {
		opacity: 0;
		pointer-events: none; /* 完全に消えたら後ろのテーブルを触れるようにする */
		display: none;        /* 存在を消す */
	}
}
.pccpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpcpc{}


@media screen and (max-width:700px){
	.page_common_inner .kkk_wrap .kkk_h2 {
	margin-bottom: 3.84%;
	border-bottom: 4px solid #275AF2;
	color: #275AF2;
	font-size: 24px;
	width: fit-content;
	padding-bottom: 16px;
		line-height: 1.5em;
}
}
