@charset "UTF-8";
/* 全体の配色 会社イメージカラー(ブルー系) */
:root {
	--bg-color: #e6f2ff;        /* パステルブルー背景 */
	--card-color: #ffffff;
	--accent-color: #b3d9ff;    /* メインカラー */
	--accent-dark: #80c1ff;     /* やや濃いブルー */
	--text-color: #4a5a6a;      /* 柔らかいブルーグレー */
	--border-color: #cce6ff;    /* 明るい淡ブルー */
}

/* 基本レイアウト */
body {
	font-family:
		'M PLUS Rounded 1c',
		'Quicksand',
		-apple-system, BlinkMacSystemFont,
		'Segoe UI', Roboto, 'Helvetica Neue',
		Arial, sans-serif;
	background-color: var(--bg-color);
	color: var(--text-color);
	margin: 0;
	padding: 0;
}

/* ヘッダー */
header {
    background: var(--accent-color);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--accent-dark);
}

.header-logo {
    height: 80px;
    width: auto;
}

h1, h2 {
	margin: 0.5em 0;
}

/* メイン */
main {
	padding: 15px;
}

/* details */
details {
	background: var(--card-color);
	border-radius: 12px;
	margin-bottom: 15px;
	border: 1px solid var(--border-color);
	padding: 10px;
}

details summary {
	font-weight: bold;
	cursor: pointer;
	padding: 8px 0;
}

details[open] {
	border-color: var(--accent-dark);
}

/* index 用ナビメニュー */
nav ul {
	list-style: none;
	padding: 0;
	margin: 25px auto;
	max-width: 400px;
}

nav li {
	margin: 15px 0;
}

nav a {
	display: block;
	text-align: center;
	padding: 15px;
	background-color: var(--card-color);
	border-color: var(--accent-color);
	border: 2px solid;
	border-radius: 12px;
	text-decoration: none;
	font-size: 1.2em;
	color: var(--text-color);
	font-weight: bold;
	transition: 0.25s;
}

/* ホバー時 */
nav a:hover {
	background-color: var(--accent-dark);
	border-color: var(--accent-dark);
	color: var(--text-color);
	transform: translateY(-3px);
}

/* チェックボックス + ラベル */
label {
	display: flex;
	align-items: center;
	padding: 6px 0;
	font-size: 1.05em;
}

input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin-right: 10px;
	accent-color: var(--accent-dark);
}

/* 表 */
.custom-table {
  border-collapse: collapse;
}

.custom-table td {
  width: 80px;
  height: 40px;
  border: 1px solid #000;
}

/* 一番上の行 */
.custom-table tr:first-child td {
  background-color: var(--accent-color);
}

/* 一番左の列 */
.custom-table td:first-child {
  background-color: var(--accent-color);
}

/* 下から2行目と最下行の間を太線にする */
.custom-table .thick-border td {
  border-bottom: 4px solid #000;
}

/* 表2 */
.custom-table2 {
  border-collapse: collapse;
}

.custom-table2 td {
  width: 80px;
  height: 40px;
  border: 1px solid #000;
}

/* 一番左の列 */
.custom-table2 td:first-child {
  background-color: var(--accent-color);
}

/* 画像最適化 */
.responsive-img {
  max-width: 100%;
  height: auto;
}

.slideshow {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.slide {
  width: 100%;
  display: block;
  transition: opacity 0.5s ease;
}

/* ロゴの中央表示 */
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 80vw;
  height: auto;
  z-index: 10;
  pointer-events: none;
}

/* フェードアウト用 */
.fade-out {
  opacity: 0;
}

/* フッター */
footer {
	text-align: center;
	padding: 15px 0;
	color: #4a5a6a;
}

/* スマホ最適化 */
@media (max-width: 600px) {
	main {
		padding: 10px;
	}

	nav a {
		font-size: 1.1em;
		padding: 12px;
	}

	label {
		font-size: 1em;
	}

	input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
}