@charset "UTF-8";
:root {
	--bg: #fff;
	--ink: #0f172a;
	--ink-weak: #003366;
	--brand: #0ea5e9;
	--brand-ink: #0b74a5;
	--accent: #22c55e;
	--warn: #eab308;
	--danger: #ef4444;
	--muted: #f1f5f9;
	--border: #e2e8f0;
	--shadow: 0 10px 25px rgba(0, 0, 0, .08);
	--radius: 0.5rem;
	--radius-lg: 1rem;
	--max: 1200px;
	--max2: 1400px;
	--space: clamp(16px, 2.2vw, 24px);
	/* ヘッダー・フッター等 */
	--dark-blue: #083260;
	--dark-blue2: #00afcc;
	/* 明るい青 */
	--light-blue: #8299e0;
	/* 山吹色 */
	--tamabuki: #f7d75d;
	/* 薄い黄色 */
	--ususi-yellow: #f8f5e5;
}
*, *::before, *::after {
	box-sizing: border-box
}
html{
	scroll-behavior: smooth;
}
body {
	height: 100%;
	margin: 0;
	font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	color: var(--ink);
	font-size: 1em;
	background: var(--ususi-yellow);
	line-height: 1.5;
	word-break: break-all;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom
}
a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 2px transition: 0.5s;
	/* マウスカーソルを載せるとき */
}
a:hover {
	transition: 0.5s;
}
a.button {
	display: inline-block;
	text-decoration: none
}
.container {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--space)
}
/* main 一覧ページ用*/
#main {
	min-height: 100vh;
	height: auto;
	padding-top: 50px; /* ヘッダとの高さ調整 */
}

/* main スマホ時 */
@media screen and (max-width: 768px) {

	#main {
		padding-top: 30px; /* ヘッダとの高さ調整 */
	}

}

/* main_nomal 禁止事項と各ページ用*/
#main_nomal {
	min-height: 100vh;
	height: auto;
	padding-top: 30px;
}


.grid {
	display: grid;
	gap: var(--space)
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0
}
img .center {
	display: block;
}
.center {
	text-align: center;
}
/* ---------------------------
 * ヘッダー
 * --------------------------- */
header.site-header {
	position: fixed;
	width: 100vw;
	top: 0;
	z-index: 50;
	text-align: center;
	background: #fff;
}
header.site-header h1 {
	display: none;
}
.font-large {
	font-size: 130%;
}
@media (max-width:900px) {
.font-large {
	font-size: 110%;
}
}
.font-small {
	font-size: 90%;
}
.font-red {
	color: red;
}
.font-80 {
	font-size: 80%;
}
.font-120 {
	font-size: 120%;
}
.font-w700 {
	font-weight: 700;
}
.font-w200 {
	font-weight: 200;
}
/* ---------------------
 * ボタン【一覧に戻る】
 * --------------------- */
.button {
	padding: 14px 18px;
	border-radius: 14px;
	border: 1px solid transparent;
	box-shadow: var(--shadow)
}
.button.primary {
	background: var(--dark-blue);
	font-size: 2.0em;
	color: #fff;
}
.button.primary:hover {
	background: var(--brand-ink);
}
.button.outline {
	background: var(--dark-blue2);
	border-color: var(--dark-blue2);
	color: #fff;
}
.button.outline:hover {
	opacity: 0.7;
}
   p .button.outline {
		margin-left: 10px;
  }

@media screen and (max-width: 768px) {

  .button-area {
    gap: 15px;
  }

  .dept-button {
    width: calc(50% - 8px);
    height: 100px;
    font-size: 20px;
  }
}

/* セクション */
section {
	padding-block: clamp(90px, 6vw, 72px);
}
section .section-title {
	font-size: 30px;
/*	font-size: clamp(30px, 3vw, 48px); */
	margin: 0 0 8px;
	color: var(--dark-blue);
	padding-left: 10px;
}
section .section-title-main {
	font-size: 30px;
	color: var(--dark-blue);
	margin-bottom: 60px;
	text-align: center;
}
section .section-lead {
	color: var(--ink-weak);
	margin: 0 0 24px
}
/* カード */
.cards {
	grid-template-columns: repeat(3, 1fr)
}
.card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 30px;
	box-shadow: var(--shadow)
}
.card h3 {
	margin: 0 0 8px;
	padding: 5px 10px;
	background: var(--dark-blue);
	color: #fff;
	border-radius: var(--radius);
	font-size: 1.3em;
}
@media (max-width:900px) {
	.cards {
		grid-template-columns: 1fr;
	}
}


