@charset "utf-8";

/* ========================================================
   共通レイアウト・見出し
======================================================== */
.page_common_inner .kkk_wrap {
	position: relative;
}

.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;
}

.kkk_wrap .kako_taikai_p {
	margin-top: 16px;
	line-height: 1.6em;
}

.kkk_box1 {
	margin-top: 3.84%;
}

.kkk_wrap.show-scroll-hint-pc .kkk_box1 p {
	line-height: 1.6em;
}

@media screen and (max-width:700px) {
	.page_common_inner .kkk_wrap .kkk_h2 {
		font-size: 24px;
		line-height: 1.5em;
	}
}


/* ========================================================
   共通：テーブル外枠
   BASE4 = .kakono-kiroku-base-wrap
   BASE5 = .kakono-kiroku-base-wrap2
======================================================== */
.kakono-kiroku-base-wrap,
.kakono-kiroku-base-wrap2 {
	width: 100%;
	position: relative;
	-webkit-overflow-scrolling: touch;
}

/* BASE4：横スクロールあり + 見出し固定のため縦スクロール領域にする */
.kakono-kiroku-base-wrap {
	overflow: auto;
	max-height: 70vh;
}

/* BASE5：PCでは通常表示 */
.kakono-kiroku-base-wrap2 {
	overflow: visible;
}


/* ========================================================
   共通：records テーブル基本
======================================================== */
.kakono-kiroku-base-wrap #records,
.kakono-kiroku-base-wrap2 #records {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: auto;
}

/* BASE4は列が多いので横幅固定 */
.kakono-kiroku-base-wrap #records {
	min-width: 1810px;
}

/* BASE5はPCでは横スクロールなし */
.kakono-kiroku-base-wrap2 #records {
	min-width: 0;
}


/* ========================================================
   共通：セル基本
======================================================== */
.kakono-kiroku-base-wrap #records th,
.kakono-kiroku-base-wrap #records td,
.kakono-kiroku-base-wrap2 #records th,
.kakono-kiroku-base-wrap2 #records td {
	line-height: 1.3em;
	vertical-align: middle;
	background-clip: padding-box;
	box-sizing: border-box;
}

.kakono-kiroku-base-wrap #records th,
.kakono-kiroku-base-wrap2 #records th {
	width: 168px;
	padding-top: 16px;
	padding-bottom: 16px;
	color: #275AF2;
	font-weight: bold;
	text-align: center;
}

.kakono-kiroku-base-wrap #records td,
.kakono-kiroku-base-wrap2 #records td {
	padding: 12px 8px;
	font-size: 13px;
	border-left: 1px solid #C4C4C4;
}


/* ========================================================
   年度列：1行表示にする
======================================================== */
.kakono-kiroku-base-wrap #records th:first-child,
.kakono-kiroku-base-wrap2 #records th:first-child,
.kakono-kiroku-base-wrap #records .nengo_th,
.kakono-kiroku-base-wrap2 #records .nengo_th {
	width: 260px;
	min-width: 260px;
	white-space: nowrap;
}

/* 「回」列は少し狭める */
.kakono-kiroku-base-wrap #records .ththth > th:nth-child(2),
.kakono-kiroku-base-wrap2 #records .ththth > th:nth-child(2),
.kakono-kiroku-base-wrap #records tr:not(.ththth) > td:nth-child(2),
.kakono-kiroku-base-wrap2 #records tr:not(.ththth) > td:nth-child(2) {
	width: 90px;
	min-width: 90px;
	text-align: center;
	white-space: nowrap;
}


/* ========================================================
   共通：行背景
======================================================== */
.kakono-kiroku-base-wrap #records .tr1,
.kakono-kiroku-base-wrap2 #records .tr1 {
	background-color: #FEFEF1;
}

.kakono-kiroku-base-wrap #records .tr1 th,
.kakono-kiroku-base-wrap2 #records .tr1 th {
	background-color: #FEFEF1;
	border-right: 1px solid #D8D8D8;
}

.kakono-kiroku-base-wrap #records .tr2,
.kakono-kiroku-base-wrap2 #records .tr2 {
	background-color: #FFFFFF;
}

.kakono-kiroku-base-wrap #records .tr2 th,
.kakono-kiroku-base-wrap2 #records .tr2 th {
	background-color: #FFFFFF;
	border-right: 1px solid #D8D8D8;
}

.kakono-kiroku-base-wrap #records tr > th,
.kakono-kiroku-base-wrap #records tr > td,
.kakono-kiroku-base-wrap2 #records tr > th,
.kakono-kiroku-base-wrap2 #records tr > td {
	border-bottom: 1px solid #C4C4C4;
}