/* メインページボタン */
.button-area {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
    }

.dept-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 220px;
      height: 120px;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      text-decoration: none;
      border-radius: 12px;
      transition: opacity 0.3s ease;
    }

.dept-button:hover {
      opacity: 0.7;
    }

.keimu {
      background-color: #0074ff;
    }

.seian {
      background-color: #f49a0d;
    }

.kotsu {
      background-color: #50c183;
    }

.keiji {
      background-color: #3da0db;
    }

/* =========================
   Footer
========================= */
.site-footer {
	background: #083260;
	color: #fff;
	padding: 40px 20px;
}

.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.footer-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 25px;
}

.footer-links a {
	color: #fff;
	text-decoration: none;
	font-size: 0.9rem;
}

.footer-links a:hover {
	opacity: 0.7;
}

.footer-info {
	font-size: 0.95rem;
	line-height: 1.8;
	margin-bottom: 20px;
}

.footer-copy {
	font-size: 0.8rem;
	color: #fff;
/*	color: rgba(255,255,255,0.7);*/
	border-top: 1px solid rgba(255,255,255,0.2);
	padding-top: 20px;
}

/* スマホ */
@media screen and (max-width: 768px) {

	.site-footer {
		padding: 30px 15px;
	}

	.footer-links {
		flex-direction: column;
		gap: 12px;
	}

	.footer-info {
		font-size: 0.85rem;
	}
}


.header-inner span {
	display: none;
}

/* 上に戻る▲ */
.to-top {
	position: fixed;
	left: auto;
	right: 16px;
	bottom: 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}
.to-top.show {
	opacity: 1;
	pointer-events: auto;
	font-size: 1.0em;
}
@media screen and (max-width: 768px) {

	.to-top {
		bottom: 70px;
	}

}
/* 小さなユーティリティ */
.muted {
	color: var(--ink-weak)
}

/* 紺色*/
.bg_kon, .bg_pink {
	background: #223088 !important;
}
.bg_kon_usui {
	background: #e3e7ff!important;
}
/* 水色*/
.bg_mizu {
	background: #00afcc !important;
}
.bg_mizu_usui {
	background: #d4f9ff !important;
}
/* 淡い黄*/
.bg_yellow {
	background: #f7d75d !important;
	color: #333!important;
}
.bg_yellow_usui {
	background: #ffffe0 !important;
}
/* 淡い緑 */
.bg_green {
	background: #B8FF7D !important;
}
.btn {
	display: inline-block;
	background: #0ea5e9;
	color: #fff;
	border: 1px solid #0ea5e9;
	padding: 5px 15px;
	border-radius: 10px;
	text-decoration: none;
}
.btn:hover {
	display: inline-block;
	background: #fff;
	color: #0ea5e9;
	padding: 5px 15px;
	border-radius: 10px;
	text-decoration: none;
}

#linkWrap{
	margin-top:1em;
}

a.disabled {
	pointer-events: none;
	/* クリック無効 */
/*	opacity: 0.5;*/
	opacity: 0;
	cursor: default;
}
input[type=checkbox] {
	transform: scale(2);
	margin-left: 36px;
}
/* ---------------------------
 * テキストリンク
 * --------------------------- */
a.text {
	color: #0ea5e9;
	text-decoration: none;
	padding-bottom: 3px;
	background-image: linear-gradient(#0ea5e9, #0ea5e9);
	background-repeat: no-repeat;
	background-size: 0% 1px;             /* 初期はゼロ幅 */
	background-position: 100% 100%;      /* 右端から */
	transition: background-size 0.3s ease;
}
a.text:hover {
	background-size: 100% 1px;           /* 全幅まで広がる */
	background-position: 0% 100%;        /* 左まで伸びる */
}
.sp {
	display: none;
}
.pc {
	display: block;
}
 @media (max-width:900px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
}
.schedule {
	display: flex;
	flex-wrap: wrap; /* 折り返しを許可 */
	max-width: 1000px; /* 必要に応じて調整 */
	margin: 0 auto;
	border-top: 1px solid #ddd;
	padding-top: 10px;
}
.schedule dt {
	flex-basis: 150px; /* 日付の横幅を固定 */
	font-weight: bold;
	color: #333;
	padding: 10px 0;
}
.schedule dd {
	flex-basis: calc(100% - 150px); /* 全体から日付分を引いた幅 */
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px dotted #ccc; /* 行間の区切り線（お好みで） */
}
/* リンクが複数ある場合に縦に並べる設定 */
.schedule dd a {
	display: block; /* リンクごとに改行 */
	color: #0056b3;
	text-decoration: none;
	margin-bottom: 5px;
}
.schedule dd a:hover {
	text-decoration: underline;
}

/* スマホ表示：画面が狭いときは縦並びに切り替え */
@media (max-width: 600px) {
.schedule dt {
	flex-basis: 100%; /* 日付をフル幅に */
	padding-bottom: 0;
}
.schedule dd {
	flex-basis: 100%; /* 文章もフル幅に */
	padding-top: 5px;
	margin-bottom: 10px;
}
}
/* 目次コンテナ全体のスタイル */
.title-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
#auto-toc {
	padding: 0;
	margin:  0;
}
/*#auto-toc {
	background: #f0f4f8;  薄いブルーグレー 
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 12px;
}*/
/*
#auto-toc::before {
  content: "クイックメニュー";
  font-weight: bold;
  display: block;
  margin-bottom: 15px;
  color: #2c3e50;
  font-size: 1.1rem;
  border-left: 4px solid #0056b3;
  padding-left: 10px;
}
*/
/* リストを横並びのボタン形式にする */
.toc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap; /* 画面幅が狭いときは折り返す */
	gap: 10px;       /* ボタン同士の隙間 */
}
/* ボタン（aタグ）のスタイル */
.toc-list a {
	display: inline-block;
	background-color: #ffffff;
	color: #0056b3;
	padding: 10px 18px;
	border: 2px solid #0056b3;
	border-radius: 50px; /* 角丸でボタンらしく */
	text-decoration: none;
	font-weight: bold;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* ホバー（マウスを乗せた時）の演出 */
.toc-list a:hover {
	background-color: #0056b3;
	color: #ffffff;
	transform: translateY(-2px); /* 少し浮き上がる */
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* 着地点がヘッダーで見切れないように調整 */
h3 {
	scroll-margin-top: 80px;
	font-size: 1.5em;
}
h4 {
	font-size: 1.2em;
	padding-left: 10px;
}
h4::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 13px;
	border-radius: 50%;
	background: var(--dark-blue);
}
.grid-container {
	display: grid;
	gap: 10px;
	/* デフォルト（スマホ）：1カラム */
	grid-template-columns: 1fr;
}

/* 画面幅が600px以上の場合、4カラムにする */
@media (min-width: 600px) {
	.grid-container {
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}
}
.grid_item {
}
.container_card {
	display: grid;
	/* 1列あたり最小250px、最大1fr（均等）で、入る分だけ自動作成 */
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px; /* カード同士の隙間 */
	padding: 20px;
	max-width: 1400px; /* 4列が綺麗に収まる程度の最大幅 */
	margin: 0 auto;
}
.main_card {
	text-decoration: none; /* リンクの下線を消す */
	color: inherit;        /* 文字色を親要素から継承（青くならないように） */
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	cursor: pointer; /* マウスカーソルを指マークに */
}
/* ホバー時の演出（少し浮き上がらせて、影を強くする） */
.main_card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	background-color: #f9f9f9; /* ほんの少し背景色を変えるとおしゃれ */
}
/* 画像のスタイル */
.main_card-image {
	width: 100%;
	height: 200px;
	object-fit: cover;
}
/* テキスト部分 */
.main_card-content {
	padding: 16px;
	flex-grow: 1; /* 説明文の長さが違っても高さを揃える */
}
.main_card-title {
	margin: 0 0 8px 0;
	font-size: 1.2rem;
}
.main_card-description {
	margin: 0;
	font-size: 0.9rem;
	color: #666;
}

/* 画面が広い時でも最大4列に制限したい場合 */
@media (min-width: 1100px) {
	.container_card {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 禁止事項ページ 線囲み */
.box-text {
	border: 2px solid #083260;
	border-radius: 10px;
	padding: 20px;
	margin: 20px 0;
	background: #ffffff;
	color: #333;
	line-height: 1.8;
}