/* ========================================================
   共通：一番上の見出し行 ththth
   白文字 + ブルー背景 + 上固定
======================================================== */
.kakono-kiroku-base-wrap #records .ththth > th,
.kakono-kiroku-base-wrap2 #records .ththth > th {
	position: sticky;
	top: 0;
	z-index: 50;
	color: #FFFFFF;
	background-color: #275AF2;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	text-align: center;
}

/* 左上の「年度」 */
.kakono-kiroku-base-wrap #records .ththth > th:first-child,
.kakono-kiroku-base-wrap2 #records .ththth > th:first-child {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 80;
	color: #FFFFFF;
	background-color: #275AF2;
}


/* ========================================================
   共通：左の年度列固定
======================================================== */
.kakono-kiroku-base-wrap #records tr:not(.ththth) > th:first-child,
.kakono-kiroku-base-wrap2 #records tr:not(.ththth) > th:first-child {
	position: sticky;
	left: 0;
	z-index: 30;
	border-right: 1px solid #D8D8D8;
}

.kakono-kiroku-base-wrap #records .tr1 > th:first-child,
.kakono-kiroku-base-wrap2 #records .tr1 > th:first-child {
	background-color: #FEFEF1;
}

.kakono-kiroku-base-wrap #records .tr2 > th:first-child,
.kakono-kiroku-base-wrap2 #records .tr2 > th:first-child {
	background-color: #FFFFFF;
}


/* ========================================================
   旧タイプ用：順位番号セルがある場合
======================================================== */
.kakono-kiroku-base-wrap table tr .kakokkk_num,
.kakono-kiroku-base-wrap2 table tr .kakokkk_num {
	width: 40px;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
	font-weight: bold;
}

.kakono-kiroku-base-wrap table tr .kakokkk_daigaku,
.kakono-kiroku-base-wrap2 table tr .kakokkk_daigaku {
	width: 130px;
}

.kakono-kiroku-base-wrap table .tr1 .kakokkk_num,
.kakono-kiroku-base-wrap2 table .tr1 .kakokkk_num {
	background-color: rgba(247,247,155,1.00);
}

.kakono-kiroku-base-wrap table .tr2 .kakokkk_num,
.kakono-kiroku-base-wrap2 table .tr2 .kakokkk_num {
	background-color: rgba(233,233,233,0.54);
}


/* ========================================================
   中止行など
======================================================== */
.kakono-kiroku-base-wrap table .tr_stop th,
.kakono-kiroku-base-wrap2 table .tr_stop th {
	background: #f3f3f3;
	color: #333;
	text-align: left;
	font-weight: bold;
	letter-spacing: 0.05em;
	padding: 18px 24px;
	position: static;
}


/* ========================================================
   BASE5用：960px以下だけ横スクロール + 表内スクロール
======================================================== */
@media screen and (max-width:960px) {

	.kakono-kiroku-base-wrap2 {
		overflow: auto;
		max-height: 70vh;
	}

	.kakono-kiroku-base-wrap2 #records {
		min-width: 1000px;
	}

	/* スマホでは年度列を少しだけ狭く */
	.kakono-kiroku-base-wrap #records th:first-child,
	.kakono-kiroku-base-wrap2 #records th:first-child,
	.kakono-kiroku-base-wrap #records .nengo_th,
	.kakono-kiroku-base-wrap2 #records .nengo_th {
		width: 230px;
		min-width: 230px;
	}
}


/* ========================================================
   横スクロール案内
======================================================== */
.scroll-hint-overlay {
	display: none;
	position: absolute;
	left: 50%;
	top: 120px;
	transform: translateX(-50%);
	width: 90%;
	max-width: 520px;
	height: 160px;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.75);
	border-radius: 8px;
	z-index: 200;
	pointer-events: none;
	animation: fadeOutOverlay 0.6s ease 5s forwards;
}

/* 960px以下だけ表示 */
@media screen and (max-width:960px) {
	.scroll-hint-overlay {
		display: flex;
	}
}

/* BASE4でPCでも横スクロール案内を出したい場合だけ使う */
@media screen and (min-width:961px) {
	.kkk_wrap.show-scroll-hint-pc .scroll-hint-overlay {
		display: flex;
	}
}

.scroll-hint-overlay.is-hidden {
	display: none !important;
}

.scroll-hint-overlay .hint-content {
	text-align: center;
	color: #ffffff;
	padding-top: 10px;
}

.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);
}


/* ========================================================
   アニメーション
======================================================== */
@keyframes yuraYuraLarge {
	0% {
		transform: translateX(20px);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	100% {
		transform: translateX(-20px);
		opacity: 0;
	}
}

@keyframes fadeOutOverlay {
	0% {
		opacity: 1;
	}
	99% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}





/* 中止行の文言 */
.kakono-kiroku-base-wrap #records .chuushi_td,
.kakono-kiroku-base-wrap2 #records .chuushi_td {
	text-align: left;
	font-weight: bold;
	color: #333;
	padding-left: 24px;
	white-space: nowrap;
}